在线html编辑器的实现原理分析
如今，网站开发越来越推动用户体验，越来越多的工具为用户提供方便。在线HTML内容编辑器应该是其中之一，简单的功能可以为用户提供文本样式控制，如文本颜色、字体大小等，而复杂的功能甚至可以提供与Word类似的强大功能。当今，互联网上的编辑大都有着强大的功能。相对来说，他们也需要大量的配置使用，当然，代码会变得臃肿。如果我们不需要一个强大的编辑器，你可以实现一个自己，因为代码并不复杂。以下是一点个人的体验仅供参考（以HtmlEditor ExtJS作为例）。
1。初始化时加载页面，添加一个iframe（可选）的页面，这里要注意的是页面的状态进行判断，当页面完全加载，操作将被执行以防止错误，无法找到一些元素。
2。打开编辑功能。设置iframe是可编辑的（下面的代码从ExtJS的HtmlEditor）：
复制代码代码如下所示：
iframe / /窗口得到
建文：函数（）{
返回ext.isie this.iframe.contentwindow：窗口框架{这个iframe的名字}；
}，
iframe / /文件获取
GetDoc：函数（）{
返回ext.isie this.getwin（文件）：（这个iframe。contentdocument）| | this.getwin（文件）；
}，
打开文档对象以编写初始化，与Firefox兼容
doc = this.getdoc（）；
Doc.open（）；
doc.write（<—！
体{边界：0；保证金：0；padding: 3px；身高：98%；光标：文本；}
>>）；
打开文档对象编辑模式
doc.designmode = ；
Doc.close（）；
这允许您将内容写入简单编辑器。
3，获取编辑器的内容，代码如下所示：
复制代码代码如下所示：
获取主体对象编辑器
VaR的身体= doc.body doc.documentelement | |；
获取/编辑内容。
无功量= body.innerhtml；
用于处理，如替换某些特殊字符等。
一些代码
返回内容
返回内容；
4。添加样式设置。编辑以上已经实现了基本的功能，但它有点太简单的添加一些简单的方式实现。文档execcommand方法使这个想法成为可能。
复制代码代码如下所示：
命令/统一方法
功能execcmd（CMD，值）{
对以上代码的访问
/ /电话execcommand方法执行命令
doc.execcommand（CMD，虚假，undefined值空值）；
}；
选定的字体为粗体/ ctrl-b.
execcmd（'bold）；
下划线 / / ctrl-u.
execcmd（'underline）；
/ /斜体，Ctrl-I
execcmd（'italic）；
设置文本颜色
execcmd（'forecolor '，Ext.isSafari | | ext.isie# +颜色：颜色）；
在光标下插入内容
功能insertatcursor（文本）{
对以上代码的访问对象
如果（ext.isie）{
Win.focus（）；
VAR r = doc.selection.createrange（）；
如果（r）{
r.collapse（真的）；
R.pasteHTML（文本）；}
} else if（ext.isgecko | | ext.isopera）{
Win.focus（）；
execcmd（'inserthtml，文本）；
} else if（ext.issafari）{
execcmd（'inserttext，文本）；
}
}
5。而且，现在我们可以改变风格了。如果编辑工具栏（这是必要的），我们也希望工具栏上的按钮被高亮显示或显示自动根据光标的位置，querycommandstate（）方法的文档使这个想法成真。
复制代码代码如下所示：
对与此相反的对象访问
光标是粗体的/
VaR是勇敢= doc.querycommandstate（'bold）；
如果（大胆）{
粗体按钮来更改样式
}
当然，上面的代码可以合并，只有一个。
下划线
doc.querycommandstate（'underline）；
斜体
doc.querycommandstate（'italic）；
本文仅对编辑器的实现一个简单的想法了，其中一些可以直接使用。建议朋友们想实现编辑可以参考下ExtJS的HtmlEditor代码，既简单明了，并且可以扩展它。
最后，我想提醒您，我们必须注意浏览器兼容性，不要等到测试结束时测试兼容性。对于如此大量的Javaｓｃｒｉｐｔ代码，调整是相当痛苦的。