`
luolonghao
  • 浏览: 118085 次
  • 性别: Icon_minigender_1
  • 来自: Shanghai
社区版块
存档分类
最新评论

contentEditable和designMode的区别

阅读更多
实现可视化编辑,可以使用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()的效果。这个问题非常要命,因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。
4
1
分享到:
评论

相关推荐

    编辑器中designMode和contentEditable的属性的介绍

    先解释一下在线编辑器的原理:首先需要IE5.0以上版本的支持.因为IE5.0以上版本有一个编辑状态,designMode是document的属性,意思是设置或获取表明文档是否可被编辑的值,默认值为off或Inherit

    YEditor:丰富的编辑器,不包含tententEditable或designMode

    这是一个简单的丰富编辑器,没有contentEditable或designMode 这是一个开始的项目,有很多待办事项。

    让你的网站可编辑的实现js代码

    document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由修改了!! 四、按照你自己的意图修改好后,在地址栏中输入: 代码如下: [removed]document.body.contentEditable=’false’; void...

    richie:Richie 是一个用于移动和桌面浏览器的 Javascript 富文本编辑器

    它直接使用 HTML DOM,不依赖于 contenteditable 或 designmode。地位里奇正在开发中。 预计会对代码进行彻底的更改。 不要依赖当前的开发版本。操作背景和理论随着移动设备功能的增长,访问用 HTML/Javascript ...

    editable-bookmarklet:可编辑的书签可切换任何可编辑的网页

    如果您可以制作此代码的书签,将页面切换为可编辑和不可编辑,该怎么办。 这是该书签的代码。 [removed] ( function ( ) { if ( document . body . contentEditable === 'false' || document . body . ...

    解除网页锁定

     javascript:document.body.contentEditable='true'; document.designMode='on'; void 0  然后回车,你就可以随心所欲的修改这个网站啦!  通过这段代码你可以对一些禁止复制内容的网页进行复制了。

    iframe节点初始化的问题探讨

    今天忽然想着复习一下富文本编辑器的制作原理。于是二话不说将手把手地做了起来。因为一年前写过一个简单的富文本编辑器,所以大概还是有点印象。... idoc.designMode = ‘on’; idoc.contentEditable = true; id

    一个符号插入器 中用到的js代码

    /** * @author tin... eWebEditor.document.designMode=”On”; eWebEditor.document.open(); eWebEditor.[removed](html); eWebEditor.document.body.contentEditable=”true”; eWebEditor.document.execCommand

    几个有趣的Javascript Hack

    1. 直接在浏览器中编辑网页内容 代码如下:[removed]document.body.contentEditable=’true’;document.designMode=’on’; void(0); 访问任意网站,在地址栏输入以上代码,会发生当前网页已经变成编辑模式了。2. ...

    极酷的javascirpt,让你随意编辑任何网页

    sein 在偶然得知了一个 javascript 秘籍后的兴奋癫狂状(下面的留言更值得一看),现在有人挖掘出了一个蛮酷的技巧,只要打开一个网站,然后在地址栏内打入: 代码如下:[removed]document.body.contentEditable=...

    设计模式「Design Mode」-crx插件

    opening您可以通过打开开发控制台(F12)并键入以下内容来手动激活设计模式:document.designMode ='on'; 当然,这需要更多的工作,并且您不会看到漂亮的图标告诉您哪些选项卡处于设计模式。 您需要一个很酷的扩展...

    神奇的代码 通杀各种网站-可随意修改复制页面内容

    页面上的所有内容都可以修改了,就像在word中编辑一样。那些不让拷贝的网站可以被这招通杀了。以后谁还会傻乎乎地分析... 代码内容: [removed]document.body.contentEditable=’true’; document.designMode=’on’;

    在IE上直接编辑网页内容的js代码(IE地址栏js)

    只要将下面的代码,在当前打开的页面的IE地址栏中,输入下面的js,即可以随意修改当前网页的内容了 代码如下:[removed]document.body.contentEditable=’true’; document.designMode=’on’;遇到不允许复制内容网页...

    从入门到精通HTML5——PDF——网盘链接

     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  ...

Global site tag (gtag.js) - Google Analytics