以前认为WEB的在线编辑器无非就是对输入内容的替换以及快捷的插入HTML代码,但是做的时候却发现虽然原理是那样,但是实现方法并非我想的那么死板。由于很少做UI上的东西所以到现在才知道在document中有execCommand方法可以解决插入HTML标签的问题,这个方法可以在光标所在位置插入需要的HTML标签,并且要注意的是,如果在一个限制的范围内插入标签需要先让该范围获得焦点,例如:
a.focus();
a.document.execCommand('insertButton','','btn');
这里的a对象是一个iframe对象。execcommand中的第一个参数是需要插入的控件的命令,第2个目前还不知道,第3个是ID名,这里将插入一个ID=btn的BUTTON控件,如果想加入其他属性只需要接着后面写就行了,例如
a.document.execCommand('insertButton','','btnclass=btnclasscolor=red');
第一个参数的详细列表
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清除当前选中区的选中状态。
另外,在当前鼠标所点的位置插入字符可用以下方法:
<script>
functionshowselect(){
varoText=document.selection.createRange();
oText.text=111;
}
</script>
<bodyonmouseup="showselect()">
<spanid=span1>zdfzadfasfdasdfadsf</span>