//编辑器
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; //返回创建元素
};