//注册桌面office里面的word里面的编辑器命名空间。 Namespace.register("U.MD.O.W.E"); U.MD.O.W.E.colorPickerClickEl = null; /*点击按钮*/ U.MD.O.W.E.ColorPickerEl = null; /*当前颜色div*/ U.MD.O.W.E.Range; //word的光标 U.MD.O.W.E.fontSize = { '0_42': '初号', '0_36': '小初', '0_26': '一号', '0_24': '小一', '0_22': '二号', '0_18': '小二', '0_16': '三号', '0_15': '小三', '0_14': '四号', '0_12': '小四', '0_10.5': '五号', '0_9': '小五', '1_10': '10', '1_12': '12', '1_14': '14', '1_16': '16', '1_18': '18', '1_20': '20', '1_22': '22', '1_24': '24', '1_26': '26', '1_28': '28', '1_36': '36', '1_42': '42', '1_48': '48', '1_72': '72' }; //字体对照 /** * Word初始化 * U.MD.O.W.E.initEditor(el):新建空白word * U.MD.O.W.E.initEditor(el,""),从数据库加载一篇有内容的word。 * @param el 添加到元素里面 * @param contentDom 元素节点 */ U.MD.O.W.E.initEditor = function (synergy) { var _el = $("#U_MD_O_H_wordEditor")[0]; //获取编辑区域的元素 if (U.MD.O.W.init) { U.UF.E.initEditor(_el, synergy ? U.MD.O.W.E.operationNotice : null, U.MD.O.W.fileinfo.UsOffice, U.MD.O.W.E.styleStateManage); //初始化编辑区域 } else { U.UF.E.initEditor(_el, synergy ? U.MD.O.W.E.operationNotice : null, U.MD.O.W.fileinfo.UsOffice, U.MD.O.W.E.styleStateManage); //初始化编辑区域 U.MD.O.W.init = true; } } /** * 样式状态管理函数 * @param style {object} 当前光标所在元素样式 */ U.MD.O.W.E.styleStateManage = function (style) { var _focusColor = "#E1E2E3"; //聚焦样式 $('#U_MD_O_H_fontWeight').css('backgroundColor', (style["font-weight"] == "bold" || style["font-weight"] == "bolder" || parseInt(style["font-weight"]) > 400) ? _focusColor : ""); //是否加粗 $('#U_MD_O_H_italic').css('backgroundColor', (style["font-style"].indexOf("italic") > -1) ? _focusColor : ""); //是否斜体 $('#U_MD_O_H_underline').css('backgroundColor', (style["text-decoration"].indexOf("underline") > -1) ? _focusColor : ""); //是否下划线 $('#U_MD_O_H_lineThrough').css('backgroundColor', (style["text-decoration"].indexOf("line-through") > -1) ? _focusColor : ""); //是否删除线 $('.U_MD_O_H_alignFocus')[0] && $('.U_MD_O_H_alignFocus').removeClass('U_MD_O_H_alignFocus', 0); //删除文件对齐方式选中样式 var _align = ""; //定义变了 switch (style["text-align"]) { case "end": //end 为 right case "right": _align = "right"; break; default: //否则直接获取属性 _align = style["text-align"]; } $("#U_MD_O_H_align" + _align).addClass("U_MD_O_H_alignFocus"); //设置当前对齐方式为选中状态 $("#U_MD_O_SetFontSize").Child()[0].children[0].innerText = U.MD.O.W.E.fontSize["0_" + parseFloat(style["font-size"])] || U.MD.O.W.E.fontSize["1_" + parseFloat(style["font-size"])] || parseFloat(style["font-size"]); //设置字体大小 $("#U_MD_O_SetFontFamily").Child()[0].children[0].innerText = style["font-family"] || ""; //设置字体样式 // $("#U_MD_O_SetFontSize").children()[0].children[0].innerText = U.MD.O.W.E.fontSize["0_" + parseFloat(style["font-size"])] || U.MD.O.W.E.fontSize["1_" + parseFloat(style["font-size"])] || parseFloat(style["font-size"]); //设置字体大小 // $("#U_MD_O_SetFontFamily").children()[0].children[0].innerText = style["font-family"] || ""; //设置字体样式 var _type = ""; //定义类型 switch (style["name"]) { //判断类型 case 'U_MD_O_W_Font_Normal': //正文 _type = "正文"; break; case 'U_MD_O_W_Font_Heading1': //标题一 _type = "标题1"; break; case 'U_MD_O_W_Font_Heading2': //标题二 _type = "标题2"; break; case 'U_MD_O_W_Font_Heading3': //标题三 _type = "标题3"; break; case 'U_MD_O_W_Font_Heading4': //标题四 _type = "标题4"; break; } $("#U_MD_O_SetTitle").Child()[0].children[0].innerText = _type || "正文"; //设置类型 //$("#U_MD_O_SetTitle").children()[0].children[0].innerText = _type || "正文"; //设置类型 } //#region 互联编辑 /* * 修改行内容 */ U.MD.O.W.E.updateEditorLine = function (opera) { if ($('#' + opera.id)[0]) { $('#' + opera.id)[0].outerHTML = opera.content; } else { console.log('updateError', opera.id); } }; /* * 删除行 */ U.MD.O.W.E.deleteEditorLine = function (opera) { $('#' + opera.id).remove(); }; /* * 添加行 */ U.MD.O.W.E.addEditorLine = function (opera) { var _next; if (opera.nextId && (_next = $('#' + opera.nextId))[0]) {//判断有没有nextid,nextid是否存在 _next.Parent().insertBefore($$('div', { innerHTML: opera.content, id: opera.id }), _next[0]); //有的话插入在nexid 元素前 } else { $('.U_MD_O_H_wordEditor').append($$('div', { innerHTML: opera.content, id: opera.id })); //没有就生成在编辑中 } } /* * 加入文档 */ U.MD.O.W.E.addDoc = function () { if (U.MD.O.W.fileinfo.UserDirectoryID && U.MD.O.W.userInfo.userid) { //发送请求 U.A.Request(US.SCOKET, ["addWord", JSON.stringify({ docId: U.MD.O.W.fileinfo.UserDirectoryID, userId: U.MD.O.W.userInfo.userid, pageId: US.pageId })], function () { }); } }; /* * 监听编辑器操作的回调函数 */ U.MD.O.W.E.operationNotice = function (operaRecord) { var _addLine = operaRecord.addLine ? U.MD.O.W.E.addLineMessage(operaRecord.addLine) : []; //判断是否是添加行 var _updateLine = operaRecord.updateLine ? U.MD.O.W.E.updateLineMessage(operaRecord.updateLine) : []; //判断是否是修改行 var _deleteLine = operaRecord.deleteLine ? U.MD.O.W.E.deleteLineMessage(operaRecord.deleteLine) : []; //判断是否是添加删除行 var _message = {}; var _type = U.MD.O.W.fileinfo.UserDirectoryExtendType == 'un' ? 'us.nav' : 'us.word'; var _messagearray = Array.prototype.concat(_addLine, _updateLine, _deleteLine); if (_messagearray.length > 0) { _message[_type] = _messagearray; U.A.Request(US.SCOKET, ["send", JSON.stringify(_message)], function (r) { console.log(r); }); //发送send请求 } console.log('发送的数据', Array.prototype.concat(_addLine, _deleteLine, _updateLine)); }; /* * 添加行 */ U.MD.O.W.E.addLineMessage = function (array) { var _i, _nextLine, _message = []; // 申明变量 var _navid = U.MD.O.W.fileinfo.UserDirectoryExtendType == 'un' ? U.MD.O.W.T.N.nowNavId : null; for (_i = 0; _i < array.length; _i++) { _message.push(U.MD.O.W.E.wordInfo(array[_i].id, 'add', array[_i].content, array[_i].nextId, _navid)); //添加数据 } return _message; }; /* * 修改行内容 */ U.MD.O.W.E.updateLineMessage = function (array) { var _i, _message = []; var _navid = U.MD.O.W.fileinfo.UserDirectoryExtendType == 'un' ? U.MD.O.W.T.N.nowNavId : null; // console.log('跟新了行:', array); for (_i = 0; _i < array.length; _i++) { if (array[_i] !== 'U_MD_O_H_wordEditor') { // if ($('#' + array[_i])[0]) { _message.push(U.MD.O.W.E.wordInfo(array[_i].id, 'update', array[_i].content, null, _navid)); //添加数据 // } } } return _message; }; /* * 删除行 */ U.MD.O.W.E.deleteLineMessage = function (array) { var _i, _message = []; var _navid = U.MD.O.W.fileinfo.UserDirectoryExtendType == 'un' ? U.MD.O.W.T.N.nowNavId : null; // console.log('删除了行:', array); for (_i = 0; _i < array.length; _i++) { _message.push(U.MD.O.W.E.wordInfo(array[_i].id, 'delete', "", null, _navid)); //添加数据 } return _message; }; /* * word 消息类 * 参数一 : id 行id * 参数二 : type 操作类型 * 参数三 : content 行内容 * 参数四 : next 下一行 */ U.MD.O.W.E.wordInfo = function (id, type, content, next, navid) { var _data = { sendId: U.MD.O.W.userInfo.userid, //发送人id receiveId: U.MD.O.W.fileinfo.UserDirectoryID, //文件id //type: navid ? 'us.nav' : 'us.word', //消息类型 messageInfo: { id: id, //操作ID type: type, //类型 content: content, //内容 docId: U.MD.O.W.fileinfo.UserDirectoryID, //文档id nextId: next, //下一行ID pageId: US.pageId //当前页面id } }; navid && (_data.messageInfo.navId = navid); return _data; }; //#endregion //#region 工具栏的处理 /** * 工具栏onmousedown处理 */ U.MD.O.W.E.onmousedown = function () { var _edel = $("#U_MD_O_H_wordEditor")[0], _range = U.UF.E.getRangeAt(), //得到光标处理 _el = U.UF.E.getRangeElement(_range), //获取光标聚焦的元素 _pel = U.UF.EL.getAncestorEditElement(_el); //如果光标聚集在元素内的处理 if (_pel && U.UF.EL.isChild(_edel, _el)) { U.MD.O.W.E.Range = _range; } //如果没有聚焦,那么首先选择上一次是否记录 else { _range = U.MD.O.W.E.Range; if (_range) { _el = U.UF.E.getRangeElement(_range); //得到光标元素 //如果上级的光标聚焦到编辑器中,那么就不修改U.MD.O.W.E.Range if (_pel && U.UF.EL.isChild(_edel, _el)) { U.MD.O.W.E.Range = U.MD.O.W.E.Range; return; } } _edel.focus(); //聚焦 U.MD.O.W.E.Range = U.UF.E.getRangeAt(); //重新设置光标 } } /** * 导航点击事件处理 */ U.MD.O.W.E.onclick = function () { U.UF.E.reSelectRange(U.MD.O.W.E.Range); } /** * Word颜色选择器 * @param el 绑定了事件的元素 * @param event 鼠标事件 */ U.MD.O.W.E.colorPicker = function (el, event) { U.MD.O.W.E.colorPickerClickEl = el; /*button*/ U.MD.O.W.E.ColorPickerEl && $(U.MD.O.W.E.ColorPickerEl).css('display', 'none'); /*判断是否创建色板*/ if (!U.MD.O.W.E.ColorPickerEl || !(U.MD.O.W.E.ColorPickerEl = $('.MD_ColorPicker', el)[0])) { U.MD.O.W.E.ColorPickerEl = U.MD.UI.ColorPicker(el, U.MD.O.W.E.changeColor); /*生成色板*/ U.MD.O.W.E.ColorPickerEl.style.position = 'fixed'; /*将绝对定位赋值给色板*/ } U.MD.O.W.E.ColorPickerEl.style.left = el.getBoundingClientRect().left + 'px'; /*定位色板x位置*/ U.MD.O.W.E.ColorPickerEl.style.top = el.getBoundingClientRect().top + event.target.previousElementSibling.getBoundingClientRect().height + 'px'; /*定位色板y位置*/ U.MD.O.W.E.ColorPickerEl.style.display = "block"; /*让色板显示出来*/ U.UF.EV.stopBubble(event); } /** * 改变两个小块的颜色 * @param r 返回颜色值 */ U.MD.O.W.E.changeColor = function (r) { var _changeEl = $("." + U.MD.O.W.E.colorPickerClickEl.id, U.MD.O.W.E.colorPickerClickEl)[0]; /*获取自定义属性的元素*/ _changeEl.style.background = r; /*改变小块的颜色*/ if (U.MD.O.W.E.colorPickerClickEl.id == "U_MD_O_H_colorPick_fontColor") { /*判断自定义属性的内容*/ U.UF.E.setRangeStyle({ 'color': r }); /*设置光标选中的样式*/ } else { U.UF.E.setRangeStyle({ 'background': r }); /*设置光标选中的样式*/ } U.MD.O.W.E.ColorPickerEl.style.display = "none"; /*选择完后隐藏起来*/ } /** * 动态创建下拉框 * */ U.MD.O.W.E.createSelection = function () { var _els = $('.U_MD_O_H_select'), /*获取字体颜色的div*/ csstext = "font-weight: normal;white-space: pre; min-height: 1.2em; padding:6px 4px; cursor: pointer;background:#fff"; /*下拉框样式*/ _els[0].innerHTML = ""; U.MD.UI.editor.Select({ '宋体': '宋体', 'sans-serif': 'sans-serif', '微软雅黑': '微软雅黑', '楷体': '楷体', '黑体': '黑体', '隶书': '隶书', 'andale mono': 'andale mono', 'arial black': 'arial black' }, { "className": "U_MD_O_H_select_list", id: "U_MD_O_SetFontFamily" }, function (v) { U.UF.E.setRangeStyle({ 'font-family': v }) }, _els[0]) /*创建下拉框*/ _els[1].innerHTML = ""; U.MD.UI.editor.Select(U.MD.O.W.E.fontSize, { "className": "U_MD_O_H_select_list", id: 'U_MD_O_SetFontSize' }, function (key) { U.UF.E.setRangeStyle({ 'font-size': key.split('_')[1] + 'pt' }) }, _els[1])/*创建下拉框*/ _els[2].innerHTML = ""; U.MD.UI.editor.Select({ 'U_MD_O_W_Font_Normal': '正文', 'U_MD_O_W_Font_Heading1': '标题1', 'U_MD_O_W_Font_Heading2': '标题2', 'U_MD_O_W_Font_Heading3': '标题3', 'U_MD_O_W_Font_Heading4': '标题4' }, { "className": "U_MD_O_H_select_list", id: 'U_MD_O_SetTitle' }, function (value) { U.MD.O.W.E.titleStyle(value) }, _els[2])/*创建下拉框*/ _els[3].innerHTML = ""; U.MD.UI.editor.Select({ 10: 1, 15: 1.5, 20: 2, 25: 2.5, 30: 3 }, { "className": "U_MD_O_H_select_list", id: 'U_MD_O_SetLineHeight', style: { width: "auto" } }, function (value) { U.UF.E.setLineStyle({ 'line-height': value / 10 }); // U.UF.E.setRangeStyle({ 'line-height': value / 10 }); $('#U_MD_O_SetLineHeight > .U_MD_O_H_select_list > div')[0].innerHTML = '