1. function EnableEdit()
  2. {
  3.     var editor;
  4.     editor = document.getElementById("HtmlEdit").contentWindow;
  5.   // 针对IE浏览器, make it editable
  6.     editor.document.designMode = 'On';
  7.     editor.document.contentEditable = true;
  8.   // For compatible with FireFox, it should open and write something to make it work
  9.     editor.document.open();
  10.     editor.document.writeln('<html><head>');
  11.     editor.document.writeln('<style>body {background: white;font-size:9pt;margin: 2px; padding: 0px;}</style>');
  12.     editor.document.writeln('</head><body></body></html>');
  13.     editor.document.close();
  14. }
  15.  
  16. <iframe  ID="HtmlEdit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="312">
  17. </iframe>
  1. <iframe src="" name="editor" id="editor" style="border: 1px solid rgb(204, 204, 204);" frameborder="0" height="200" width="400"></iframe>
  2.  
  3. <div>
  4. 	<input type="button" onclick="insert(1)" value="insert image">
  5. 	<input type="button" onclick="insert(2)" value="insert text">
  6. </div>
  7.  
  8. <script>
  9. 	_win=$('#editor')[0].contentWindow; // 我们用 _win 变量代替 iframe window
  10. 	_doc=_win.document;                        // 用 _doc 变量代替 iframe的document
  11. 	_doc.designMode = 'On';
  12.  
  13. 	if( $.browser.msie ){
  14. 	   _doc.write('<img src="pet_store_api.png">');
  15. 	}else{
  16. 		 _doc.open();
  17. 		 _doc.write('<img src="pet_store_api.png">');
  18. 		 _doc.close();
  19. 	}
  20.  
  21. 	function insertHTML( sHtml )
  22. 	{
  23. 			   _win.focus();
  24. 			   if(   $.browser.msie ){
  25. 					  _doc.selection.createRange().pasteHTML( sHtml ) ;
  26. 			   }else{
  27. 					  _doc.execCommand( 'InsertHtml' , '' , sHtml );
  28. 			   }
  29.  
  30. 	}
  31. 	function insert(type){
  32. 		if(type==1){
  33. 			insertHTML( '<img src="pet_store_api.png">' );
  34. 		}else{
  35. 			insertHTML( 'haha' );
  36. 		}
  37. 	}
  38. </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. ubuntu14.0 安装 node v8.11.1(任意版本)

    由于众所周知的原因,通过node官网下载速度十分慢,我这里通过淘宝镜像安装 node8.11.1,其他版本同理. node版本淘宝镜像地址:https://npm.taobao.org/mirrors ...

  2. python 爬虫之 正则的一些小例子

    什么是正则表达式 正则表达式是对字符串操作的一种逻辑公式,就是 事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符”,这个“规则字符” 来表达对字符的一种过滤逻辑. 正则并不是pyth ...

  3. vue项目打包后路径出错

    安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...

  4. Java基础之断言

    断言是在Java 1.4中引入的.它能让你验证假设.如果断言失败(即返回false),就会抛出AssertionError(如果启用断言). 什么时候使用断言? 断言不应该用于验证输入数据到一个pub ...

  5. vmware安装——CentOS-6.5和Mysql

    1.新建虚拟机 2.安装centos6.5 3.centos设置 查看网络 4.vmware设置网络连接 关闭selinux [root@china ~]# vim /etc/selinux/conf ...

  6. Label Propagation Algorithm LPA 标签传播算法解析及matlab代码实现

    转载请注明出处:http://www.cnblogs.com/bethansy/p/6953625.html LPA算法的思路: 首先每个节点有一个自己特有的标签,节点会选择自己邻居中出现次数最多的标 ...

  7. python中map()函数

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. map()是 Python 内 ...

  8. [转]Subdirectory Checkouts with git sparse-checkout

    From:http://jasonkarns.com/blog/subdirectory-checkouts-with-git-sparse-checkout/ If there is one thi ...

  9. Android4.0 Launcher 源码分析2——Launcher内容加载绑定详细过程

    Launcher在应用启动的时候,需要加载AppWidget,shortcut等内容项,通过调用LauncherModel.startLoader(),开始加载的工作.launcherModel中加载 ...

  10. Python -- Windows编程 -- 注册表

    1.查询开机自启项 startUp.py import re import win32api, win32con def GetValues(fullname): #分割出基本项name[0] nam ...