//注册桌面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 = '
' }, _els[3])/*创建下拉框*/ $('#U_MD_O_SetLineHeight > .U_MD_O_H_select_list > div')[0].innerHTML = '
'; var _selectBtn = $('.U_MD_O_H_select_list'); //失焦隐藏下拉框 for (var i = 0; i < _selectBtn.length; i++) { _selectBtn[i].onclick = function () { for (var j = 0; j < 3; j++) { $(".selectBox")[j].style.display = "none"; } } } } /** * Word标题样式 */ U.MD.O.W.E.titleStyle = function (key) { var _range = U.UF.E.getRangeAt() /*获取光标位置*/ var _rangeline = U.UF.E.getRangeLineElement(_range); //获取光标所在行 var _size = "12pt"; //设置字体 var _weight = "bold"; switch (key) { case 'U_MD_O_W_Font_Normal': //正文 _size = "10.5pt"; _weight = "normal"; break; case 'U_MD_O_W_Font_Heading1': //标题一 _size = "22pt"; break; case 'U_MD_O_W_Font_Heading2': //标题二 _size = "16pt"; break; case 'U_MD_O_W_Font_Heading3': //标题三 _size = "15pt"; break; case 'U_MD_O_W_Font_Heading4': //标题四 _size = "14pt"; break; } var _textcsstext = "font-family:微软雅黑;font-weight:" + _weight + ";font-size:" + _size + ";line-height: 2;"; //字体样式 var i, j, _nowline, _allchild; //定义变量 for (i = 0; i < _rangeline.length; i++) { //设置样式 _nowline = _rangeline[i]; _nowline.setAttribute("name", key); //设置name属性 _nowline.style.cssText = _textcsstext; //设置样式 for (var j = 0; j < _rangeline[i].childNodes.length; j++) { if (_rangeline[i].childNodes[j].nodeName !== "#text") { _rangeline[i].childNodes[j].style.cssText = _textcsstext; //设置样式*/ } } } } /** * 下拉框显示隐藏 * @param el */ U.MD.O.W.E.loadLineHeight = function (el, conel) { conel = conel || el.nextElementSibling; /*拿到下拉框选择区域内容*/ conel.style.display === 'block' ? conel.style.display = 'none' : conel.style.display = 'block'; /*显示隐藏*/ } /** * 下拉框显示隐藏 * @param el */ U.MD.O.W.E.morelocation = function (e, el, conel) { U.MD.O.W.E.loadLineHeight(el, conel); conel.style.right = "0px"; conel.style.right = "auto"; if (conel.offsetWidth < el.offsetLeft + el.offsetWidth) { conel.style.right = window.innerWidth - el.offsetLeft - el.offsetWidth + "px"; } else { conel.style.left = "0px"; conel.style.right = "auto"; } // if (conel.offsetHeight <= 47 && conel.offsetWidth <= window.innerWidth && conel.offsetWidth <= (el.offsetLeft + el.offsetWidth)) { // // } } /** * 显示隐藏工具栏交换函数 * @param el */ U.MD.O.W.E.hideChange = function (el) { if (!el.children.length) /*判断是否有子元素*/ return; el.style.display === 'table-row' ? el.style.display = 'none' : el.style.display = 'table-row'; /*显示隐藏*/ } /** * 给工具栏绑定onresize事件 * @param moreareael 存放超出内容的div */ U.MD.O.W.E.toolsbind = function () { var _toolsel = $('#tools')[0]; //给工具栏绑定onresize事件 window.onresize = function () { U.MD.O.W.E.toolbarCheck(_toolsel); }; //工具栏更多处理,下拉框显示隐藏 $('#U_MD_O_H_More').Child()[0].onclick = function (e) { // $('#U_MD_O_H_More').children()[0].onclick = function (e) { U.MD.O.W.E.morelocation(e, this, $('.U_MD_O_H_More_Area')[0]); } //工具栏大小初始化 U.MD.O.W.E.toolbarCheck(_toolsel); } /** * 工具栏检测内容区域大小 * @param forms 工具栏div */ U.MD.O.W.E.toolbarCheck = function (forms) { var _more = $('#U_MD_O_H_More', forms)[0]; //更多按钮 var _morearea = $('.U_MD_O_H_More_Area', forms)[0]; //更多功能区域 var _area = $('> .U_MD_O_H_Area', forms); //获取所有分区 var i; //定义循环变量 var _allwidth = 0; //设置记录宽度变量 var _ismax = false; //设置是否超出最大值变量 _morearea.style.display = "block"; //显示更多功能区域 否则offsetWidth获取不到宽度 for (i = 0; i < _area.length - 1; i++) { //循环判断每个分区的内容是否可完全显示 _allwidth += _area[i].offsetWidth; //记录宽度递加 if (!_ismax && _allwidth >= forms.offsetWidth - _more.offsetWidth) { //已超出最大值或者 该分区添加后超出最大值 _ismax = true; //设置变量已超出最大值 break; } } if (_ismax) { //超出最大值 var j; //定义循环变量 for (j = _area.length - 2; j >= i; j--) { //循环判断每个分区的内容是否可完全显示 倒叙添加 _morearea.children[0] ? _morearea.insertBefore(_area[j], _morearea.children[0]) : _morearea.appendChild(_area[j]); //将分区追加到跟多功能按钮之前 } } while (_morearea.children[0] && !_ismax) { //循环将工具栏多余的位置放置分区 _allwidth += _morearea.children[0].offsetWidth; //将分区添加后记录宽度 var _morewidth = _morearea.children.length == 1 ? 0 : _more.offsetWidth; //计算更多按钮的宽度 var _curoff = _morearea.children.length == 1 ? 0 : 8; //判断最后一个分区的功能是否需要显示分割线 分割线占用宽度为8 var _length = forms.offsetWidth - _morewidth - _curoff; //计算当前可用宽度 if (_allwidth < _length) { //如果显示宽度为超出可用宽度 则将分区提至工具栏中 forms.insertBefore(_morearea.children[0], _more); //将分区追加到跟多功能按钮之前 _area = $('> .U_MD_O_H_Area', forms); //重新获取分区 } else { _ismax = true; //否则设置已超出最大区域 } } if (_ismax || _morearea.children.length) { //判断是否已超出区域或者更多功能区存在分区 _area[_area.length - 1].style.display = ""; //显示更多功能按钮 $('.U_MD_O_H_cutoff', _area[_area.length - 2])[0].style.display = "inline-block"; //显示最后一个分区的分割线 } else { _area[_area.length - 1].style.display = "none"; //隐藏更多功能按钮 $('.U_MD_O_H_cutoff', _area[_area.length - 2])[0].style.display = "none"; //隐藏最后一个分区的分割线 } _morearea.style.display = "none"; //影藏更多功能区 } /** * 站点预览 */ U.MD.O.W.E.sitePreview = function () { var _wordinfo = U.MD.O.W.fileinfo; //获取文档信息 if (_wordinfo.UserDirectoryID && _wordinfo.UserId && _wordinfo.UserallDirectoryName) { //判断文档是否存在 U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_DNS", 'GetDnsInfoByFileId', _wordinfo.UserDirectoryID], function (r) { var _data = r.value; //获取该文档的域名 if (_data.length) { //判断域名是否存在 window.open('http://' + _data[0].AppId + '.1473.cn/' + _data[0].Domain) //跳转页面 } else { var _type = _wordinfo.UserDirectoryExtendType && _wordinfo.UserDirectoryExtendType.toLowerCase(), //获取文档类型 _callback = { //设置回调接口 modifyDomain: function (res) { $('#U_MD_O_H_body_left_href_pay_a')[0].innerHTML = ""; U.MD.O.W.Panel.loadlink({ UserDirectoryID: res.FileId }) }, //修改命名后的回调 addDomain: function (res) { $('#U_MD_O_H_body_left_href_pay_a')[0].innerHTML = ""; U.MD.O.W.Panel.loadlink({ UserDirectoryID: res.FileId }) }, //添加域名后的回调 deleteDomain: function (res) { $('#U_MD_O_H_body_left_href_pay_a')[0].innerHTML = ""; U.MD.O.W.Panel.loadlink({ UserDirectoryID: res.FileId }) } //删除域名后的回调 }; switch (_type) { //转文档类型字符串 case 'uw': case 'un': _type = 'word'; break; case 'ue': _type = 'execl'; break; default: _type = 'word'; break; } window.open("http://" + _wordinfo.UserDirectoryID + ".1473.cn"); // top.U.MD.DS.createDefaultDomainInit(_wordinfo, _type, _callback); //调用域名管理中心的接口 } }); } else { U.MD.O.W.save(); //调用文档保存接口 } } //#endregion //#region 互联文档转本地文档 /* U.MD.O.W.E.downOfficeWord 参数一:type(str) 文档类型 参数二:content(str) 文档元素 */ U.MD.O.W.E.downOfficeWord = function (type, content, downname) {//调用函数 if (type == 'doc') { //判断是都这个文件等于doc如果是执行函数 var _doc = ""; //定义一个变量储存函数 _doc += "
"; //这个里面需要有大div包裹起来 var _html = content.innerHTML; //打印出里的内容显示在页面上 _doc += _html; _doc += "
"; var docFile = ""; docFile = docFile + '' + _doc + ""; var base64data = "base64," + window.btoa(unescape(encodeURIComponent(docFile))); window.open('data:application/msword;' + base64data); } // var doc = ""; // doc += ""; // var html = document.getElementById("score").innerHTML; // doc += html; // doc += "
"; // var a = document.body.innerHTML; // var docFile = ""; // docFile = docFile + "" + doc + ""; // var base64data = "base64," + window.btoa(unescape(encodeURIComponent(docFile))); // if (type == 'doc') { // window.open('data:application/msword;' + base64data); // } else if (type == 'excel') { // window.open('data:application/vnd.ms-excel;' + base64data); // } } //#endregion