资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

编辑器002-创新互联

10年积累的网站制作、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有千山免费网站建设让你可以放心的选择与我们合作。>
window.onload= function () { new ToolOne({ toolId:"divTool", cotentId:"divCon" }); } Default.html
var ToolObj;
var ContentObj;
var RangArr = {}; //定义一个数组变量：用于存储选择范围：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 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();
        };
    },
    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"); }
    }
};

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", "fontsize"]
        };
        Extend(this.options, _options || {});
    },
    BindToolHTML:function () {
var _tooHtml = new Array();
        _tooHtml.push('bold|
B
');
        _tooHtml.push('underline| 
U
');
        _tooHtml.push('italic| 
I
');
        _tooHtml.push('inserhtml| 
+
');
        _tooHtml.push('fontsize|
'
                    + '
');
for (var i = 0; i < this.options.item.length; i++) {
            ToolObj.innerHTML+= this.GetTooName(this.options.item[i], _tooHtml);
        }
    },
    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;}
EditBase.css
网页题目：编辑器002-创新互联
转载来源：http://cdkjz.cn/article/echsp.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
雅安网站建设自动门重庆网站建设绵阳梓潼网站建设成都封阳台LED显示屏厂家邛崃发电机保养seo优化排名成都网站推广手机APP开发

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图