javascript execCommand

Posted 2022-12-07 水上由岐

前几天试着不靠任何现成的命令实现一个富文本编辑器，踩了无数坑后选择狗带，最后还是投向了execCommand

execCommand

这个方法不是所有浏览器都支持的
execCommand API 介绍

前提

如果你要对某个节点使用execCommand命令，对这个节点设置contentEditable= true
例如

<p contentEditable=true>test</p>

语法

execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)

参数

String aCommandName
命令名称
Boolean aShowDefaultUI
是否展示用户界面，默认为false。Mozilla没有实现
String aValueArgument
一些命令需要一些额外的参数值（如insertimage需要提供这个image的url）。默认为null

命令列表(第一个参数)

backColor
改变文档的背景颜色。 在styleWithCss模式，它影响的是包含元素的背景。 这个命令要求提供一个颜色值作为第三个参数 (Internet Explorer 使用这个命令设置文本背景色)
bold
对选中文本或者插入元素设置、取消粗体显示. (Internet Explorer 使用STRONG 标签 而不是 B标签。)
contentReadOnly
转化文档进入只读或者可编辑模式. 这个命令要求提供给一个boolean值给第3个参数(ie不支持)。
copy
把当前选中区域复制到系统剪贴板。使用这个命令需要首先在 user.js 接口中进行激活。
createLink
当有选中区域的时候，使用这个命令转化选中区域为一个锚点，需要提供一个URI给第3个参数. 这个URI必须至少包含一个字符，空白字符也可。(Internet Explorer 会创建一个URI为空的a标签)
cut
剪切选中文本到剪切板. 同copy一样需要开启剪切板功能。
decreaseFontSize
给选中文本或者插入元素添加一个small标签。(Internet Explorer不支持)
delete
删除当前选中区域
enableInlineTableEditing
开启或禁用表的行和列的插入删除功能 ( Internet Explorer不支持)
enableObjectResizing
开启或禁用图片或者其他可resize元素的resize功能 ( Internet Explorer不支持)
fontName
改变选中文本或者插入元素的字体。需要给第3个参数提供一个字体值
fontSize
改变选中文本或者插入元素的字体大小。需要给第3个参数提供一个数字
foreColor
改变选中文本或者插入元素的字体颜色。需要给第3个参数提供一个颜色值
formatBlock
向当前选择的区域所在的行添加一个html块标记，如果这行上已经存在了其它块标记，会被添加的标记替换掉（在Firefox中，BLOCKQUOTE标记是一个例外，他会把已有的块元素包含在内）。需要给第三个参数提供一个标记的名字。事实上几乎所有块标记都是可以使用的（如“H1”、“P”、“DL”、“BLOCKQUOTE”）。（Internet Explorer只支持标题标记H1-H6、ADDRESS和PRE标记，且必须用标记分隔符< >将标记括起来，例如应当写成”<H1>“。）
forwardDelete
删除光标前的字符。这个效果和按了Delete键一样。
heading
向选取的文字或者插入点添加一个标题标记。需要标记名作为第3个参数（如”H1”,”H6”）。（不被Internet Explorer支持。）
hiliteColor
改变区或者插入点的背景色。需要传入颜色值作为第3个参数。要使用这个方法，UseCSS必须被打开。（不被Internet Explorer支持。）
increaseFontSize
向选区或者插入点添加一个BIG标记。（不被Internet Explorer支持。）
indent
缩进选区或者插入点所在的行。 在Firefox中，如果选区包含带有不同级别缩进的多行，只有选区中缩进最低的行会被缩进。
insertBrOnReturn
控制按下回车键的行为：是插入一个BR标记还是将当前块拆分为两个。 （不被Internet Explorer支持。）
insertHorizontalRule
在选区或者插入点上插入一个水平线（会删除选区内容）。
insertHTML
在选区或者插入点上插入一段HTML代码段 （会删除选区内容）。需要传入一个有效的HTML代码段作为第3个参数。 （不被Internet Explorer支持。）
insertImage
在选区或者插入点上插入图像（会删除选区内容）。需要传入有效的图像SRC URI字串作为第3个参数。URI必须至少包含一个字符，可以是空格。 （Internet Explorer会在传入URI为null值时建立一个链接。）
insertOrderedList
在选区或者插入点建立一个有序列表。
insertUnorderedList
在选区或者插入点建立一个无序列表。
insertParagraph
在选区或者插入点上产生一个段落（p标记）。 （Internet Explorer会在插入点上插入一个段落的同时删除选区内容。）
insertText
在选区或者插入点上插入一段纯文本 （会删除选区内容）。
italic
为选区或者插入点开关斜体。 （Internet Explorer会使用EM标记，而不是I标记。）
justifyCenter
使选区或者插入点所在块居中。
justifyFull
使选区或者插入点所在块文本两端对齐。
justifyLeft
使选区或者插入点所在块居左。
justifyRight
使选区或者插入点所在块居右。
outdent
去除选取或者插入点所在行的一个缩进。
paste
在选区或者插入点粘贴剪切板中的文字。（会替换当前选区的文本）。需要在user.js中打开剪切板功能。
redo
撤销之前的撤销（undo）操作。
removeFormat
删除当前选取上的所有格式。
selectAll
全选可编辑的所有内容。
strikeThrough
开启或关闭选区或者插入点的删除线。
subscript
开启或关闭选区或者插入点的上标功能。
superscript
开启或关闭选区或者插入点的下标功能。
underline
开启或关闭选区或者插入点的下划线功能。
undo
撤销上一个操作。
unlink
删除选取的超链接文本的超链接标记。
useCSS
开启或关闭使用HTML标记或者CSS来生成标记。 需要传入一个boolean值作为第3个参数。 注意：这个参数逻辑上相反，false表示使用CSS，true表示使用HTML。 （不被Internet Explorer支持。）这个方法已经被废弃，请使用styleWithCSS方法替代。
styleWithCSS
用于替换 useCSS 方法。它的参数符合想象，即true表示用CSS来修饰或者生成标记，false表示用HTML格式标记来实现富文本格式。