編輯器003-創(chuàng)新互聯(lián)

站在用戶的角度思考問題，與客戶深入溝通，找到薩爾圖網(wǎng)站設(shè)計與薩爾圖網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋薩爾圖地區(qū)。>

var ToolObj;
var ContentObj;
var RangArr = {}; //定義一個數(shù)組變量：用于存儲選擇范圍：rangvar 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光標(biāo)到開始，false：光標(biāo)到結(jié)束            sel.removeAllRanges();
            sel.addRange(range);
            sel.collapseToEnd();
        };
    },
    InserPhize:function (e) {
var phizeHtml = e.innerHTML;
        T.InsertHTML(phizeHtml);
        DO('phize').style.display = "none";
        DO('img_0').style.border = "";
    },
    PhizHTML:function (e) {

        phize= DO('phize');
var emtop = e.offsetTop;
var emleft = e.offsetLeft;
        phize.style.top= parseInt(emtop) + 28 + "px";
        phize.style.left= parseInt(emleft) + 100 + "px";
if (phize.style.display == "block") {
            phize.style.display= "none";
            e.lastChild.lastChild.style.border= '';
        }
else {
            e.lastChild.lastChild.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.setAttribute("style", "border:solid 1px blue");
    }, phizeMouseOut:function (e) {
        e.setAttribute("style", "border:solid 1px #D3E4F0");
    }
};

var ToolOne = function (options) {
this.SetOptions(options);
    ToolObj= DO(this.options.toolId); //工具條對象    ContentObj = DO(this.options.cotentId);//編輯框?qū)ο? 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)" onclick="T.PhizHTML(this)"> <div class="fontbold"  title="表情"><img id="img_0" src="emoticons/images/0.gif" width="20" height="20" /></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.setAttribute("style", "display:none;position:absolute;background-color:white");
var phul = document.createElement("ul");
        phul.className= 'phul';
        phdiv.appendChild(phul);
for (var i = 0; i < 49; i++) {
            phul.innerHTML+= '<li class="phli" onclick="T.InserPhize(this)" onmouseover="T.phizeMouseOver(this)" onmouseout="T.phizeMouseOut(this)"><img src="emoticons/images/' + i + '.gif" width="24" height="24" /></li>';
        }
        phdiv.appendChild(phul);
        document.body.appendChild(phdiv);
    },

    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;}
.phdiv{  width: 200px; height: 200px; padding: 0px; }
.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; }

EditBase.css

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

default.html

當(dāng)前標(biāo)題：編輯器003-創(chuàng)新互聯(lián)
本文鏈接：http://muchs.cn/article20/dppgjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、用戶體驗、網(wǎng)站改版、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容