编辑器

源码：

/// <reference path="../../Scripts/rangy-core.js" />
/// <reference path="../../Scripts/jquery-1.7.1.min.js" />
/// <reference path="dialog.js" />


; (function ($) {

    var _group = '<span  class="et_group"><span>';
    var $obj = $('<div class="et_main"> </div>');
    var $content = $('<div class="et_content"></div>');
    var FuncObj = {};
    var HtmlObj = {};
    var $CurrEdit = null;
    var rangAtr;

    var tool = {
        isNull: function (obj) {
            return obj == "" || typeof obj == "undefined";
        }
    };

    var rang = {
        set: function () {
            var sel = rangy.getSelection();
            if (sel && sel.getRangeAt && sel.rangeCount) {
                rangAtr = sel.getRangeAt(0);
            } else {
                rangAtr = null;
            }
        },
        get: function () {
            var sel = rangy.getSelection();
            if (sel && sel.getRangeAt && sel.rangeCount) {
                var _rangArt = rangAtr;
                if (_rangArt) {
                    sel.removeAllRanges();
                    sel.addRange(_rangArt);
                }
            }
        },
        insert: function (_html) {
            var sel = rangy.getSelection();
            this.get();
            if (sel && sel.getRangeAt && sel.rangeCount) {
                var _range = sel.getRangeAt(0);
                var node = _range.createContextualFragment(_html);
                var lastNode = node.lastChild;
                _range.insertNode(lastNode);
                _range.setEndAfter(lastNode);
                _range.collapse(false);
                sel.removeAllRanges();
                sel.addRange(_range);
                sel.collapseToEnd();
            }
            this.set();
        },
        getAt: function () {
            var sel = rangy.getSelection();
            if (sel && sel.getRangeAt && sel.rangeCount) {
                return sel.getRangeAt(0);
            }
            return null;
        },
        getSelectText: function () {
            var sel = rangy.getSelection();
            if (sel && sel.getRangeAt && sel.rangeCount) {
                return sel.toString();
            }
        }
    }

  

    var et = {
        paras: {
            bar: "",
            edit: ".edit",
            tools: ["B", "I", "U", "S", "Sup", "Sub", "|", "Link", "UnLink", "|", "Insert", "|", "View"]
        },
        init: function (_paras) {
            var _this = this, p = this.paras;
            $.extend(p, _paras);//覆盖参数
            $.each(p.tools, function (i, o) {
                FuncObj[o] = _this._func[o];
                HtmlObj[o] = _this._html[o];
            });

            //    _this._registeFunc();//注册方法
            //   _this._registerHtml();

            _this._loadHtml(p.tools);//加载工具栏设置字体相关按钮

            /*编辑框*/
            $CurrEdit = $(p.edit);;
            $CurrEdit.attr("contenteditable", true);
            $CurrEdit.on({
                click: function () {
                    _this._css.set();
                    $CurrEdit = $(this);
                    rang.set();
                },
                keyup: function () { _this._css.set(); rang.set(); }
            });
        },
        _loadHtml: function (_tools) {
            var _this = this, p = this.paras;
            var _grr = [], _g = $(_group);
            _grr.push(_g);
            for (var i = 0; i < _tools.length; i++) {
                var _t = _tools[i];
                if (_t == "|") {
                    _g = $(_group);
                    _grr.push(_g);
                } else {
                    var _h = HtmlObj[_t];
                    _g.append(_h);
                    _g.attr("class", "et_group");
                    $(_h).on("click", FuncObj[_t]);
                    $(_h).on("click", _this._css.curr);
                }
            };

            $.each(_grr, function (i, o) {
                $content.append(o);
            });

            $obj.append($content);

            if (!tool.isNull(p.bar)) {
                $(p.bar).append($obj);
            } else {
                $("body").append($obj);
            }
        },
        _func: {
            B: function () {
                $CurrEdit[0].focus();
                document.execCommand("Bold");
                return false;
            },
            U: function () {
                $CurrEdit[0].focus();
                document.execCommand("Underline");
                return false;
            },
            I: function () {
                $CurrEdit[0].focus();
                document.execCommand("Italic");
                return false;
            },
            S: function () {
                $CurrEdit[0].focus();
                document.execCommand("StrikeThrough");
                return false;
            },
            Insert: function () {
                $CurrEdit[0].focus();
                rang.insert("-新插入数据-");
                return false;
            },
            Link: function () {

                rang.set();
                $.dlg.Box.Comm("Link", "添加链接地址",
                    "<div style='margin: 10px;'>\
                               <span style='display:inline-block'> 地址：<input id='a_link' style='width:260px;'></input></span>\
                        <span style='margin-top:5px;display:inline-block'>打开方式：<select id='se_type' >\
                                            <option value='_blank' >新窗口</option>\
                                            <option value=''>当前窗口</option>\
                                          </select></span></div>",
                           336,
                    function () {
                        var txt = $("#a_link").val();
                        var target = $("#se_type").val();
                        if (tool.isNull(txt)) {
                            $.dlg.Msg.Error("链接地址不能为空！");
                            return;
                        }
                        $CurrEdit[0].focus();
                        rang.get();
                        var _href = "http://" + txt.replace("http://", "");
                        document.execCommand('CreateLink', false, _href);
                        if (target != "") {
                            $("a[href='" + _href + "']:contains('" + rang.getSelectText() + "')").attr("target", target);
                        }
                        $.dlg.close("Link");
                    },
                    function () {
                        $.dlg.close("Link");
                    });
                $("#a_link")[0].focus();
                return false;
            },
            UnLink: function () {

                document.execCommand('UnLink');
                return false;
            },
            Sub: function () {
                $CurrEdit[0].focus();
                document.execCommand('Subscript');
                return false;
            },
            Sup: function () {
                $CurrEdit[0].focus();
                document.execCommand('Superscript');
                return false;
            },
            View: function () {
                $.dlg.Box.Info("view", "预览", $CurrEdit.html(), 668);
                return false;
            },
            Undo: function () {
                document.execCommand("Undo");
                return false;
            }
        },
        _css: {
            curr: function () {
                if (!$(this).hasClass("et_btn_on")) {
                    $(this).addClass("et_btn_on");
                } else {
                    $(this).removeClass("et_btn_on");
                }
            },
            set: function () {
                $.each(HtmlObj, function (i, o) {
                    if (o) {
                        o.removeClass("et_btn_on");
                    }
                });
                if (document.queryCommandState("Bold")) { HtmlObj["B"].addClass("et_btn_on"); }
                if (document.queryCommandState("Underline")) { HtmlObj["U"].addClass("et_btn_on"); }
                if (document.queryCommandState("Italic")) { HtmlObj["I"].addClass("et_btn_on"); }
                if (document.queryCommandState("StrikeThrough")) { HtmlObj["S"].addClass("et_btn_on"); }
                if (document.queryCommandState("Superscript")) { HtmlObj["Sup"].addClass("et_btn_on"); }
                if (document.queryCommandState("Subscript")) { HtmlObj["Sub"].addClass("et_btn_on"); }
            }
        },

        _html: {
            B: $('<a href="javascript:;" class="et_btn">B</a>'),
            I: $('<a href="javascript:;" class="et_btn"><i>I</i></a>'),
            U: $('<a href="javascript:;" class="et_btn"><u>U</u></a>'),
            Link: $('<a href="javascript:;" class="et_btn">Link</a>'),
            UnLink: $('<a href="javascript:;" class="et_btn">UnLink</a>'),
            S: $('<a href="javascript:;" class="et_btn"><s>S</s></a>'),
            Insert: $('<a href="javascript:;" class="et_btn">Insert</a>'),
            View: $('<a href="javascript:;" class="et_btn">View</a>'),
            Sub: $('<a href="javascript:;" class="et_btn"> X<sub>2</sub></a>'),
            Sup: $('<a href="javascript:;" class="et_btn"> X<sup>2</sup></a>')
        },
        ////方法注册(已过期)
        _registeFunc: function () {
            //    FuncObj["B"] = this._func.B;
            //    FuncObj["U"] = this._func.U;
            //    FuncObj["I"] = this._func.I;
            //    FuncObj["S"] = this._func.S;
            //    FuncObj["Link"] = this._func.Link;
            //    FuncObj["UnLink"] = this._func.UnLink;
            //    FuncObj["Insert"] = this._func.Insert;
            //    FuncObj["View"] = this._func.View;
            //    FuncObj["Sub"] = this._func.Sub;
            //    FuncObj["Sup"] = this._func.Sup;
        },
        //Html内容注册(已过期)
        _registerHtml: function () {
            //HtmlObj["B"] = $('<a href="javascript:;" class="et_btn">B</a>');
            //HtmlObj["I"] = $('<a href="javascript:;" class="et_btn"><i>I</i></a>');
            //HtmlObj["U"] = $('<a href="javascript:;" class="et_btn"><u>U</u></a>');
            //HtmlObj["Link"] = $('<a href="javascript:;" class="et_btn">Link</a>');
            //HtmlObj["UnLink"] = $('<a href="javascript:;" class="et_btn">UnLink</a>');
            //HtmlObj["S"] = $('<a href="javascript:;" class="et_btn"><s>S</s></a>');
            //HtmlObj["Insert"] = $('<a href="javascript:;" class="et_btn">Insert</a>');
            //HtmlObj["View"] = $('<a href="javascript:;" class="et_btn">View</a>');
            //HtmlObj["Sub"] = $('<a href="javascript:;" class="et_btn"> X<sub>2</sub></a>');
            //HtmlObj["Sup"] = $('<a href="javascript:;" class="et_btn"> X<sup>2</sup></a>');
        }
    };
    $.etit = et;
})(jQuery)

 

页面调用：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <link href="Content/css/et.css" rel="stylesheet" />
    <title></title>
    <link href="Content/css/dialog.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/rangy-core.js"></script>
    <script src="Content/js/dialog.js"></script>
    <script src="Content/js/et.js"></script>
</head>
<body>
    <div id="toolMain"></div>
    <div class="edit">
    </div>
    <div class="edit">
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $.etit.init({
            bar: "#toolMain",
            edit: ".edit",
            tools: ["B", "I", "U", "S", "Sup", "Sub", "|", "Link", "UnLink", "|", "Insert", "|", "View"]
        });
    });
</script>

 

 

源码下载