让iframe可编辑
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可编辑的更多相关文章
- JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
- UEditor编辑器并不难
1.背景: 其实学习UEditor本该在这之前就应该学习整合到自己的项目中的了,第一次接触UEditor是在暑假期间,当时做东西在师兄的代码中发现了这东西,心想:卧槽,竟然可以这样整合别 ...
- 浏览器兼容性之JavaScript篇
近期公司职务变动,我大部分工作时间都在做web前端开发.工作性质主要是跟javascript和css(层叠样式表)打交道,而JavaScript兼容性一直是Web开发者的心病,当然我也不例外,虽然我大 ...
- jqgrid定义多选操作
先定义: var SelectRowIndx; 然后加入以下属性: multiselect: true, onSelectRow: function () { SelectRowIndx = G ...
- 【Bootstrap系列】详解Bootstrap-table
本篇文章将与大家分享bootstrap-table插件,借助于它实现基本的增删改查,导入导出,分页,父子表等. 至于其他技术,如冻结表头,列排列,行拖动,列拖动等,会在后续文章中与大家分享. 一 ...
- ***解决UEditor编辑器无法插入第三方视频地址
转:http://blog.csdn.net/qq_16241043/article/details/53894847 xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_ur ...
- 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计
在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...
- 百度编辑器UEditor不能插入音频视频的解决方法
引用:https://my.oschina.net/u/379795/blog/787985 xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_url属性(用来存储视频url ...
- 【原创】【1】rich editor系列教程。前期准备,兼容
[1]前期准备,兼容 索引目录:http://www.cnblogs.com/henryli/p/3439642.html rich editor的原理无非是启用iframe的编辑模式或者div的co ...
随机推荐
- 系统可能不会保存你所做的修改 onbeforeunload
网上找了好多实现这个的方法,说的还是不明白.害得我(我自己的原因)以为是需要在服务器环境下才能跑通 window.onbeforeunload; 后来猜想是不是函数返回值发生变化就会触发. <! ...
- [Swift实际操作]七、常见概念-(1).范围Range、ClosedRange和NSRange的使用实际操作
本文将为你解析区间的概念.在对字符串进行处理时,经常会使用到区间.例如获得字符串中从某个位置开始到另一个位置之间的内容. 首先导入需要使用到的框架 import Foundation 区间分为闭区间和 ...
- MySQL远程登陆解决
第一句:以权限用户root登录 第二句:选择mysql库 第三句:查看mysql库中的user表的host值(即可进行连接访问的主机/IP名称) 第四句:修改host值(以通配符%的内容增加主机/IP ...
- Swift 里字符串(十)修改字符串
以append操作为例 public mutating func append(_ other: String) { if self.isEmpty && !_guts.hasNati ...
- klee的docker镜像中没有gcc环境
sudo apt-get update 密码 klee sudo apt-get install gcc export LD_LIBRARY_PATH=/home/klee/lib/:$LD_LIBR ...
- iOS-AFNetworking参数和多文件同时上传【多文件上传】
1. 前言 在项目开发中,我们经常需要上传文件,例如:上传图片,上传各种文件,而有时也需要将参数和多个文件一起上传,不知道大家的项目中遇到了没有,我在最近的项目中,就需要这样的一个功能:同时上传参数. ...
- celery初始化
# 在任务处理者一端加初始化 import os import django os.environ.setdefault("DJANGO_SETTINGS_MODULE", &qu ...
- 【xsy1120】 支援(assist) dp+卡常
妙啊算错时间复杂度了 题目大意:给你一棵$n$个节点的二叉树,每个节点要么是叶子节点,要么拥有恰好两个儿子. 令$m$为叶子节点个数,你需要在这棵二叉树中选择$i$个叶子节点染色,叶节点染色需要一定的 ...
- 冒泡排序实现(Java)
冒泡排序是一种交换排序,它的基本思路是: 两两比较相邻记录的关键字,如果反序则交换,知道没有反序的记录位置. 依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数, ...
- Maven与Hudson集成
Hudson是一款优秀的持续集成产品,本文阐述Maven于Hudson的集成 Hudson的下载和安装 Hudson有两种安装模式,1:自运行(Hudson内建netty容器),2:放到如tomc ...