执行命令设置可编辑区域

作者:root
32423434

http://xp1024c.net/pw/index.php

执行命令设置可编辑区域

当一个HTML元素的contenteditable属性被设置为true时,"document.execCommand()”方法便可使用。通过该方法,你可以运行相关commands 来操作可编辑区域的内容。其中大多数命令都会影响文档的选择,例如,给文本提供一个样式(加粗,倾斜等)、插入新元素(如增加一个链接)、影响一整行文本(如缩进排版)。当使用contentEditable后,调用execCommand()方法将影响当前处于活动状态的可编辑元素

在标记生成上的不同点

因为各个浏览器在标记生成上的不同,因此跨浏览器使用 contenteditable 一直以来都是痛点,例如一些看起来十分简单的事情,如: 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时,不同主流浏览器对此有不同处理(Firefox 插入<br>、IE/Opera将使用<p>、 Chrome/Safari 将使用 <div>)

幸运的是在现代浏览器中,这些不同都趋于一致了。截止到Firefox 60,火狐开始使用<div>元素来包裹新生成的文本行,以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致

注意: Internet Explorer使用 <p> 元素而不是 <div>.

如果你想使用不同的方式创建新的段落,上面所有浏览器都支持document.execCommand方法,该方法提供的 defaultParagraphSeparator 命令能够让你以不同的方式创建新的段落例如, 使用 <p> 元素:

document.execCommand("defaultParagraphSeparator", false, "p");
Js

Addtionally, Firefox supports non-standard argument, br, for defaultParagraphSeparatorsince Firefox 55. This is really useful if your web application supports the older Firefox behavior with checking whether the browser is Firefox and unfortunately, you don't have much time to fix your web application for newer Firefox, you can take the older Firefox behavior back with inserting this line when you initializes designMode or contenteditable editor:

document.execCommand("defaultParagraphSeparator", false, "br");
Js