实现可视化编辑,可以使用contentEditable和designMode两种方法。contentEditable刚开始在IE上实现,后来各大浏览器陆续支持contentEditable,HTML5标准也包含contentEditable。designMode只能把document整体改成可编辑状态,但contentEditable可以把任何HTML元素改成可编辑状态,应用范围比designMode广,用contentEditable是将来的趋势。
但在IE上designMode和contentEditable不完全一样,有不少细微的差距,我们开发可视化编辑器时需要格外注意。
1. 在IE上使用designMode,调用document.domain将报没有权限的错误,用contentEditable没有此问题。
2. 在IE上使用designMode,右键菜单没有复制、粘贴功能,出来的是普通网页的右键菜单。
3. 在IE6和IE7上使用contentEditable,在某些情况下焦点自动移动到编辑区域,类似focus()的效果。这个问题非常要命,因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。
分享到:
相关推荐
先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持.因为IE5.0以上版本有一个编辑状态,designMode是document的属性,意思是设置或获取表明文档是否可被编辑的值,默认值为off或Inherit
这是一个简单的丰富编辑器,没有contentEditable或designMode 这是一个开始的项目,有很多待办事项。
document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由修改了!! 四、按照你自己的意图修改好后,在地址栏中输入: 代码如下: [removed]document.body.contentEditable=’false’; void...
它直接使用 HTML DOM,不依赖于 contenteditable 或 designmode。地位里奇正在开发中。 预计会对代码进行彻底的更改。 不要依赖当前的开发版本。操作背景和理论随着移动设备功能的增长,访问用 HTML/Javascript ...
如果您可以制作此代码的书签,将页面切换为可编辑和不可编辑,该怎么办。 这是该书签的代码。 [removed] ( function ( ) { if ( document . body . contentEditable === 'false' || document . body . ...
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 然后回车,你就可以随心所欲的修改这个网站啦! 通过这段代码你可以对一些禁止复制内容的网页进行复制了。
今天忽然想着复习一下富文本编辑器的制作原理。于是二话不说将手把手地做了起来。因为一年前写过一个简单的富文本编辑器,所以大概还是有点印象。... idoc.designMode = ‘on’; idoc.contentEditable = true; id
/** * @author tin... eWebEditor.document.designMode=”On”; eWebEditor.document.open(); eWebEditor.[removed](html); eWebEditor.document.body.contentEditable=”true”; eWebEditor.document.execCommand
1. 直接在浏览器中编辑网页内容 代码如下:[removed]document.body.contentEditable=’true’;document.designMode=’on’; void(0); 访问任意网站,在地址栏输入以上代码,会发生当前网页已经变成编辑模式了。2. ...
sein 在偶然得知了一个 javascript 秘籍后的兴奋癫狂状(下面的留言更值得一看),现在有人挖掘出了一个蛮酷的技巧,只要打开一个网站,然后在地址栏内打入: 代码如下:[removed]document.body.contentEditable=...
opening您可以通过打开开发控制台(F12)并键入以下内容来手动激活设计模式:document.designMode ='on'; 当然,这需要更多的工作,并且您不会看到漂亮的图标告诉您哪些选项卡处于设计模式。 您需要一个很酷的扩展...
页面上的所有内容都可以修改了,就像在word中编辑一样。那些不让拷贝的网站可以被这招通杀了。以后谁还会傻乎乎地分析... 代码内容: [removed]document.body.contentEditable=’true’; document.designMode=’on’;
只要将下面的代码,在当前打开的页面的IE地址栏中,输入下面的js,即可以随意修改当前网页的内容了 代码如下:[removed]document.body.contentEditable=’true’; document.designMode=’on’;遇到不允许复制内容网页...
12.4.1 contentEditable属性 237 12.4.2 designMode属性 238 12.4.3 hidden属性 239 12.4.4 spellcheck属性 239 12.4.5 tabindex属性 240 12.5 小结 240 12.6 习题 240 第13章 HTML 5的结构 242 ...