【原创】【1】richeditor系列教程。前期准备，兼容

【1】前期准备，兼容

　　索引目录：http://www.cnblogs.com/henryli/p/3439642.html

　　rich editor的原理无非是启用iframe的编辑模式或者div的cOntenteditable=true。然后使用document.execcommand来编辑选取文本。但会使用到selection操作和range。

查看api： msdn地址，mozilla富文本编辑指引。w3school range。

　　使用iframe作为编辑器的优势：独立的编辑document、不会与页面其他选择冲突，独立的redo undo操作。缺点，如果页面设置了document.domain，而编辑模式中的js无法执行，会造成权限错误，有加载失败的可能。

　　使用div作为编辑器，轻量、加载不会失败、效率提升。但不适用于重量级、多功能文本处理，同时selection、range、undo的与页面元素共有。

　　ie使用了跟w3c不一样的api，返回的结果类似，不兼容。

　　创建range对象：

1 var selection = ifrDoc.createRange ? ifrDoc.createRange() : ifrWin.getSelection();
2 var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0)

　　编辑器的基本原理不做叙述，这方面的博文很多，google一下即可

　　同样，不同的浏览器对于回车按键的处理也不一致，ie浏览器会产生一个成对儿的

　　如何解决这个问题？将所有的换行设置为段落，或者设置为br

　　　　firefox，使用命令insertBrOnReturn命令，最后参数为true，会产生br，为false则产生p标签

document.execCommand("insertBrOnReturn",false,'true');

　　　　ie，默认的，产生成对的段落p标签（chrome为div标签，but，如果chrome中编辑器默认的元素为

) , 搜噶。。。统一为段落的p标签，就是这么easy。（firefix设置：document.execCommand("insertBrOnReturn",false,'false');ie是默认，chrome设置初始p tag）

　　　　ps： 编辑器默认必须有html，ie可以为空，其他浏览器至少要有br元素，否则会出现focus无光标的问题。同样，如果用户设置了初始html，同时换行为段落P的tag，那么此时就需要给html内容套上一个p容器。同样，保证p标签内部不允许有p元素，如果有，则要产生新的段落，这部分，可以封装在一个 empty() 的方法。

1 //当换行为br
2 editor.innerHTML = Util.msie ? '' : '
';
3 //当换行为段落
4 editor.innerHTML = '
' + (Util.msie ? '' : '
') + '
';

多数情况，设置为p标签，是最符合文章的编辑，毕竟，enter换行产生新的段落是那么的“语义”，哈哈。   但总有需要，换行需要设置为br。那么问题来了。firefox可以使用编辑器命令设置为br，其他浏览器，需要绑定事件，在按下回车的时候，删除当前选区的内容，插入一个
 的代码，同时设置光标选中空格，删除它，因为插入空格再文档末尾不可用。

代码：

if (e.keyCode == 13 && self._bindEnter == true) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    //如果insertHTML命令失败，手动添加br
    var range = self.getRange().range;
    self.insertHTML(range.pasteHTML ? '
' : '
 ');//不添加空格，在末尾无法有时候无法执行br
    if (!range.pasteHTML) {
        //chrome\ie9\ie19
        var rangeData = self.getRange();
        var range = rangeData.range;
        range.setStart(range.startContainer, range.startOffset - 1);
        var _selection = self.getRange().selection;
        _selection.removeAllRanges();
        _selection.addRange(range);
        document.execCommand("Delete", false, null);

    }
}

　　为了方便，会添加个insertHTML的方法，插入br、tab占位等，低版本的ie浏览器，直接使用range.pasteHTML即可，反之使用execCommand的insertHTML，如果命令失败，调用range.createContextualFragment，创建文档片段，range.insertNode，插入字符串html，最终再设置位置、添加到selection中，

发现bug，ie9移除了低版本的pasteHTML,但又未支持w3c的createContextualFragment方法，只好使用createDocumentFragment方法来创建文档碎片。

代码：

 1 execCommand: function(type, value) {
 2     var result;
 3     try {
 4         //当ie调用无法执行的命令会报错
 5         result = this.ifrDoc.execCommand(type, false, value);
 6     } catch (e) {
 7     }
 8     this._console('execCommand', type, value, 'result:' + (result ? 'ok' : 'false'));
 9     return result;
10 },
11 insertHTML: function(html, fn) {
12     var self = this;
13     if (!self.execCommand("insertHTML", html)) {
14         //ie不支持insertHTML
15         var rangeData = self.getRange();
16         var range = rangeData.range;
17         if (document.selection && range.pasteHTML) {
18             range.pasteHTML(html);//早期ie的方法
19             range.collapse(false);
20         } else {
21             range.deleteContents();//删除选择的内容.
22             //#bug  ie9去除了pasteHTML,却没有createContextualFragment方法，ie10已添加
23             var rangeNode;
24             if (range.createContextualFragment) {
25                 rangeNode = range.createContextualFragment(html)
26             } else {
27                 rangeNode = document.createDocumentFragment();
28                 var div = document.createElement("div");
29                 rangeNode.appendChild(div);
30                 div.outerHTML = html;
31                 div = null;
32             }
33             range.insertNode(rangeNode);
34             range.collapse(false);
35         }
36 
37     }
38 }

View Code

最后奉上demo，虽然是rich editor教程，但第一篇是不包含任何针对文字的格式设置的编辑器，我们是在做准备工作，哼哼。阅读api是少不了滴. 同样添加了n多工具方法。

点我下载demo

update @2013-11-27 12:55:14

BY henry

mail : liyaohui.henry@gmail.com