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 参数，如下表：

MSDNMDCHTML5 草案 22D-Position  AbsolutePosition  BackColorbackColor BlockDirLTR1  BlockDirRTL1  BoldboldboldBrowseMode1  ClearAuthenticationCache   contentReadOnly Copycopy CreateBookmark  CreateLinkcreateLinkcreateLinkCutcut  decreaseFontSize DeletedeletedeleteDirLTR1  DirRTL1  EditMode1  FontNamefontName FontSizefontSize ForeColorforeColor FormatBlockformatBlockformatBlock enableInlineTableEditing  enableObjectResizing   forwardDelete heading  hiliteColor  increaseFontSize Indentindent InlineDirLTR1  InlineDirRTL1  InsertButton  InsertFieldset  InsertIFrame  InsertInputButton  InsertInputCheckbox  InsertInputFileUpload  InsertInputHidden  InsertInputImage  InsertInputPassword  InsertInputRadio  InsertInputReset  InsertInputSubmit  InsertInputText  InsertMarquee   insertBrOnReturn InsertHorizontalRuleinsertHorizontalRule InsertImageinsertImageinsertImage insertHTMLinsertHTML  insertLineBreak insertOrderedListinsertOrderedListInsertUnorderedListinsertUnorderedListinsertUnorderedListInsertParagraphinsertParagraphinsertParagraphInsertSelectDropdown  InsertSelectListbox  InsertTextArea    insertTextItalicitalicitalicJustifyCenterjustifyCenter JustifyLeftjustifyLeft JustifyRightjustifyRight JustifyFull1  JustifyNone1  LiveResize  MultipleSelection  Open1  OverWrite  Outdentoutdent Pastepaste PlayImage1  Print  Redo1redoredoRemoveFormatremoveFormat Refresh  RemoveParaFormat1  SelectAllselectAllselectAllSaveAs  SizeToControl1  SizeToControlHeight1  SizeToControlWidth1  Stop1  StopImage1  StrikeThrough1strikeThrough Subscript1subscriptsubscriptSuperscript1superscriptsuperscriptUnBookmark  Underlineunderline UndoundoundoUnlinkunlinkunlink useCSS Unselect unselect styleWithCSS 

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

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

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

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

sCommandsIE6IE7IE8FirefoxChromeSafariOpera2D-PositionYYYNNNNabsolutePositionYYYNNNNbackColorYYYYYYYblockDirLTRYYYNNNNblockDirRTLYYYNNNNboldYYYYYYYbrowseModeYYYNNNNclearAuthenticationCacheYYYNNNNcontentReadOnlyNNNYNNYcopyYYYNNNNcreateBookmarkYYYNNNNcreateLinkYYYYYYYcutYYYNNNNdecreaseFontSizeNNNYNNYdeleteYYYYYYYdirLTRYYYNNNNdirRTLYYYNNNNeditModeYYYNNNNfontNameYYYYYYYfontSizeYYYYYYYforeColorYYYYYYYformatBlock1YYYYYYYenableInlineTableEditingNNNYNNNenableObjectResizingNNNYNNNforwardDeleteNNNNYYNheadingNNNYNNNincreaseFontSizeNNNYNNYindentYYYYYYYinlineDirLTRNNNNNNNinlineDirRTLNNNNNNNinsertButtonYYYNNNNinsertFieldsetYYYNNNNinsertIFrameYYYNNNNinsertInputButtonYYYNNNNinsertInputCheckboxYYYNNNNinsertInputFileUploadYYYNNNNinsertInputHiddenYYYNNNNinsertInputImageYYYNNNNinsertInputPasswordYYYNNNNinsertInputRadioYYYNNNNinsertInputResetYYYNNNNinsertInputSubmitYYYNNNNinsertInputTextYYYNNNNinsertMarqueeYYYNNNNinsertBrOnReturnNNNYNNNinsertHorizontalRuleYYYYYYYinsertImageYYYYYYYinsertHTMLNNNYYYYinsertLineBreakNNNNYYNinsertOrderedListYYYYYYYinsertUnorderedListYYYYYYYinsertParagraphYYYYYYYinsertSelectDropdownYYYNNNNinsertSelectListboxYYYNNNNinsertTextAreaYYYNNNNinsertTextNNNNYYNitalicYYYYYYYjustifyCenterYYYYYYYjustifyLeftYYYYYYYjustifyRightYYYYYYYjustifyFullYYYYYYYjustifyNoneYYYNYYNliveResizeYYYNNNNmultipleSelection1YYYNNNNopenYYYNNNNoverWriteYYYNNNNoutdentYYYYYYYpasteYYYNNNNplayImageNNNNNNNprintYYYNYYNredoYYYYNNYremoveFormatYYYYYYYrefreshYYYNNNNremoveParaFormatNNNNNNNselectAllYYYYYYYsaveAsYYYNNNNsizeToControlNNNNNNNsizeToControlHeightNNNNNNNsizeToControlWidthYNYNNNNstopYYYNNNNstopImageNNNNNNNstrikeThroughYYYYYYYsubscriptYYYYYYYsuperscriptYYYYYYYunBookmarkYYYNNNNunderlineYYYYYYYundoYYYYNNYunlinkYYYYYYYuseCSSNNNYNNYhiliteColorNNNYYYYunselectYYYNYYYstyleWithCSSNNNYNNY

【注】：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() 参数描述

commanddesc2D-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）BackSpace8 Tab9Clear12 Enter13Shift_L16 Control_L17Alt_L18 Pause19Caps_Lock20 Escape27Space32 Prior33Next34 End35Home36 Left37Up38 Right39Down40 Select41Print42 Execute43Insert45 Delete46Help47 0 equal braceright481 exclam onesuperior49 2 quotedbl twosuperior503 section threesuperior51 4 dollar525 percent53 6 ampersand547 slash braceleft55 8 parenleft bracketleft569 parenright bracketright57 a A65b B66 c C67d D68 e E EuroSign69f F70 g G71h H72 i I73j J74 k K75l L76 m M mu77n N78 o O79p P80 q Q at81r R82 s S83t T84 u U85v V86 w W87x X88 y Y89z Z90 KP_096KP_197 KP_298KP_399 KP_4100KP_5101 KP_6102KP_7103 KP_8104KP_9105 KP_Multiply106KP_Add107 KP_Separator108KP_Subtract109 KP_Decimal110KP_Divide111 F1112F2113 F3114F4115 F5116F6117 F8119F9120 F10121F11122 F12123F13124 F14125F15126 F16127F17128 F18129F19130 F20131F21132 F22133F23134 F24135Num_Lock136 Scroll_Lock137Acute grave187 Comma semicolon188Minus underscore189 Period colon190Numbersign apostrophe192 Plusminus hyphen macron210Copyright registered212 Guillemotleft guillemotright213Masculine ordfeminine214 ae AE215Cent yen216 Questiondown exclamdown217Onequarter onehalf threequarters218 Less greater bar219Plus asterisk asciitilde221 Multiply division227acircumflex Acircumflex228 ecircumflex Ecircumflex229icircumflex Icircumflex230 ocircumflex Ocircumflex231ucircumflex Ucircumflex232 ntilde Ntilde233yacute Yacute234 oslash Ooblique235aring Aring236 ccedilla Ccedilla237thorn THORN238 eth ETH239diaeresis cedilla currency240 agrave Agrave atilde Atilde241egrave Egrave242 igrave Igrave243ograve Ograve otilde Otilde244 ugrave Ugrave245adiaeresis Adiaeresis246 ediaeresis Ediaeresis247idiaeresis Idiaeresis248 odiaeresis Odiaeresis249udiaeresis Udiaeresis250 ssharp question backslash251asciicircum degree252 3 sterling253Mode_switch254   A0X65 B0X66C0X67 D0X68E0X69 F0X70J0X71 H0X72I0X73 J0X74K0X75 L0X76M0X77 N0X78O0X79 P0X80Q0X81 R0X82S0X83 T0X84U0X85 V0X86W0X87 X0X88Y0X89 Z0X9000X48 10X4920X50 30X5140X52 50X5360X54 70X5580X56 90X57ESC0X1B CTRL0X11SHIFT0X10 ENTER0XD

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

参考文献

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

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