制作网络在线编辑器-插入HTML标记

我曾经认为Web的在线编辑器只不过是替换输入内容和快速插入HTML代码。但当我做到了，我发现虽然原理是这样的，实现的方法是不是我想的那么死板。因为很少做UI的东西现在知道文档中的execcommand方法可以解决插入HTML标签，这种方法可以在光标位置插入HTML标签，并且要注意的是，如果在有限的范围内插入标签必须首先例如使范围的聚焦：
A.focus（）；
A.document.execCommand ('insertButton',' ','btn');
一个对象是一个IFRAME对象。在execcommand第一个参数是需要插入命令。第二个还不知道。第三个是ID名。这里是一个按钮控件插入id =按钮。如果您想添加其他属性，则只需在以后写它，例如。
a.document.execcommand（'insertbutton '，' '，'btn class= btnclass颜色=红）；

第一个参数的详细列表
2D位置允许拖动移动绝对定位的对象。
绝对的设置元素的位置属性是绝对的（绝对）。
背景色设置或获取当前选定区域的背景颜色。
blockdirltr尚未支持。
blockdirrtl尚未支持。
粗体切换当前选定区域的粗体显示。
BrowseMode尚未支持。
将当前选定区域复制到剪贴板。
createbookmark创建一个书签或书签锚锚的名称来获取当前选定区域或插入点。
CreateLink将对当前选定区域的超链接，或显示一个对话框允许用户指定要插入当前选定区域的超链接的URL。
将当前选定区域复制到剪贴板并删除它。
删除当前选定区域。
DirLTR尚未支持。
DirRTL尚未支持。
EditMode尚未支持。
字体设置或获取当前选定区域的字体。
字体大小设置或获取当前选定区域中的字体大小。
前景色设置或获取前景（文本）的当前选定区域的颜色。
formatblock设置当前块格式化标签。
缩进增加选定文本的缩进。
inlinedirltr尚未支持。
inlinedirrtl尚未支持。
insertbutton涵盖当前选定区域的一个按钮控制。
insertfieldset涵盖当前选定区域用一盒。
InsertHorizontalRule介绍了当前的选定区域与水平线。
insertiframe涵盖当前选定的区域与一个嵌入式框架。
插入图片覆盖当前选定区域的图像。
insertinputbutton涵盖当前选定区域的一个按钮控制。
insertinputcheckbox涵盖当前选定区域的复选框控件。
insertinputfileupload覆盖当前选定区域的一个文件上传控件。
的insertinputhidden插入隐藏控制覆盖当前选定区域。
insertinputimage涵盖当前选定区域的图像控制。
insertinputpassword涵盖当前选定区域用密码控制。
insertinputradio涵盖当前选定区域的一个按钮控制。
insertinputreset覆盖当前选定区域与复位控制。
insertinputsubmit覆盖当前选定区域提交控制。
insertinputtext涵盖当前选定区域用文本控制。
insertmarquee涵盖当前选定区域的空的标题。
insertorderedlist切换当前选定的区域是一个编号列表或定期格式化块。
insertparagraph涵盖当前选定区域的一个换行符。
insertselectdropdown涵盖当前选定的区域有一个下拉框控件。
insertselectlistbox涵盖当前选定区域的列表框控件。
inserttextarea覆盖当前选定区域和多行文本输入控件。
insertunorderedlist切换当前选定的区域是一个项目符号列表或定期格式化块。
斜体切换当前选定区域中的斜体显示。
居中对齐的地方当前选定区域的格式的块。
两端对齐尚未支持。
JustifyLeft aligns the formatted block where the current selected area is located.
justifynone尚未支持。
右对齐对齐格式的块在当前选定的区域位于。
liveresize部队MSHTML编辑器不断更新在缩放或移动过程中的元素的出现，不仅在移动或缩放完成。
multipleselection允许用户选择多个网站可选的元素时，按住Shift或Ctrl键。
打开。
升级减少缩进格式化块在选定的地区位于。
改写开关文本状态的插入和覆盖。
粘贴使用剪贴板内容覆盖当前选定区域。
playimage尚未支持。
打印打开打印对话框，以便用户可以打印当前页。
重做重做。
刷新刷新当前文档。
清除格式删除格式化标签从当前选定区域。
removeparaformat尚未支持。
SaveAs保存当前网页的一个文件。
SelectAll选择整个文档。
sizetocontrol尚未支持。
sizetocontrolheight尚未支持。
sizetocontrolwidth尚未支持。
停止。
stopimage尚未支持。
StrikeThrough尚未支持。
下标尚未被支持。
上标尚未被支持。
unbookmark删除所有书签从当前选定区域。
下划线切换当前选定区域的下划线以显示或不显示。
撤销撤销。
断开从当前选区中删除所有的超链接。
选择清除当前选择区域选择状态。

此外，可以使用以下方法在当前鼠标的位置点插入字符：

功能showselect（）{
无功otext = document.selection.createrange（）；
OText。文本= 111；
}

zdfzadfasfdasdfadsf