BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异

标准参考

无。

问题描述

execCommand 方法通常用于控制可编辑的 IFRAME 内容，制作富文本编辑器。 但他现在为止还是非标准的，方法的首参数 Commmands 的可选值由各个浏览器厂商制定，支持程度并不统一。

造成的影响

使用仅有某个浏览器支持的 Commmands 参数会造成其他浏览器运行时脚本出错，从而影响其他浏览器内正常脚本继续执行。

受影响的浏览器

所有浏览器

问题分析

document.execCommand 方法提供了对浏览器内置命令调用的接口，他暂时不属于任何现行规范定义范围，由浏览器各自实现。

在现有 HTML5 规范草案中，已经加入对 execCommand 方法的描述，他被安置在 HTMLDocument 接口定义中。该方法执行参数：document.execCommand(commandId [, showUI [, value ] ] )

通常 document.execCommand 方法可以使脚本程序执行在当前选择或在当前插入符位置进行一系列操作。一般来说，这些命令主要都是是用来实现富文本编辑器的核心功能。

execCommand 方法的参数 commandId 可选值以及作用，在 HTML5 规范草案中有部分描述，并定义了核心的可选参数列表，以及最后说明的自定义其他参数 vendorID-customCommandID 可由厂商自行扩展。详细内容可以参考 ：7.11 Editing APIs

另外在各浏览器对应的开发者站点 msdn.microsoft.com (MSDN)、developer.mozilla.org (Mozilla Developer Network)、developer.apple.com (Apple Developer)、dev.opera.com (Opera Developer Community) 中，MSDN 与 Mozilla Developer Network 均有详细的 execCommand 方法的首参数可选值描述，Opera Developer Community 有简要说明， Apple Developer 无任何可查资料。

其中详细内容可参考开发者站点：

MSDN：execCommand Method、Command Identifiers。

MDC：Rich-Text Editing in Mozilla。

dev.opera.com ：Rich HTML editing in the browser: part 1、Rich HTML editing in the browser: part 2。

这里需要注意，由于 HTML5 规范草案与各浏览器具体开发文档中对，execCommand 方法的首形参数的形参名称规定不相同，为了避免混淆，本文以后均采用 sCommands 来表示。

MSDN MDC HTML5 草案中提出的全部 sCommands 参数，如下表：

MSDN	MDC	HTML5 草案 2
2D-Position
AbsolutePosition
BackColor	backColor
BlockDirLTR1
BlockDirRTL1
Bold	bold	bold
BrowseMode1
ClearAuthenticationCache
	contentReadOnly
Copy	copy
CreateBookmark
CreateLink	createLink	createLink
Cut	cut
	decreaseFontSize
Delete	delete	delete
DirLTR1
DirRTL1
EditMode1
FontName	fontName
FontSize	fontSize
ForeColor	foreColor
FormatBlock	formatBlock	formatBlock
	enableInlineTableEditing
	enableObjectResizing
		forwardDelete
	heading
	hiliteColor
	increaseFontSize
Indent	indent
InlineDirLTR1
InlineDirRTL1
InsertButton
InsertFieldset
InsertIFrame
InsertInputButton
InsertInputCheckbox
InsertInputFileUpload
InsertInputHidden
InsertInputImage
InsertInputPassword
InsertInputRadio
InsertInputReset
InsertInputSubmit
InsertInputText
InsertMarquee
	insertBrOnReturn
InsertHorizontalRule	insertHorizontalRule
InsertImage	insertImage	insertImage
	insertHTML	insertHTML
		insertLineBreak
	insertOrderedList	insertOrderedList
InsertUnorderedList	insertUnorderedList	insertUnorderedList
InsertParagraph	insertParagraph	insertParagraph
InsertSelectDropdown
InsertSelectListbox
InsertTextArea
		insertText
Italic	italic	italic
JustifyCenter	justifyCenter
JustifyLeft	justifyLeft
JustifyRight	justifyRight
JustifyFull1
JustifyNone1
LiveResize
MultipleSelection
Open1
OverWrite
Outdent	outdent
Paste	paste
PlayImage1
Print
Redo1	redo	redo
RemoveFormat	removeFormat
Refresh
RemoveParaFormat1
SelectAll	selectAll	selectAll
SaveAs
SizeToControl1
SizeToControlHeight1
SizeToControlWidth1
Stop1
StopImage1
StrikeThrough1	strikeThrough
Subscript1	subscript	subscript
Superscript1	superscript	superscript
UnBookmark
Underline	underline
Undo	undo	undo
Unlink	unlink	unlink
	useCSS
Unselect		unselect
	styleWithCSS

【注1】：MSDN 中标注为不支持的 sCommands 参数。

【注2】：仅为文章写作时期 HTML5 草案中存在的 sCommands 参数，不含说明中由厂商具体指定部分。

将所有 sCommands 参数汇集起来，构建测试用例，检查他们被支持程度。由于本例代码较多，故不在文中贴出，您可以直接观看下方的 测试页面。

根据测试页，得出实际 sCommands 可选参数支持度对照表：

sCommands	IE6	IE7	IE8	Firefox	Chrome	Safari	Opera
2D-Position	Y	Y	Y	N	N	N	N
absolutePosition	Y	Y	Y	N	N	N	N
backColor	Y	Y	Y	Y	Y	Y	Y
blockDirLTR	Y	Y	Y	N	N	N	N
blockDirRTL	Y	Y	Y	N	N	N	N
bold	Y	Y	Y	Y	Y	Y	Y
browseMode	Y	Y	Y	N	N	N	N
clearAuthenticationCache	Y	Y	Y	N	N	N	N
contentReadOnly	N	N	N	Y	N	N	Y
copy	Y	Y	Y	N	N	N	N
createBookmark	Y	Y	Y	N	N	N	N
createLink	Y	Y	Y	Y	Y	Y	Y
cut	Y	Y	Y	N	N	N	N
decreaseFontSize	N	N	N	Y	N	N	Y
delete	Y	Y	Y	Y	Y	Y	Y
dirLTR	Y	Y	Y	N	N	N	N
dirRTL	Y	Y	Y	N	N	N	N
editMode	Y	Y	Y	N	N	N	N
fontName	Y	Y	Y	Y	Y	Y	Y
fontSize	Y	Y	Y	Y	Y	Y	Y
foreColor	Y	Y	Y	Y	Y	Y	Y
formatBlock1	Y	Y	Y	Y	Y	Y	Y
enableInlineTableEditing	N	N	N	Y	N	N	N
enableObjectResizing	N	N	N	Y	N	N	N
forwardDelete	N	N	N	N	Y	Y	N
heading	N	N	N	Y	N	N	N
increaseFontSize	N	N	N	Y	N	N	Y
indent	Y	Y	Y	Y	Y	Y	Y
inlineDirLTR	N	N	N	N	N	N	N
inlineDirRTL	N	N	N	N	N	N	N
insertButton	Y	Y	Y	N	N	N	N
insertFieldset	Y	Y	Y	N	N	N	N
insertIFrame	Y	Y	Y	N	N	N	N
insertInputButton	Y	Y	Y	N	N	N	N
insertInputCheckbox	Y	Y	Y	N	N	N	N
insertInputFileUpload	Y	Y	Y	N	N	N	N
insertInputHidden	Y	Y	Y	N	N	N	N
insertInputImage	Y	Y	Y	N	N	N	N
insertInputPassword	Y	Y	Y	N	N	N	N
insertInputRadio	Y	Y	Y	N	N	N	N
insertInputReset	Y	Y	Y	N	N	N	N
insertInputSubmit	Y	Y	Y	N	N	N	N
insertInputText	Y	Y	Y	N	N	N	N
insertMarquee	Y	Y	Y	N	N	N	N
insertBrOnReturn	N	N	N	Y	N	N	N
insertHorizontalRule	Y	Y	Y	Y	Y	Y	Y
insertImage	Y	Y	Y	Y	Y	Y	Y
insertHTML	N	N	N	Y	Y	Y	Y
insertLineBreak	N	N	N	N	Y	Y	N
insertOrderedList	Y	Y	Y	Y	Y	Y	Y
insertUnorderedList	Y	Y	Y	Y	Y	Y	Y
insertParagraph	Y	Y	Y	Y	Y	Y	Y
insertSelectDropdown	Y	Y	Y	N	N	N	N
insertSelectListbox	Y	Y	Y	N	N	N	N
insertTextArea	Y	Y	Y	N	N	N	N
insertText	N	N	N	N	Y	Y	N
italic	Y	Y	Y	Y	Y	Y	Y
justifyCenter	Y	Y	Y	Y	Y	Y	Y
justifyLeft	Y	Y	Y	Y	Y	Y	Y
justifyRight	Y	Y	Y	Y	Y	Y	Y
justifyFull	Y	Y	Y	Y	Y	Y	Y
justifyNone	Y	Y	Y	N	Y	Y	N
liveResize	Y	Y	Y	N	N	N	N
multipleSelection1	Y	Y	Y	N	N	N	N
open	Y	Y	Y	N	N	N	N
overWrite	Y	Y	Y	N	N	N	N
outdent	Y	Y	Y	Y	Y	Y	Y
paste	Y	Y	Y	N	N	N	N
playImage	N	N	N	N	N	N	N
print	Y	Y	Y	N	Y	Y	N
redo	Y	Y	Y	Y	N	N	Y
removeFormat	Y	Y	Y	Y	Y	Y	Y
refresh	Y	Y	Y	N	N	N	N
removeParaFormat	N	N	N	N	N	N	N
selectAll	Y	Y	Y	Y	Y	Y	Y
saveAs	Y	Y	Y	N	N	N	N
sizeToControl	N	N	N	N	N	N	N
sizeToControlHeight	N	N	N	N	N	N	N
sizeToControlWidth	Y	N	Y	N	N	N	N
stop	Y	Y	Y	N	N	N	N
stopImage	N	N	N	N	N	N	N
strikeThrough	Y	Y	Y	Y	Y	Y	Y
subscript	Y	Y	Y	Y	Y	Y	Y
superscript	Y	Y	Y	Y	Y	Y	Y
unBookmark	Y	Y	Y	N	N	N	N
underline	Y	Y	Y	Y	Y	Y	Y
undo	Y	Y	Y	Y	N	N	Y
unlink	Y	Y	Y	Y	Y	Y	Y
useCSS	N	N	N	Y	N	N	Y
hiliteColor	N	N	N	Y	Y	Y	Y
unselect	Y	Y	Y	N	Y	Y	Y
styleWithCSS	N	N	N	Y	N	N	Y

【注】：formatBlock 指令可接收的 vValue 值不同，IE 中需要 vValue 值为目标块标记名，而其他浏览器可以接收空字符串。
multipleSelection 指令在 Windows XP sp3 中可构建出多选列表，Windows 7 中指令只会返回 TRUE，对代码结构不会有任何改变。

解决方案

在调用 execCommand 方法时建议仅从以下参数中选择其一作为首参数传入，他们均被所有浏览器支持：

backColor	设置或获取当前选中区的背景颜色。
bold	切换当前选中区的粗体显示与否。
createLink	在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的URL。
delete	删除当前选中区。
fontSize	设置或获取当前选中区的字体大小。
foreColor	设置或获取当前选中区的前景(文本)颜色。
formatBlock	设置当前块格式化标签。
indent	增加选中文本的缩进。
insertHorizontalRule	用水平线覆盖当前选中区。
insertImage	用图像覆盖当前选中区。
insertOrderedList	切换当前选中区是编号列表还是常规格式化块。
insertUnorderedList	切换当前选中区是项目符号列表还是常规格式化块。
insertParagraph	用换行覆盖当前选中区。
italic	切换当前选中区斜体显示与否。
justifyCenter	将当前选中区在所在格式化块置中。
justifyLeft	将当前选中区所在格式化块左对齐。
justifyRight	将当前选中区所在格式化块右对齐。
justifyFull	目前尚未支持。
outdent	减少选中区所在格式化块的缩进。
removeFormat	从当前选中区中删除格式化标签。
selectAll	选中整个文档。
strikeThrough	目前尚未支持。
subscript	目前尚未支持。
superscript	目前尚未支持。
underline	切换当前选中区的下划线显示与否。
unlink	从当前选中区中删除全部超级链接。

附1：

execCommand() 参数描述

command	desc
2D-Position	允许通过拖曳移动绝对定位的对象。
AbsolutePosition	设定元素的position属性为“absolute”(绝对)。
BackColor	设置或获取当前选中区的背景颜色。
BlockDirLTR	目前尚未支持。
BlockDirRTL	目前尚未支持。
Bold	切换当前选中区的粗体显示与否。
BrowseMode	目前尚未支持。
Copy	将当前选中区复制到剪贴板。
CreateBookmark	创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink	在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的URL。
Cut	将当前选中区复制到剪贴板并删除之。
Delete	删除当前选中区。
DirLTR	目前尚未支持。
DirRTL	目前尚未支持。
EditMode	目前尚未支持。
FontName	设置或获取当前选中区的字体。
FontSize	设置或获取当前选中区的字体大小。
ForeColor	设置或获取当前选中区的前景(文本)颜色。
FormatBlock	设置当前块格式化标签。
Indent	增加选中文本的缩进。
InlineDirLTR	目前尚未支持。
InlineDirRTL	目前尚未支持。
InsertButton	用按钮控件覆盖当前选中区。
InsertFieldset	用方框覆盖当前选中区。
InsertHorizontalRule	用水平线覆盖当前选中区。
InsertIFrame	用内嵌框架覆盖当前选中区。
InsertImage	用图像覆盖当前选中区。
InsertInputButton	用按钮控件覆盖当前选中区。
InsertInputCheckbox	用复选框控件覆盖当前选中区。
InsertInputFileUpload	用文件上载控件覆盖当前选中区。
InsertInputHidden	插入隐藏控件覆盖当前选中区。
InsertInputImage	用图像控件覆盖当前选中区。
InsertInputPassword	用密码控件覆盖当前选中区。
InsertInputRadio	用单选钮控件覆盖当前选中区。
InsertInputReset	用重置控件覆盖当前选中区。
InsertInputSubmit	用提交控件覆盖当前选中区。
InsertInputText	用文本控件覆盖当前选中区。
InsertMarquee	用空字幕覆盖当前选中区。
InsertOrderedList	切换当前选中区是编号列表还是常规格式化块。
InsertParagraph	用换行覆盖当前选中区。
InsertSelectDropdown	用下拉框控件覆盖当前选中区。
InsertSelectListbox	用列表框控件覆盖当前选中区。
InsertTextArea	用多行文本输入控件覆盖当前选中区。
InsertUnorderedList	切换当前选中区是项目符号列表还是常规格式化块。
Italic	切换当前选中区斜体显示与否。
JustifyCenter	将当前选中区在所在格式化块置中。
JustifyFull	目前尚未支持。
JustifyLeft	将当前选中区所在格式化块左对齐。
JustifyNone	目前尚未支持。
JustifyRight	将当前选中区所在格式化块右对齐。
LiveResize	迫使MSHTML编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection	允许当用户按住Shift或Ctrl键时一次选中多于一个站点可选元素。
Open	目前尚未支持。
Outdent	减少选中区所在格式化块的缩进。
OverWrite	切换文本状态的插入和覆盖。
Paste	用剪贴板内容覆盖当前选中区。
PlayImage	目前尚未支持。
Print	打开打印对话框以便用户可以打印当前页。
Redo	目前尚未支持。
Refresh	刷新当前文档。
RemoveFormat	从当前选中区中删除格式化标签。
RemoveParaFormat	目前尚未支持。
SaveAs	将当前Web页面保存为文件。
SelectAll	选中整个文档。
SizeToControl	目前尚未支持。
SizeToControlHeight	目前尚未支持。
SizeToControlWidth	目前尚未支持。
Stop	目前尚未支持。
StopImage	目前尚未支持。
StrikeThrough	目前尚未支持。
Subscript	目前尚未支持。
Superscript	目前尚未支持。
UnBookmark	从当前选中区中删除全部书签。
Underline	切换当前选中区的下划线显示与否。
Undo	目前尚未支持。
Unlink	从当前选中区中删除全部超级链接。
Unselect	清除当前选中区的选中状态。

附2：

键值对应表

键盘名称	键值（keycode）		键盘名称	键值（keycode）
BackSpace	8		Tab	9
Clear	12		Enter	13
Shift_L	16		Control_L	17
Alt_L	18		Pause	19
Caps_Lock	20		Escape	27
Space	32		Prior	33
Next	34		End	35
Home	36		Left	37
Up	38		Right	39
Down	40		Select	41
Print	42		Execute	43
Insert	45		Delete	46
Help	47		0 equal braceright	48
1 exclam onesuperior	49		2 quotedbl twosuperior	50
3 section threesuperior	51		4 dollar	52
5 percent	53		6 ampersand	54
7 slash braceleft	55		8 parenleft bracketleft	56
9 parenright bracketright	57		a A	65
b B	66		c C	67
d D	68		e E EuroSign	69
f F	70		g G	71
h H	72		i I	73
j J	74		k K	75
l L	76		m M mu	77
n N	78		o O	79
p P	80		q Q at	81
r R	82		s S	83
t T	84		u U	85
v V	86		w W	87
x X	88		y Y	89
z Z	90		KP_0	96
KP_1	97		KP_2	98
KP_3	99		KP_4	100
KP_5	101		KP_6	102
KP_7	103		KP_8	104
KP_9	105		KP_Multiply	106
KP_Add	107		KP_Separator	108
KP_Subtract	109		KP_Decimal	110
KP_Divide	111		F1	112
F2	113		F3	114
F4	115		F5	116
F6	117		F8	119
F9	120		F10	121
F11	122		F12	123
F13	124		F14	125
F15	126		F16	127
F17	128		F18	129
F19	130		F20	131
F21	132		F22	133
F23	134		F24	135
Num_Lock	136		Scroll_Lock	137
Acute grave	187		Comma semicolon	188
Minus underscore	189		Period colon	190
Numbersign apostrophe	192		Plusminus hyphen macron	210
Copyright registered	212		Guillemotleft guillemotright	213
Masculine ordfeminine	214		ae AE	215
Cent yen	216		Questiondown exclamdown	217
Onequarter onehalf threequarters	218		Less greater bar	219
Plus asterisk asciitilde	221		Multiply division	227
acircumflex Acircumflex	228		ecircumflex Ecircumflex	229
icircumflex Icircumflex	230		ocircumflex Ocircumflex	231
ucircumflex Ucircumflex	232		ntilde Ntilde	233
yacute Yacute	234		oslash Ooblique	235
aring Aring	236		ccedilla Ccedilla	237
thorn THORN	238		eth ETH	239
diaeresis cedilla currency	240		agrave Agrave atilde Atilde	241
egrave Egrave	242		igrave Igrave	243
ograve Ograve otilde Otilde	244		ugrave Ugrave	245
adiaeresis Adiaeresis	246		ediaeresis Ediaeresis	247
idiaeresis Idiaeresis	248		odiaeresis Odiaeresis	249
udiaeresis Udiaeresis	250		ssharp question backslash	251
asciicircum degree	252		3 sterling	253
Mode_switch	254
A	0X65		B	0X66
C	0X67		D	0X68
E	0X69		F	0X70
J	0X71		H	0X72
I	0X73		J	0X74
K	0X75		L	0X76
M	0X77		N	0X78
O	0X79		P	0X80
Q	0X81		R	0X82
S	0X83		T	0X84
U	0X85		V	0X86
W	0X87		X	0X88
Y	0X89		Z	0X90
0	0X48		1	0X49
2	0X50		3	0X51
4	0X52		5	0X53
6	0X54		7	0X55
8	0X56		9	0X57
ESC	0X1B		CTRL	0X11
SHIFT	0X10		ENTER	0XD

---------------------------------------------

参考文献

1. BX9054: 各浏览器对 document.execCommand 方法的首参数可选值范围存在差异

2. 当前浏览器针对execCommand方法参数的兼容性测试