CocoRoboDesktop/js/Controls/Complex/Editor.js

//编辑器
Namespace.register("U.MD.UI.editor");

/* 默认编辑器，嵌入到指定元素内
*  @param parent {element} 创建在指定的父亲元素
*  @param callback {function} 非必传  操作处理函数
*         操作处理函数 该函数默认第一个参数为操作记录。
*         格式形如 ： { updateLine : [修改行ID, 修改行ID,], addLine : [添加行ID], deleteLine : [删除行ID] }
* */
U.MD.UI.Editor = U.MD.UI.editor = function (parent, callback) {
    U.UF.DL.asynLoadCss({ "rel": "stylesheet", "type": "text/css", "href": "/css/Controls/Complex/Editor.css" });
    //  parent.innerHTML = ''; //清空区域内容
    //!$(parent).find($('.editorBar'))[0] ? "" : U.selectEl('.editorBar').remove();
    //_div = $$("div", { "className": "editorBar" }, parent);
    //创建div
    U.MD.UI.editor.createEditor(parent);
    //创建编辑区域
    U.UF.E.initEditor($('.editor', parent)[0], callback);
    //初始化编辑区域
    U.MD.UI.editor.EditorEventBind(parent);
    //绑定事件
    U.MD.UI.editor.operateJson.editor = U.selectEl('.editor', parent)[0];
    //把编辑区域赋值给editor
    return U.MD.UI.editor.operateJson;
    //返回可操作集合
}

U.MD.UI.editor.operateJson = {
    /*
    * U.MD.UI.editor.loadContent  加载编辑器内容
    * param1 text(str) 需要加载的文本内容
    * */
    loadContent: function (text) {
        this.editor.focus();
        U.UF.E.onpaste(null, this.editor, text);
        // var _div = $$("div", { innerHTML: text, style: { display: "none"} }, document.body);
        // var _pdiv = U.UF.E.unifiedFormat(_div);
        //        var _range = U.UF.E.getRangeAt();
        //        var _block = U.UF.E.getLineElement(_range.startContainer);
        //        for (var i = 0; i < _pdiv.children.length; i++) {
        //            _block.parentElement.appendChild(_pdiv.children[i]);
        //        }
        //        U.selectEl(_block).remove();
        // U.selectEl(_div).remove();
    },
    /*
    * U.MD.UI.editor.getContent 得到编辑器内容
    * */
    getContent: function () {
        return this.editor.innerHTML;
        //直接返回编辑区域的内容
    }
};

/*
U.MD.UI.editor.CreateEditor 创建HTML内容
param1 parent(elemt)父元素
*/

U.MD.UI.editor.createEditor = function (parent) {
    parent.innerHTML =
        "<div class='toolbar' style=\"width: 788px;background-color: #f5f5f5;border: 1px solid #c7d3e1;line-height: 0;padding: 6px;height: 25px;\">\n" +
        "        <button class=\"last\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/left.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"future\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/right.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
        "\n" +
        "        </i>\n" +
        "<div class='setFont' style='float: left;margin: 0 3px;position: relative;padding:0px'></div>" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
        "\n" +
        "        </i>\n" +
        "<div class='setSize' style='float: left;margin: 0 3px;position: relative;padding:0px'></div>" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
        "\n" +
        "        </i>\n" +
        "        <label style=\"float: left;margin: 0 3px;position: relative;\">\n" +
        "            <button class=\"pic\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/pic.png') no-repeat center;\">\n" +
        "            </button>\n" +
        "            <input multiple accept='image/*'  type='file' class='picUpload' style='display: none;' onchange='U.UF.E.picture(this,this.parentNode.parentNode.nextSibling)' />\n" +  //onchange='U.UF.E.picture(this)'
        "        </label>\n" +
        "        <label style=\"float: left;margin: 0 3px;position: relative;\">\n" +
        "            <button class=\"attachment\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;width: 25px;height: 25px;background: url(/img/YS2017.png) no-repeat;background-position: -1054px -593.5px;\"></button>\n" +
        "            <input multiple=\"\"  type=\"file\" class=\"attachmentUpload\" style=\"display: none;\"  onchange='U.UF.E.attachment(this,this.parentNode.parentNode.nextSibling)' >\n" + //accept=\"image/*\"
        "       </label>\n" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
        "\n" +
        "        </i>\n" +
        "        <div style=\"float: left;margin: 0 3px;position: relative;padding:0px\">\n" +
        "            <button class=\"fontColor\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/fontColor.png') no-repeat center;\">\n" +
        "            </button>\n" +
        "            <div class='fontColorBar colorBar' style='display:none;position: absolute;'>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
        "\n" +
        "        </i>\n" +
        "        <div style=\"float: left;margin: 0 3px;position: relative;padding:0px\">\n" +
        "            <button class=\"backgroundColor\" style=\"outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/blockColor.png') no-repeat center;\">\n" +
        "            </button>\n" +
        "            <div class='backgroundColorBar colorBar' style='display:none;position: absolute;'>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
        "\n" +
        "        </i>\n" +
        "        <button class=\"bIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/strong.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"iIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/i.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"UIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/x.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"SIcon\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/-S-.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\">\n" +
        "\n" +
        "        </i>\n" +
        "        <button class=\"textLeft\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/textLeft.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"textCenter\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/textCenter.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"textRight\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/textRight.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <i style=\"display: inline-block;width: 1px;height: 22px;background-color: #bcbcbc;float: left;margin: 0 3px;position: relative;\" >\n" +
        "\n" +
        "        </i>\n" +
        "        <button class=\"a\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/a.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"b\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/b.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "        <button class=\"c\" style=\"float: left;margin: 0 3px;position: relative;outline: none;cursor: pointer;border: 1px solid transparent;height: 25px;width: 25px;background: url('/EditorImage/c.png') no-repeat center;\">\n" +
        "        </button>\n" +
        "    </div>\n" +
        "    <div class=\"editor\" contenteditable=\"true\" style=\"width: 800px;min-height: 300px;border: 1px solid #E6E5E5;overflow: auto;\">\n" +
        "    </div>";

    //以下代码只能跑一次，导致只能上传一张图片，因此必须把onchange固化到html代码中。
    //解决方法一，<input multiple accept='image/*'  type='file' class='picUpload' style='display: none;' onchange='U.UF.E.picture(this,this.parentNode.parentNode.nextSibling)' />\n" +  //onchange='U.UF.E.picture(this)'
    //解决方法二：用纯碎的js重写上面的html编码。暂时未实现。
    /*$('input.picUpload[type="file"]', parent)[0].onchange = function () {
        U.UF.E.picture(this, U.selectEl('.editor', parent)[0])
    }
    U.selectEl('input.attachmentUpload[type="file"]', parent)[0].onchange = function () {
        U.UF.E.attachment(this, U.selectEl('.editor', parent)[0])
    }*/

    //注释：在js中写如下语句，只能触发一次，因此把语句固化到html中。
    //找到上传图片的input控件
   /* var _upImgInput = U.selectEl('input.picUpload[type="file"]', parent)[0];
    _upImgInput.onchange = function () {
        //找到编辑区域，此处分开写，不然调试太费力。
        var _editor = U.selectEl('.editor', parent)[0];
        U.UF.E.picture(this, _editor);
        _upImgInput.value = "";
    }
    //找到上传文件的input控件
    var _upFileInput = U.selectEl('input.attachmentUpload[type="file"]', parent)[0];
    _upFileInput.onchange = function () {
        //找到编辑区域，此处分开写，不然调试太费力。
        var _editor = U.selectEl('.editor', parent)[0];
        U.UF.E.attachment(this, _editor);
        _upFileInput.value = "";
    }*/
};





/*
U.MD.UI.editor.EditorEventBind 创建绑定事件
param1 parent(elemt) 范围
*/

U.MD.UI.editor.EditorEventBind = function (parent) {

    //绑定图片拉伸
    //   U.UF.E.key($('.editor', parent));
    //绑定键盘事件
    var _font = U.MD.UI.Font();
    //生成字体下拉框
    _font.style.cssText += "vertical-align: super;";
    var _size = U.MD.UI.WordSize();
    //生成字体大小下拉框
    _size.style.cssText += "vertical-align: super;";
    U.selectEl('.setFont', parent).append(_font);
    _font.onchange = function () {
        U.UF.E.setRangeStyle({ 'font-family': _font.value });
    };
    //设置字体样式
    U.selectEl('.setSize', parent).append(_size);
    _size.onchange = function () {
        U.UF.E.setRangeStyle({ 'font-size': _size.value });
    };
    //设置图片上传点击
    U.selectEl('.pic', parent)[0].onclick = function () {
        U.selectEl('.picUpload', parent)[0].click();
    };
    //设置附件上传点击
    U.selectEl('.attachment', parent)[0].onclick = function () {
        U.selectEl('.attachmentUpload', parent)[0].click();
    };
    //图片点击
    U.selectEl('.bIcon', parent)[0].onclick = function () {
        U.UF.E.setRangeStyle({ 'font-weight': 'bold' });
    };
    //加粗
    U.selectEl('.iIcon', parent)[0].onclick = function () {
        U.UF.E.setRangeStyle({ 'font-style': 'italic' });
    };
    //斜体
    U.selectEl('.UIcon', parent)[0].onclick = function () {
        U.UF.E.setRangeStyle({ 'text-decoration': 'underline' });
    };
    //下划线
    U.selectEl('.SIcon', parent)[0].onclick = function () {
        U.UF.E.setRangeStyle({ 'text-decoration': 'line-through' });
    };
    //删除线
    U.selectEl('.fontColor', parent).bind('click', function () {
        //修改字体颜色
        if ($('.fontColorBar', parent).css('display') == "none") {
            U.MD.UI.colorPicker($('.fontColorBar', parent)[0], function (r) {
                U.selectEl('.MD_ColorPicker', U.selectEl('.fontColorBar', parent)[0]).remove();
                U.selectEl('.fontColorBar', parent).hide();
                U.UF.E.setRangeStyle({ 'color': r });
            });
            U.selectEl('.fontColorBar', parent).show();
        }
    });
    U.selectEl('.backgroundColor', parent).bind('click', function () {
        //修改背景颜色
        if ($('.backgroundColorBar', parent).css('display') == "none") {
            U.MD.UI.colorPicker($('.backgroundColorBar', parent)[0], function (r) {
                U.selectEl('.MD_ColorPicker', U.selectEl('.backgroundColorBar', parent)[0]).remove();
                U.selectEl('.backgroundColorBar', parent).hide();
                U.UF.E.setRangeStyle({ 'backgroundColor': r });
            });
            U.selectEl('.backgroundColorBar', parent).show();
        }
    });
    //    U.selectEl('.upload', parent)[0].onchange = function () {
    //        U.UF.E.picture(this);
    ////        上传图片
    //                var _this = this;
    //                U.UF.UP.inputUpload([_this], 'http://disk.1473.cn/USUpfile.ashx?typename=UseStudioEditor&UserId=FA92AAC5-4134-449F-9659-0DC12F4F68E9', function (r) {
    //                    var img = '<img style="max-width: 80%;" src="http://fs.1473.cn/' + r.value[0] + '">';
    //                    U.UF.E.addRange(img);
    //                    _this.value = '';
    //                });
    //    }

    /*$('.editor', parent)[0].onpaste = function (e) {
        //绑定粘贴
        var _text = e.clipboardData.getData('text/html') || event.clipboardData.getData("text/plain");
        var _div = $$("div", { innerHTML: _text, style: { display: "none"} }, document.body);
        U.UF.E.unifiedFormat(_div);
        document.body.removeChild(_div);
    };*/
    U.selectEl('.a', parent).bind('click', function () {
        U.UF.E.addHref();
    });
    //添加a标签
    U.selectEl('.c', parent).bind('click', function () {
        U.UF.E.clearStyle(U.UF.E.getRangeAt());
    });
    //清除格式
    U.selectEl('.textLeft', parent).bind('click', function () {
        U.UF.E.setLineStyle({ 'text-align': 'left' });
    });
    //居左
    U.selectEl('.textCenter', parent).bind('click', function () {
        U.UF.E.setLineStyle({ 'text-align': 'center' });
    });
    //居中
    U.selectEl('.textRight', parent).bind('click', function () {
        U.UF.E.setLineStyle({ 'text-align': 'right' });
    });
    //居右
};

/**
* 下拉框
* @param choosecon 【object】必选 若需要value值使用集合({'11111111':'aaaaaaaa','2222222':'bbbbbbbb','33333333':'cccccccc'})键名为value值
* @param selattr 【object】必选 设置最外层div的属性值
* @param optionevent 【function】必选 给每个选择区域的点击后回调函数，参数一：value值或者文本值
* @param parentnode 【element】可选 添加到里面的元素
* @returns {*} 【element】 返回出创建好的下拉控件
* @constructor
*/
U.MD.UI.editor.Select = function (choosecon, selattr, optionevent, parentnode) {
    var _id = "";
    selattr.id && (_id = selattr.id) && (delete selattr.id);
    var _selectEl = $$('div', { id: _id }, parentnode || null), //创建最外层
        _value = $$('div', selattr, _selectEl),
        _textarea = $$('div', {}, _value); //创建最第二层
    $$('div', { style: { cssText: 'border-width: 6px 4px; border-style: solid; border-color: rgb(166, 178, 192) transparent transparent; width: 0; position: absolute; right: 4px; top: 50%; margin-top: -3px'} }, _value); //小三角
    //_text = $$('div', { style: { cssText: "padding-left: 6px;  overflow: hidden; height:100%;cursor: pointer;"} }, _textarea), //创建显示文本内容div
    var _con = $$('div', {
        datacontent: '',
        style: { cssText: 'display: none;position: absolute; margin-top:-1px; min-width: 100%; max-width: 280px; max-height: 200px ;border: 1px solid silver; overflow-x: hidden; cursor: pointer;' }
    }, _selectEl), //创建选择区域
        _range;

    /*默认属性*/
    //    !selattr.style.border ? _selectEl.style.border = '1px solid #000' : '';
    //    !selattr.style.background ? _selectEl.style.background = '#fff' : '';
    //    !selattr.style.width ? _selectEl.style.width = "122px" : '';
    //    !selattr.style.height ? _selectEl.style.height = '24px' : '';
    (selattr.style && !selattr.style.position) ? _selectEl.style.position = 'relative' : '';
    (selattr.style && !selattr.style.textIndent) ? _textarea.style.textIndent = '6px' : '';
    //    !selattr.style.overflow ? _selectEl.style.overflow = 'hidden' : '';
    _textarea.style.whiteSpace = 'pre';
    _textarea.style.overflow = 'hidden'
    _textarea.style.width = _selectEl.offsetWidth - 15 + "px";
    for (var i in choosecon) { //循环集合
        $$('div', {
            value: i, innerText: choosecon[i], //创建选择内容
            style: { cssText: 'padding: 4px 6px; background: #fff' },
            onmouseover: function () { /*绑定光标移入事件*/
                this.style.background = '#ccc'
            },
            onmouseout: function () { /*绑定光标移除事件*/
                this.style.background = '#fff'
            }, onclick: function () { /*绑定点击事件*/
                _textarea.innerText = this.innerText; /*改变问题*/
                U.UF.E.reSelectRange(_range) /*重新聚焦光标*/
                optionevent(this.value || this.innerText); /*回调*/
            }
        }, _con);
    }

    for (var i in choosecon) {// 第一个及默认值
        _textarea.innerText = choosecon[i];
        break;
    }

    _textarea.style.lineHeight = parseInt(_textarea.style.height) + 'px'; //使显示文本居中

    _selectEl.onclick = function () { //绑定点击事件
        var _el = this.querySelector('div[datacontent]');
        U.UF.E.reSelectRange(_range) /*重新聚焦光标*/
        _el.style.display === 'block' ? _el.style.display = 'none' : _el.style.display = 'block'; /*显示隐藏*/
    };

    U.selectEl(document).bind('click', function () { /*绑定事件*/
        if (_con.style.display != 'none')
            _con.style.display = 'none'
        if ($(".BD_BorderPicker")[0]) {
            if ($(".BD_BorderPicker")[0].style.display != 'none')
                U.selectEl(".BD_BorderPicker")[0].style.display = 'none'
        }
    }, false);

    U.selectEl(_selectEl).bind('click', function (e) { /*绑定事件*/
        U.UF.EV.stopBubble(e);
        //阻止事件冒泡
    });

    _selectEl.onmousedown = function () { /*绑定事件*/
        _range = U.UF.E.getRangeAt() /*获取光标位置*/
    }

    return _selectEl; //返回创建元素
};