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

【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对象：

　　　　　　

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

 　　

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

　　

　　同样，不同的浏览器对于回车按键的处理也不一致，ie浏览器会产生一个成对儿的<p></p>标签，chrome为<div></div>，firefox根据版本为p或者br。

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

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

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

　　　　ie，默认的，产生成对的段落p标签（chrome为div标签，but，如果chrome中编辑器默认的元素为<p></p>，那么我大chrome则智能的把换行段落tag设置成了<p>) , 搜噶。。。统一为段落的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() 的方法。

//当换行为br
editor.innerHTML = Util.msie ? '' : '<br />';
//当换行为段落
editor.innerHTML = '<p>' + (Util.msie ? '' : '<br />') + '</p>';

　　

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

代码：

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/>' : '<br/>&nbsp;');//不添加空格，在末尾无法有时候无法执行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方法来创建文档碎片。

代码：

execCommand: function(type, value) {
    var result;
    try {
        //当ie调用无法执行的命令会报错
        result = this.ifrDoc.execCommand(type, false, value);
    } catch (e) {
    }
    this._console('execCommand', type, value, 'result:' + (result ? 'ok' : 'false'));
    return result;
},
insertHTML: function(html, fn) {
    var self = this;
    if (!self.execCommand("insertHTML", html)) {
        //ie不支持insertHTML
        var rangeData = self.getRange();
        var range = rangeData.range;
        if (document.selection && range.pasteHTML) {
            range.pasteHTML(html);//早期ie的方法
            range.collapse(false);
        } else {
            range.deleteContents();//删除选择的内容.
            //#bug  ie9去除了pasteHTML,却没有createContextualFragment方法，ie10已添加
            var rangeNode;
            if (range.createContextualFragment) {
                rangeNode = range.createContextualFragment(html)
            } else {
                rangeNode = document.createDocumentFragment();
                var div = document.createElement("div");
                rangeNode.appendChild(div);
                div.outerHTML = html;
                div = null;
            }
            range.insertNode(rangeNode);
            range.collapse(false);
        }

    }
}

 

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

点我下载demo

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

BY henry

mail : liyaohui.henry@gmail.com