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="加粗" οnclick="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编辑器已经完成了。