让iframe可编辑

functionEnableEdit()
{vareditor;editor= document.getElementById("HtmlEdit").contentWindow;//针对IE浏览器, make it editableeditor.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" οnclick="insert(1)" value="insert image"><input type="button" οnclick="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>

转载于:https://www.cnblogs.com/makan/p/4836087.html

让iframe可编辑相关推荐

JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
vue中实现及封装html合同文本在线编辑保存的功能
在vue项目开发中,遇到一个对纯html合同文本进行在线编辑保存的需求,自己用JQuery和iframe摸索着封装了一个组件,遇到相同需求的前端友人可以参考一下,后续还要完善.(贴出完整代码) /封装 ...
jqgrid定义多选操作
先定义: var SelectRowIndx; 然后加入以下属性: multiselect: true,onSelectRow: function () {SelectRowIndx = Get ...
***解决UEditor编辑器无法插入第三方视频地址
转:http://blog.csdn.net/qq_16241043/article/details/53894847 xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_ur ...
xy的跨浏览器在线编辑器超级简易版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
如何开发HTML编辑器
文章转载自:http://www.cnblogs.com/lucc/archive/2010/03/22/1692011.html 在线的HTML内容编辑器为用户提供文本的样式控制,例如文字的颜色.字 ...
javascript实现HTML在线编辑器
javascript实现HTML在线编辑器以前一直不知道好多网站上所说的在线编辑器是怎么回事,后来在文档里发现document 对象的一个方法. document.execCommand(com ...
HTML在线文本编辑器实现原理
相信很多人都使用过多种富文本编辑器,富文本编辑器常用于编辑博客.用户交互,富文本编辑器分为两种:所见即所得和非所见即所得两种富文本编辑器的实现原理是不相同的. 1. 非所见即所得编辑器这种编辑器的 ...
Ueditor设置默认字体、字号、行间距，添加字体种类
Ueditor默认字体.字号.行间距的修改: ueditor默认字号是16号,默认字体为sans-serif,默认行间距为5px,如下图所示: 首先,修改ueditor.all.js文件中如上图红框中 ...

让iframe可编辑

让iframe可编辑相关推荐

最新文章

热门文章