`
luolonghao
  • 浏览: 119692 次
  • 性别: 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的属性的介绍

    在实现在线编辑器的过程中,有两个关键的属性至关重要,即`designMode`和`contentEditable`。它们分别在不同的浏览器环境下启用文档的编辑功能。 `designMode`是HTML文档的`document`对象的一个属性,主要用于...

    Mozilla designMode and object with absolute position

    在Mozilla Firefox和其他支持此特性的浏览器中,`contentEditable`属性与`designMode`有着相似的效果。 接下来,我们讨论对象的绝对定位。在CSS布局中,绝对定位允许开发者指定一个元素相对于最近的非静态定位祖先...

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

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

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

    综合以上信息,我们可以推测YEditor是一个基于JavaScript的富文本编辑器,它不依赖`contentEditable`和`designMode`,而是使用自定义的实现方法。作为一款初级项目,它可能包含了一些基本的编辑功能,但还有许多扩展...

    网页ps代码

    通过分析提供的代码片段,我们了解到网页中的编辑功能可以通过`contentEditable`和`designMode`这两个属性来实现。这些技术的应用非常广泛,特别是在需要用户直接参与到内容创作或修改的网站中。理解这些基础知识...

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

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

    HTML5+CSS3前端开发教程flex布局项目实战1

    在HTML5中,也引入了许多新的属性和方法,例如contentEditable、designMode、hideen、tabindex等,这些属性和方法使得网页的交互性更加强大。 在CSS3中,flex布局是当前web开发中最流行的布局方式。flex布局可以...

    让你看到的每个jsp页面都可以像word文档一样

    2. JavaScript DOM操作:通过JavaScript访问和修改HTML元素,包括设置`contentEditable`属性和`designMode`。 3. JSP基础:理解JSP的工作原理,如何在HTML中嵌入Java代码,以及服务器端的处理流程。 4. AJAX技术:...

    神奇代码复制不能复制的网页内容.pdf

    通常和`contentEditable`搭配使用,以便对页面内容进行更高级别的编辑。 3. 使用JavaScript进行DOM操作 文档中的代码块包含了一系列的JavaScript语句,如变量`R`、`x1`、`y1`等的定义以及函数`A()`的定义。这里涉及...

    直接修改某网页[代码文本]

    - **`designMode`属性:** `document.designMode`属性同样可以开启文档的编辑模式。当其值被设为`on`时,整个文档将变得可编辑。 #### 实际操作步骤: 1. 打开任意一个支持JavaScript执行的浏览器(如Chrome或Fire...

    HTML5&CSS3网页制作:语法简介.pptx

    `designMode`可以将整个页面设为可编辑模式;`hidden`属性可以隐藏元素;`spellcheck`控制拼写和语法检查;`tabindex`用于设置元素的Tab键顺序。这些属性提供了更多的交互可能性。 在实际应用中,例如,使用HTML5的...

    HTML样式属性明细.pdf

    HTML5全局属性中,`contenteditable`允许用户直接在浏览器中编辑元素内容,`designMode`则可以开启整个页面的编辑模式。`hidden`属性可以隐藏元素,`spellcheck`控制输入字段的拼写检查,`tabindex`定义元素的键盘...

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

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

    在线编辑器的实现原理(兼容IE和FireFox)

    此外,随着Web技术的发展,现代浏览器已经提供了更丰富的API,如`contenteditable`和`document.execCommand`的替代方案,如`Range`和`Selection`对象,以及`MutationObserver`等,可以帮助构建更加健壮和高性能的...

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

    这一功能主要依赖于`contentEditable`属性和`designMode`属性。 ##### 1. `contentEditable`属性 `contentEditable`是一个HTML元素的属性,用于指示元素及其子元素是否可编辑。当其值设置为`true`或`"true"`时,...

    利用FCKeditor在JSP_JavaEE中实现在线编辑.pdf

    二是设置 iframe 或 frame 中的 document 属性 designMode 为 ON,以实现可编辑。让编辑区域自动产生 HTML 代码,涉及到三个关键技术:使用 document.selection.createRange() 取得选择的文本,使用 execCommand() ...

    Web时代变迁及html5与html4的区别

    `designMode`允许整个文档可编辑;`hidden`用于隐藏元素;`spellcheck`提供了拼写检查功能;`tabindex`用于控制元素的键盘焦点顺序。 在语法层面,HTML5简化了文件类型声明,统一为`<!DOCTYPE HTML>`,并且对字符...

    iframe框架\JS获取iframe元素

    除了简单的元素操作外,还可以利用`designMode`和`contentEditable`属性来重写`iframe`中的内容,使之成为可编辑状态。 ```javascript var iObj = document.getElementById('iId').contentWindow; iObj.document....

Global site tag (gtag.js) - Google Analytics