当文档对象被转换为设计模式的时候(选中,设置contentEditable等),文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作
(如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable,通过执行execCommand
方法可以对当前活动元素进行很多操作。
语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回值
一个 Boolean
,如果是 false
则表示操作不被支持或未被启用。
参数
aCommandName
- 一个
DOMString
,命令的名称。可用命令列表请参阅 命令 。 aShowDefaultUI
- 一个
Boolean
是否展示用户界面,一般为 false。Mozilla 没有实现。 aValueArgument
- 一些命令需要一些额外的参数值(如insertimage需要提供这个image的url)。默认为null。
命令
backColor
- 修改文档的背景颜色。在styleWithCss模式下,则只影响容器元素的背景颜色。这需要一个
<color>
类型的字符串值作为参数传入。注意,IE浏览器用这个设置文字的背景颜色。 bold
- 开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用
<strong>
标签,而不是<b>
标签。 contentReadOnly
- 通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)
copy
- 拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。
createLink
将选中内容创建为一个锚链接。这个命令需要一个HREF URI字符串作为参数值传入。URI必须包含至少一个字符,例如一个空格。(浏览器会创建一个空链接)
cut
- 剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。
decreaseFontSize
- 给选中文字加上
<small>
标签,或在选中点插入该标签。(IE浏览器不支持) delete
- 删除选中部分.
enableInlineTableEditing
- 启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)
enableObjectResizing
- 启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)
fontName
- 在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如:"Arial")作为参数。
fontSize
- 在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。
foreColor
- 在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。
formatBlock
- 添加一个HTML块式标签在包含当前选择的行, 如果已经存在了,更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)
forwardDelete
- 删除光标所在位置的字符。 和按下删除键一样。
heading
- 添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)
hiliteColor
- 更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE浏览器不支持)
increaseFontSize
- 在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)
indent
- 缩进选择或插入点所在的行, 在 Firefox 中, 如果选择多行,但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。
insertBrOnReturn
- 控制当按下Enter键时,是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)
insertHorizontalRule
- 在插入点插入一个水平线(删除选中的部分)
insertHTML
- 在插入点插入一个HTML字符串(删除选中的部分)。需要一个个HTML字符串作为参数。(IE浏览器不支持)
insertImage
- 在插入点插入一张图片(删除选中的部分)。需要一个image SRC URI作为参数。这个URI至少包含一个字符。空白字符也可以(IE会创建一个链接其值为null)
insertOrderedList
- 在插入点或者选中文字上创建一个有序列表
insertUnorderedList
- 在插入点或者选中文字上创建一个无序列表。
insertParagraph
- 在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)
insertText
- 在光标插入位置插入文本内容或者覆盖所选的文本内容。
italic
- 在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签,而不是 I )
justifyCenter
- 对光标插入位置或者所选内容进行文字居中。
justifyFull
- 对光标插入位置或者所选内容进行文本对齐。
justifyLeft
- 对光标插入位置或者所选内容进行左对齐。
justifyRight
- 对光标插入位置或者所选内容进行右对齐。
outdent
- 对光标插入行或者所选行内容减少缩进量。
paste
- 在光标位置粘贴剪贴板的内容,如果有被选中的内容,会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].
redo
- 重做被撤销的操作。
removeFormat
- 对所选内容去除所有格式
selectAll
- 选中编辑区里的全部内容。
strikeThrough
- 在光标插入点开启或关闭删除线。
subscript
- 在光标插入点开启或关闭下角标。
superscript
- 在光标插入点开启或关闭上角标。
underline
- 在光标插入点开启或关闭下划线。
undo
- 撤销最近执行的命令。
unlink
- 去除所选的锚链接的<a>标签
useCSS
- 切换使用 HTML tags 还是 CSS 来生成标记. 要求一个布尔值 true/false 作为参数。注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)
该属性已经废弃,使用 styleWithCSS 代替。 styleWithCSS
- 用这个取代 useCSS 命令。 参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。
例子
An example of how to use it on CodePen.
规范
Specification | Status | Comment |
---|---|---|
HTML Editing APIs execCommand |
Editor's Draft | Initial definition |
浏览器兼容性
特征 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes)[1] | ? | ? | (Yes) |
insertBrOnReturn |
未实现 | (Yes) | 未实现 | 未实现 | 未实现 |
copy /cut |
42 | 41 (41) | 9 | 29 | 未实现 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes)[1] | (Yes) | ? | ? | ? |
insertBrOnReturn |
未实现 | 未实现 | (Yes) | 未实现 | 未实现 | 未实现 |
copy /cut |
未实现 | 42 | 41.0 (41) | ? | ? | 未实现 |
[1] 在 Firefox 41 之前,剪贴板功能需要在 user.js 配置文件中启用。参阅 Mozilla 配置概述。命令若未被支持或启用,execCommand
会抛出异常,而不是返回 false
。自 Firefox 41 开始,只要是在能够创建窗口的事件回调函数里(半可信脚本里),剪贴板功能都是默认开启的。
参阅
HTMLElement.contentEditable
document.designMode
- Rich-Text Editing in Mozilla
- Scribe's "Browser Inconsistencies" documentation with bugs related to
document.execCommand
.?