自己实现Rich Text Editor

文章截图 - 更好的排版

经过对网上一些常见的RichTextEditor（ rte-light, jHTMLArea, NicEdit）的分析后，我决定自己来实现一个。
为的不是重新发明轮子，我也没想把这个做成一个完整的轮子，仅仅是为了学习内部的实现机制。

1. 使IFrame可编辑
为了达到对HTML的编辑，我们不可能在TextArea中完成，这就需要借助一个内嵌的IFrame。
第一个问题就是如何使IFrame（或者说一个页面）和Textarea具有类似的行为 - 可编辑。
下面我们对普通的IFrame和可编辑的IFrame进行比较：
正常的IFrame：

可编辑的IFrame： 

相关代码：

    <iframe id="iframe3"></iframe>

    <iframe id="iframe4"></iframe>

    

    $(function() {

        var iframe1 = $("#iframe1")[0].contentWindow.document;

        $(iframe1).find("body").html("<p>Hello <a href=\"http://www.google.com/\">Google</a></p>");

        var iframe2 = $("#iframe2")[0].contentWindow.document;

        iframe2.designMode = 'on';

        iframe2.open();

        iframe2.write("<p>Hello <a href=\"http://www.google.com/\">Google</a></p>");

        iframe2.close();

    });

    

2. 获取IFrame选中的值
IFrame可编辑，就意味着我们可以添加、删除、修改IFrame中的内容，
那么首要任务就是能通过编程的方式（JavaScript）获取选中的值。
下面一段程序兼容Firefox和IE：

    <a id="selectedValue" href="javascript:;">获取当前选中区域</a>

    <iframe id="iframe4"></iframe>

    

    $(function() {

        var iwindow = $("#iframe2")[0].contentWindow;

        var idocument = iwindow.document;

        idocument.designMode = 'on';

        idocument.open();

        idocument.write("<p>Hello <a href=\"http://www.google.com/\">Google</a></p>");

        idocument.close();

        $("#selectedValue").click(function() {

            var range, html;

            if ($.browser.msie) {

                // IE下获取选中区域

                range = idocument.selection.createRange();

                // 选中区域的HTML

                html = range.htmlText;

            } else {

                // Firefox下获取选中区域

                range = iwindow.getSelection().getRangeAt(0);

                // 选中区域的HtmlFragment，我们需要一点小技巧来获取Html片段的内容

                var fragment = range.cloneContents();

                html = $("<div />").append($(fragment)).html();

            }

            alert(html);

        });

    });

    

如下图所示，选中的值为：
llo <a href="http://www.google.com/">Google</a> 


更进一步，获取选中的纯文本值（去除所有HTML标签之后）：

    $("#selectedValue").click(function() {

        var range, text;

        if ($.browser.msie) {

            // IE下获取选中区域

            range = idocument.selection.createRange();

            // 选中区域的text

            text = range.text;

        } else {

            // Firefox下获取选中区域

            range = iwindow.getSelection().getRangeAt(0);

            // 选中区域的HtmlFragment，我们需要一点小技巧来获取Html片段的内容

            var fragment = range.cloneContents();

            text = $("<div />").append($(fragment)).text();

        }

        // 按照上个例子中操作，获取的值为“llo Google”

        alert(text);

    });

    

3. 光标的位置
我们已经能够获取选中的值了，下面我们来尝试获取光标所在的位置。
注意：这里的光标位置指的是在纯文本中的位置（去除所有标签后）。

下面这段代码只适合IE，还没有找到Firefox下相应的解决办法。

    var iwindow = $("#iframe2")[0].contentWindow;

    var idocument = iwindow.document;

    idocument.designMode = 'on';

    idocument.open();

    idocument.write("<p>Hello <a href=\"http://www.google.com/\">Google</a></p>");

    idocument.close();

    $("#selectedValue").click(function() {

        var range, cursorIndex = 0;

        // 必须的，否则有可能idocument获取不到焦点而报错

        iwindow.focus();

        if ($.browser.msie) {

            range = idocument.selection.createRange();

            range.setEndPoint("StartToStart", idocument.body.createTextRange());

            cursorIndex = range.text.length;

        } 

        alert(cursorIndex);

    });

    

这里的setEndPoint函数有点意思，比如我当前选中"Hello Google"中的"llo Go"。
setEndPoint的第一个参数"EndToStart"表示将range的结束位置（8）设为整个文本（idocument.body.createTextRange()）的开始位置（0）。
此时range的开始位置（2），结束位置（0），也就是range此时代表的是0-2之间的字符串。
所以当前光标的位置（选中range的开始位置）就是range.text.length了。


4. 设置格式（粗体斜体）
其实大部分时候，我们不需要知道当前光标的位置，只需要对选中的字符串（range）设置格式就行了。
这一操作是通过调用document的execCommand函数来完成的。

    <iframe id="iframe3"></iframe>

    <div id="Div1">

        <ul>

            <li class="bold"><a href="javascript:;">粗体</a></li>

            <li class="italic"><a href="javascript:;">斜体</a></li>

            <li class="underline"><a href="javascript:;">下划线</a></li>

            <li class="justifyleft"><a href="javascript:;">左对齐</a></li>

            <li class="justifycenter"><a href="javascript:;">居中</a></li>

            <li class="justifyright"><a href="javascript:;">右对齐</a></li>

        </ul>

    </div>

    

    var iwindow = $("#iframe2")[0].contentWindow;

    var idocument = iwindow.document;

    idocument.designMode = 'on';

    idocument.open();

    idocument.write("<p>Hello <a href=\"http://www.google.com/\">Google</a></p>");

    idocument.close();

    $("#jeditor li").click(function() {

        iwindow.focus();

        idocument.execCommand(this.className, false, null);

    });

    

5. 插入链接与显示HTML代码
需要弹出对话框，让用户输入链接地址，其实可以通过execCommand的第三个参数做到这个效果：

    <iframe id="iframe3" style="width: 300px; height: 200px;"></iframe>

    <textarea id="Textarea1" style="display: none; width: 300px; height: 200px;"></textarea>

    <br />

    <a id="A1" href="javascript:;">插入链接</a>

    <br />

    <a id="A2" href="javascript:;">显示HTML代码</a>

    

    var iwindow = $("#iframe2")[0].contentWindow;

    var idocument = iwindow.document;

    idocument.designMode = 'on';

    idocument.open();

    idocument.write("<p>Hello <a href=\"http://www.google.com/\">Google</a></p>");

    idocument.close();

    $("#insertLink").click(function() {

        iwindow.focus();

        idocument.execCommand("createLink", false, prompt("请输入链接地址:", "http://"));

    });

    $("#showSource").toggle(function() {

        $("#source").val(idocument.body.innerHTML);

        $("#iframe2").hide();

        $("#source").show();

    }, function() {

        idocument.body.innerHTML = $("#source").val();

        $("#source").hide();

        $("#iframe2").show();

    });