function EnableEdit()

{

    var editor;

    editor = document.getElementById("HtmlEdit").contentWindow;

  // 针对IE浏览器, make it editable

    editor.document.designMode = 'On';

    editor.document.contentEditable = true;

  // For compatible with FireFox, it should open and write something to make it work

    editor.document.open();

    editor.document.writeln('<html><head>');

    editor.document.writeln('<style>body {background: white;font-size:9pt;margin: 2px; padding: 0px;}</style>');

    editor.document.writeln('</head><body></body></html>');

    editor.document.close();

}

<iframe  ID="HtmlEdit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="312">

</iframe>
<iframe src="" name="editor" id="editor" style="border: 1px solid rgb(204, 204, 204);" frameborder="0" height="200" width="400"></iframe>

<div>

	<input type="button" onclick="insert(1)" value="insert image">

	<input type="button" onclick="insert(2)" value="insert text">

</div>

<script>

	_win=$('#editor')[0].contentWindow; // 我们用 _win 变量代替 iframe window

	_doc=_win.document;                        // 用 _doc 变量代替 iframe的document

	_doc.designMode = 'On';

	if( $.browser.msie ){

	   _doc.write('<img src="pet_store_api.png">');

	}else{

		 _doc.open();

		 _doc.write('<img src="pet_store_api.png">');

		 _doc.close();

	}

	function insertHTML( sHtml )

	{

			   _win.focus();

			   if(   $.browser.msie ){

					  _doc.selection.createRange().pasteHTML( sHtml ) ;

			   }else{

					  _doc.execCommand( 'InsertHtml' , '' , sHtml );

			   }

	}

	function insert(type){

		if(type==1){

			insertHTML( '<img src="pet_store_api.png">' );

		}else{

			insertHTML( 'haha' );

		}

	}

</script>

　　

让iframe可编辑的更多相关文章

  1. JavaScript Iframe富文本编辑器中的光标定位

    最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...

  2. UEditor编辑器并不难

    1.背景:        其实学习UEditor本该在这之前就应该学习整合到自己的项目中的了,第一次接触UEditor是在暑假期间,当时做东西在师兄的代码中发现了这东西,心想:卧槽,竟然可以这样整合别 ...

  3. 浏览器兼容性之JavaScript篇

    近期公司职务变动,我大部分工作时间都在做web前端开发.工作性质主要是跟javascript和css(层叠样式表)打交道,而JavaScript兼容性一直是Web开发者的心病,当然我也不例外,虽然我大 ...

  4. jqgrid定义多选操作

    先定义:    var SelectRowIndx; 然后加入以下属性: multiselect: true, onSelectRow: function () { SelectRowIndx = G ...

  5. 【Bootstrap系列】详解Bootstrap-table

    本篇文章将与大家分享bootstrap-table插件,借助于它实现基本的增删改查,导入导出,分页,父子表等. 至于其他技术,如冻结表头,列排列,行拖动,列拖动等,会在后续文章中与大家分享. 一    ...

  6. ***解决UEditor编辑器无法插入第三方视频地址

    转:http://blog.csdn.net/qq_16241043/article/details/53894847 xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_ur ...

  7. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  8. 百度编辑器UEditor不能插入音频视频的解决方法

    引用:https://my.oschina.net/u/379795/blog/787985 xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_url属性(用来存储视频url ...

  9. 【原创】【1】rich editor系列教程。前期准备，兼容

    [1]前期准备,兼容 索引目录:http://www.cnblogs.com/henryli/p/3439642.html rich editor的原理无非是启用iframe的编辑模式或者div的co ...

随机推荐

  1. 可方便扩展的JIRA Rest Web API的封装调用

    JIRA是一个缺陷跟踪管理系统,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域,当我们需要把第三方业务系统集成进来时,可以调用他的API. JIRA本身的A ...

  2. cobbler 自定义私有yum源

    目的:为客户端自动添加上yum源 以下以openstack源为例 1.新建私有yum源[root@localhost ~]#cobbler repo add --name=openstack-mita ...

  3. WebDriverAPI（6）

    在指定元素上方进行鼠标悬浮 测试网址 http://www.baidu.com Java语言版本实例 @Test public void roverOnElement() { driver.manag ...

  4. JavaScript 函数的4种调用方法

    JavaScript 函数有 4 种调用方式. 每种方式的不同方式在于 this 的初始化. 作为一个函数调用 function myFunction(a, b) { return a * b; } ...

  5. 点击按钮，生成一组一组combobox和slider时，避免控件Id相同，导致控件冲突的方法

    如下效果图,点击一次添加按钮,动态生成一组combobox和slider.由于easyUI的下拉框和滑块使用相同的控件id,通过JS生成控件,如果两个id一样就会造成冲突,例如点击第一组的下拉框,第二 ...

  6. Base64加密解密工具类

    使用Apache commons codec类Base64进行加密解密 maven依赖 <dependency> <groupId>commons-codec</grou ...

  7. Go语言学习笔记五： 条件语句

    Go语言学习笔记五: 条件语句 if语句 if 布尔表达式 { /* 在布尔表达式为 true 时执行 */ } 竟然没有括号,和python很像.但是有大括号,与python又不一样. 例子: pa ...

  8. Pascal的3种注释

    1.单行注释 {大括号里的内容都被注释掉} 2.单行注释2 //这种注释几乎是绝大部分语言中通用的了 3.多行注释 (*pascal的多行注释有点奇怪,使用的是:括号+星号的方式*)       其他 ...

  9. word黑底白字

    我们在使用word文档编辑文件时,有时候希望某段文字采用黑底白字,以区分其他段落的白底黑字从而达到强调的效果. 方法是: 1. 选中待处理的段落. 2. 点击“设计”选项卡. 3. 找到“设计”选下卡 ...

  10. Math.floor，Math.ceil,Math.rint,Math.round用法

    一.Math.floor函数讲解 floor原意:地板.Math.floor函数是求一个浮点数的地板,就是求一个最接近它的整数,它的值小于或等于这个浮点数.看下面的例子: package com.qi ...