编辑器004（优化表情）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="EditBase.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="edit">
        <div id="divTool">
        </div>
        <div id="divCon">
        </div>
    </div>
</body>
</html>
<script src="https://files.cnblogs.com/wzq806341010/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/wzq806341010/rangy-core.js" type="text/javascript"></script>
<script src="ToolOne.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        new ToolOne({
            toolId: "divTool",
            cotentId: "divCon",
            item: ["bold", "underline", "italic", "inserHTML", "phiz", "fontsize"]
        });
    }
</script>

default.html

var ToolObj;
var ContentObj;
var RangArr = {}; //定义一个数组变量：用于存储选择范围：rang

var Extend = function (destination, source) {
    for (var item in source) {
        destination[item] = source[item];
    }
    return destination;
}

var EventUtil = function (element, type, hander) {
    if (element.addEventListener) {
        element.addEventListener(type, hander, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, hander);
    } else {
        element["on" + type] = null;
    }
}
var DO = function (id) {
    return typeof id == "string" ? document.getElementById(id) : undefined;
}

Object.prototype._addClass = function (_className) {
    this.className = this.className + " " + _className;
}

Object.prototype._removeClass = function (_className) {
    this.className = this.className.toString().replace(" " + _className, "");
};

var GetoffsetLeft = function (element) {
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}

//编辑器方法
var T = {
    B: function () { T.Excmd("bold"); },
    U: function () { T.Excmd("underline"); },
    I: function () { T.Excmd("Italic"); },
    FS: function () {
        var cmdValue = DO("selFontSize").value;
        T.ExcmdFont("FontSize", cmdValue);
    },
    Excmd: function (cmdName) {
        ContentObj.focus();
        if (rangy.getSelection().toString() == "") { T.GetRange(); }
        document.execCommand(cmdName);
        T.SetStyle();
    },
    ExcmdFont: function (cmdName, cmdValue) {
        ContentObj.focus();
        if (rangy.getSelection().toString() == "") { T.GetRange(); }
        document.execCommand(cmdName, false, cmdValue);
        T.SetStyle();
    },
    InsertHTML: function (_html) {
        ContentObj.focus();
        T.GetRange();
        var sel = rangy.getSelection();
        if (sel && sel.getRangeAt && sel.rangeCount) {
            var range = sel.getRangeAt(0);
            var node = range.createContextualFragment(_html);
            var lastNode = node.lastChild;
            range.insertNode(node);
            range.setEndAfter(lastNode);
            range.collapse(false); //折叠：true光标到开始，false：光标到结束
            sel.removeAllRanges();
            sel.addRange(range);
            sel.collapseToEnd();
        };
        T.SaveRange();
    },
    InserPhize: function (e) {
        var phizeHtml = '<img src="emoticons/images/' + e.id + '.gif"/>';
        T.InsertHTML(phizeHtml);
        DO('phize').style.display = "none";
        DO('phwdiv').style.display = "none";
        DO('img_0').style.border = "0px";
    },
    PhizHTML: function (e) {
        phize = DO('phize');
        var emtop = e.offsetTop;
        var emleft = e.offsetLeft;
        phize.style.top = parseInt(emtop) + 23 + "px";
        phize.style.left = parseInt(emleft) + "px";
        if (phize.style.display == "block") {
            phize.style.display = "none";
            e.style.border = '';
        }
        else {
            e.style.border = 'solid 1px blue';
            phize.style.display = "block";
        }

    },
    SaveRange: function () {
        var sel = rangy.getSelection();
        if (sel && sel.getRangeAt && sel.rangeCount) {
            RangArr["r_1"] = sel.getRangeAt(0);
        }
        else {
            RangArr["r_1"] = null;
        }
    },
    GetRange: function () {
        var sel = rangy.getSelection();
        if (sel && sel.getRangeAt && sel.rangeCount) {
            var range = RangArr["r_1"];
            if (range) {
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    },
    SetStyle: function () {
        $(".editTool div").removeClass("curr");
        if (document.queryCommandState("Bold")) { $("#bold").addClass("curr"); }
        if (document.queryCommandState("Underline")) { $("#underline").addClass("curr"); }
        if (document.queryCommandState("Italic")) { $("#italic").addClass("curr"); }
    }, phizeMouseOver: function (e) {
        e._addClass("phtd_on");
        T.PhPriew(e);
    }, phizeMouseOut: function (e) {
        e._removeClass("phtd_on");
    },
    PhPriew: function (e) {
        var phize = DO("phize");
        var eLeft = e.offsetLeft;
        var phwdiv = DO("phwdiv");
        var top = phize.offsetTop;
        var left = phize.offsetLeft + phize.offsetWidth - 42;
        if (eLeft > 4 * 24) {
            var left = phize.offsetLeft;
        }
        phwdiv.style.top = top + "px";
        phwdiv.style.left = left + "px";
        phwdiv.style.display = "block";
        DO("phwimg").setAttribute("src", 'emoticons/images/' + e.id + '.gif')
    }
};

var ToolOne = function (options) {
    this.SetOptions(options);
    ToolObj = DO(this.options.toolId); //工具条对象
    ContentObj = DO(this.options.cotentId);  //编辑框对象
    this.init();
    this.BindToolHTML();
}
ToolOne.prototype = {
    init: function () {
        EventUtil(ContentObj, "click", function () { T.SaveRange(); T.SetStyle(); });
        EventUtil(ContentObj, "keyup", function () { T.SaveRange(); T.SetStyle(); });
        ToolObj._addClass("editTool");
        ContentObj._addClass("bc editContent");
        ContentObj.setAttribute("contenteditable", "true");

    },
    SetOptions: function (_options) {
        this.options = {
            toolId: "",
            cotentId: "",
            item: ["bold", "underline", "italic", "inserHTML", "phiz", "fontsize"]
        };
        Extend(this.options, _options || {});
    },
    BindToolHTML: function () {
        var _tooHtml = new Array();
        _tooHtml.push('bold|<a href="javascript:void(0)" onclick="T.B()"><div id="bold"  class="fontbold"  title="(Ctrl+B粗体)">B</div></a>');
        _tooHtml.push('underline|<a href="javascript:void(0)" onclick="T.U()"> <div id="underline" class="fontbold"  title="下划线(Ctrl+U)"><u>U</u></div></a>');
        _tooHtml.push('italic|<a href="javascript:void(0)" onclick="T.I()"> <div id="italic" class="fontbold" title="斜体(Ctrl+I)"><i>I</i></div></a>');
        _tooHtml.push('inserhtml|<a href="javascript:void(0)" onclick="T.InsertHTML(\'插入值\')"> <div class="fontbold" title="插入值">+</div></a>');
        _tooHtml.push('phiz|<a href="javascript:void(0)"> <div class="fontbold"  title="表情"><img id="img_0"  onclick="T.PhizHTML(this)" src="emoticons/images/0.png" width="20" height="20" style="border:0px"/></div></a>');
        _tooHtml.push('fontsize|<div><select id="selFontSize" onchange="T.FS()">'
                           + '<option value="1">1</option>'
                           + '<option value="2">2</option>'
                           + '<option value="3">3</option>'
                           + '<option value="4">4</option>'
                           + '<option value="5">5</option>'
                           + '<option value="6">6</option>'
                           + '<option value="7">7</option>'
                     + '</select></div>'
                    + '<div>');
        for (var i = 0; i < this.options.item.length; i++) {
            ToolObj.innerHTML += this.GetTooName(this.options.item[i], _tooHtml);
        }
        this.BindPhize();
    },
    BindPhize: function () {
        var phdiv = document.createElement("div");
        phdiv.setAttribute("id", 'phize');
        phdiv.className = "phdiv";

        var phtable = document.createElement("table");
        phtable.className = 'phtable';
        phtable.setAttribute("cellpadding", "0");
        phtable.setAttribute("cellspacing", "0");
        phtable.setAttribute("border", "0");
        phdiv.appendChild(phtable);
        var phtbody = document.createElement("body");
        phtable.appendChild(phtbody);
        var top = 0;
        var left = 0;
        var l = 0;
        for (var i = 0; i < 7; i++) {
            var phtr = document.createElement("tr")
            for (var j = 0; j < 7; j++) {
                left = (l * 24);
                var phtd = document.createElement("td");
                phtd.setAttribute("id", l);
                phtd.className = "phtd";
                var phspan = document.createElement("span");
                EventUtil(phtd, "click", function () { T.InserPhize(this) });
                EventUtil(phtd, "mouseover", function () { T.phizeMouseOver(this) });
                EventUtil(phtd, "mouseout", function () { T.phizeMouseOut(this) });
                phspan.className = "phspan ";
                phspan.setAttribute("style", 'background-image: url(emoticons/images/static.gif);background-position: -' + left + 'px 0px;');
                phtd.appendChild(phspan);
                phtr.appendChild(phtd);
                l++;
            }
            phtbody.appendChild(phtr);
        }
        phtable.appendChild(phtbody);
        phdiv.appendChild(phtable);
        document.body.appendChild(phdiv);

        var phwdiv = document.createElement("div");
        phwdiv.setAttribute("id", "phwdiv");
        phwdiv.setAttribute("style", "display:block;position:absolute;border:solid 1px #A0A0A0;width:40px;height:40px;background-color:white")
        var phwimg = document.createElement("img");
        phwimg.setAttribute("id", 'phwimg');
        phwimg.setAttribute("style", "margin:8px;");
        phwimg.setAttribute("src", 'emoticons/images/0.gif')
        phwdiv.appendChild(phwimg);
        document.body.appendChild(phwdiv);

    },

    GetTooName: function (funName, _tooHtml) {
        for (var i = 0; i < _tooHtml.length; i++) {
            var val = _tooHtml[i].split('|')[0];
            funName = funName.toLowerCase();
            val = val.toLowerCase();
            if (val == funName) {
                return _tooHtml[i].split('|')[1];
            }
        }
        return "";
    }
}

ToolOne.js

.bc_blue { border: solid 1px blue; }
.bc { border: solid 1px #2C3D5B; }
.fontbold{font-weight:bold;}
.w80{width:80px}
.w100 { width: 100px;  }
.w200 { width: 200px;  }
.w600 { width: 600px;  }
.h300 { height: 100px; }
.edti{border:solid 1px #ccc;width:700px;}
.editContent{ background-color:White;padding:10px;word-wrap:break-word;height: auto; min-height: 200px;padding-top:15px;}
.editTool{width:100%;height:26px;background-color:#D7E4F2;margin:0px;}
.editTool div{ float:left;padding:3px 9px 3px 9px; cursor:pointer;text-decoration:none;color:Black }
.editTool  .curr{background-color:#81AAD1;}

.phhe { width: 100%; height: 20px; text-align: right; margin: 0px;  }
.phul {  border: solid 1px #7A8B7C; width: 200px; height: 200px; padding: 0px;  margin: 0px; }
.phli { border: solid 1px #D3E4F0; float: left; width: 24px; height: 24px;  list-style: none; margin: 1px; }
.phdiv {position: relative;display:none;position:absolute;background-color:white;border:solid 1px #ccc; }
.phdiv .phtable{padding:0px;margin:0px;border:0;border-collapse:separate;}
.phdiv .phtd{margin:0px;padding:1px;border:1px solid #F0F0EE;cursor:pointer;}
.phdiv .phtd_on{border: 1px solid #5690D2;background-color: #E9EFF6;}
.phdiv .phspan{background-repeat:no-repeat;overflow:hidden;padding:0px;margin:0px;border:0px; width:24px;height:24px;display:block;/*display:block;（很重要）*/ }

EditBase.css

posted on 2013-11-03 17:37 朝着阅读(264) 评论(0) 收藏举报