HTML编辑器的制作方法

HTML编辑器让用户可以像word一般操作文档，所见即所得，网上已经有很多了，而且别人专门做的，功能比较好比较全还有不断的维护更新，还有相应的开发文档，
如 KindEditor [ http://www.kindsoft.net/ ] 等；

了解HTML编辑器的制作原理有助于开发和使用，所以下面看看制作一个简易的HTML编辑器的过程；

1，需要有一个可编辑同时又可显效果的编辑框。textarea还不能满足要求，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，其功能就像记事本。这里用到iframe来实现，修改iframe的designMode属性为 on 使其可以被编辑。

<iframe id="myEditer" name="myEditer" width="100%" height="200px"></iframe>
<script>myEditer.document.designMode = 'on';</script>

这样即可在这个iframe区域里写和编辑内容了；注意这里直接通过name属性值访问该iframe对象，通过getElementById(xID)得到的对象反而不起作用，如: document.getElementById("myEditer").document.designMode='on';  //不起作用

2，在内容编辑器框选中相应内容进行样式编辑。在文字编辑器中编辑一段内容样式时，一般是先输入内容，接着是选中即将编辑的内容，最后编辑样式，如加粗，修改颜色等。编辑器这里的原理一样，内容输入，选中编辑的内容，对选中内容应用样式，这里关键有几个地方：
（1）如何兼容各浏览器获取选中的内容，看浏览器是否支持 window.getSelection[取文本window.getSelection()]，document.getSelection[取文本document.getSelection()]，document.selection[取文本document.selection.createRange().text]，有时结合用selectionStart，selectionEnd属性和substr函数对值处理得到文本[参考: http://blog.csdn.net/coderq/article/details/7265370]

（2）如果应用样式，其实就是对选择的内容添加合适的HTML元素使其变成需要的效果，实现方法有多种，可用使用replace等方法处理，还有通过selection.createRange()返回的是一个文本对象，设为objSeleTXT，该对象有execCommand()方法，执行对应的方法即可完成相应的样式编辑，如加粗: objSeleTXT.execCommand("Bold");此外还有如
字体--宋体、黑体、楷体等, execCommand("fontname","",字体);字号--字号大小,execCommand("fontsize","",字号);加重, execCommand("Bold");斜体,execCommand("Italic");下划线, execCommand("Underline");删除线, execCommand("StrikeThrough"); 居左, execCommand("JustifyLeft");  居右, execCommand("JustifyRight");居中, execCommand("JustifyCenter");剪切, execCommand("Cut"); 拷贝, execCommand("Copy");粘贴, execCommand("Paste");取消操作--IE5.0以后可以无限取消, execCommand("Undo"); 重复操作, execCommand("Redo"); 等

（3）光标位置的获取等

例如：

<iframe id="myEditer" width="100%" height="200px"></iframe><input type="button" value="加粗" onclick="Bold();"><script type="text/javascript" language="javascript">myEditer.document.designMode = 'on';function Bold(){var objSel = myEditer.document.selection.createRange();//alert(objSel.text);objSel.execCommand("Bold");}</script>

到此一个建议的HTML编辑器已经完成了。