MWF.xDesktop.requireApp("process.Xform", "$Module", null, false); /** @class TinyMCEEditor HTML编辑器。 * @o2cn TinyMCEEditor编辑器 * @example * //可以在脚本中获取该组件 * //方法1: * var tinyMCEEditor = this.form.get("name"); //获取组件 * //方法2 * var tinyMCEEditor = this.target; //在组件事件脚本中获取 * @extends MWF.xApplication.process.Xform.$Module * @o2category FormComponents * @o2range {Process|CMS} * @hideconstructor */ MWF.xApplication.process.Xform.TinyMCEEditor = MWF.APPTinyMCEEditor = new Class( /** @lends MWF.xApplication.process.Xform.TinyMCEEditor# */ { Extends: MWF.APP$Module, options: { /** * 组件异步加载后触发. * @event MWF.xApplication.process.Xform.TinyMCEEditor#afterLoad * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明} */ "moduleEvents": ["queryLoad", "load", "postLoad", "afterLoad"] }, initialize: function (node, json, form, options) { this.node = $(node); this.node.store("module", this); this.json = json; this.form = form; this.field = true; this.fieldModuleLoaded = false; }, load: function () { this._loadModuleEvents(); if (this.fireEvent("queryLoad")) { this._queryLoaded(); this._loadUserInterface(); this._loadStyles(); //this._loadEvents(); this._afterLoaded(); this.fireEvent("postLoad"); this.fireEvent("load"); } }, _loadUserInterface: function () { this.node.empty(); if (this.isReadonly()) { // this.node.set("html", this._getBusinessData()); this.node.setStyles({ "-webkit-user-select": "text", "-moz-user-select": "text" }); if (layout.mobile) { this.loadLazyImage(function () { //图片懒加载 var images = this.node.getElements("img"); //移动端设置图片宽度为100% images.each(function (img) { if (img.hasClass("lozad")) { img.setStyles({ "max-width": "100%" }); } else { img.setStyles({ "height": "auto", "max-width": "100%" }); } }.bind(this)); this.fireEvent("afterLoad"); this.fieldModuleLoaded = true; }.bind(this)) } else { this.loadLazyImage(function () { //图片懒加载 if (this.json.enablePreview !== "n") { this.loadImageViewer(); //PC端点击显示大图 this.fireEvent("afterLoad"); this.fieldModuleLoaded = true; } }.bind(this)) } } else { var config = Object.clone(this.json.editorProperties); if (this.json.config) { if (this.json.config.code) { var obj = this.form.Macro.exec(this.json.config.code, this); Object.each(obj, function (v, k) { config[k] = v; }); } } this.loadTinyMCEEditor(config); } // this._loadValue(); }, loadLazyImage: function (callback) { o2.require("o2.widget.ImageLazyLoader", function () { var loadder = new o2.widget.ImageLazyLoader(this.node, this._getBusinessData()); loadder.load(function () { if (callback) callback(); }.bind(this)) }.bind(this)); }, loadImageViewer: function () { o2.require("o2.widget.ImageViewer", function () { var imageViewer = new o2.widget.ImageViewer(this.node); imageViewer.load(); }.bind(this)); }, loadResource: function ( callback ) { o2.load([ "../o2_lib/tinymce/tinymce_5.9.2/tinymce.min.js", "../o2_lib/tinymce/tinymce_5.9.2/o2config.js" ], function () { var config = o2.TinyMCEConfig( this.form.json.mode === "Mobile" ); callback( config ); }.bind(this)) }, getImageUploadOption: function(){ return { localImageMaxWidth : 2000, reference: this.form.businessData.work.job, referenceType: "processPlatformJob" }; }, getEditorId: function(){ return this.form.businessData.work.id +"_"+this.json.id.split(".").join("_") + "_" + (layout.mobile ? "mobile" : "pc"); }, loadTinyMCEEditor: function (config) { this.loadResource( function( defaultConfig ){ var editorConfig = Object.merge(defaultConfig, config || {}); var id = this.getEditorId(); editorConfig.selector = '#'+id; var editorDiv = new Element("div", {"id": id}).inject(this.node); var htmlData = this._getBusinessData(); if (htmlData) { editorDiv.set("html", htmlData || ""); } else if (this.json.templateCode) { editorDiv.set("html", this.json.templateCode || ""); } // var height = this.node.getSize().y; editorConfig.base64Encode = !layout.mobile && (this.json.base64Encode === "y"); editorConfig.enablePreview = (this.json.enablePreview !== "n"); var options = this.getImageUploadOption(); for(var key in options){ editorConfig[key] = options[key]; } var setup = editorConfig.setup; var _self = this; editorConfig.setup = function(editor) { this.form.app.addEvent("queryClose", function () { try{ editor.destroy(); _self.editor = null; }catch (e) {} }); this.form.app.addEvent("queryReload", function () { try{ editor.destroy(); _self.editor = null; }catch (e) {} }); this.form.addEvent("reloadReadForm", function () { try{ editor.destroy(); _self.editor = null; }catch (e) {} }); this._loadEvents(editor); if(setup)setup(editor); }.bind(this); var init_instance_callback = editorConfig.init_instance_callback; editorConfig.init_instance_callback = function(editor) { this.editor = editor; this.editor.on("change", function () { this._setBusinessData(this.getData()); }.bind(this)); if(init_instance_callback)init_instance_callback(editor); if(editorConfig.init_instance_defaultCallback)editorConfig.init_instance_defaultCallback(editor); this.fireEvent("afterLoad"); }.bind(this); tinymce.init(editorConfig); this.fieldModuleLoaded = true; }.bind(this)); }, _loadEvents: function (editor) { Object.each(this.json.events, function (e, key) { if (e.code) { editor.on(key, function (event) { return this.form.Macro.fire(e.code, this, event); }.bind(this), this); } }.bind(this)); }, addModuleEvent: function (key, fun) { this.editor.on(key, function (event) { return (fun) ? fun(this, event) : null; }.bind(this), this); }, _loadValue: function () { var data = this._getBusinessData(); }, // /** // * @summary 重置组件的值为默认值或置空。 // * @example // * this.form.get('fieldId').resetData(); // */ resetData: function () { this.setData(this._getBusinessData()); }, /** * @summary 判断组件值是否为空. * @example * if( this.form.get('fieldId').isEmpty() ){ * this.form.notice('HTML编辑器不能为空', 'warn'); * } * @return {Boolean} 值是否为空. */ isEmpty: function () { return !this.getData().trim(); }, /** * 当表单上没有对应组件的时候,可以使用this.data[fieldId]获取值,但是this.form.get('fieldId')无法获取到组件。 * @summary 获取组件值。 * @example * var data = this.form.get('fieldId').getData(); * @example * //如果无法确定表单上是否有组件,需要判断 * var data; * if( this.form.get('fieldId') ){ //判断表单是否有无对应组件 * data = this.form.get('fieldId').getData(); * }else{ * data = this.data['fieldId']; //直接从数据中获取字段值 * } * @return 组件的数据. */ getData: function () { return (this.editor && this.editor.getContent) ? this.editor.getContent() : this._getBusinessData(); }, /** * 当表单上没有对应组件的时候,可以使用this.data[fieldId] = data赋值。 * @summary 为组件赋值。 * @param data{String} . * @example * this.form.get("fieldId").setData("test"); //赋文本值 * @example * //如果无法确定表单上是否有组件,需要判断 * if( this.form.get('fieldId') ){ //判断表单是否有无对应组件 * this.form.get('fieldId').setData( data ); * }else{ * this.data['fieldId'] = data; * } */ setData: function (data) { this._setBusinessData(data); if (this.editor && this.editor.setContent) this.editor.setContent(data); }, destroy: function(){ if( this.editor ){ this.editor.destroy(); this.editor = null; } }, createErrorNode: function (text) { var node = new Element("div"); var iconNode = new Element("div", { "styles": { "width": "20px", "height": "20px", "float": "left", "background": "url(" + "../x_component_process_Xform/$Form/default/icon/error.png) center center no-repeat" } }).inject(node); var textNode = new Element("div", { "styles": { "line-height": "20px", "margin-left": "20px", "color": "red", "word-break": "keep-all" }, "text": text }).inject(node); return node; }, notValidationMode: function (text) { if (!this.isNotValidationMode) { this.isNotValidationMode = true; this.node.store("borderStyle", this.node.getStyles("border-left", "border-right", "border-top", "border-bottom")); this.node.setStyle("border", "1px solid red"); this.errNode = this.createErrorNode(text).inject(this.node, "after"); this.showNotValidationMode(this.node); if (!this.errNode.isIntoView()) this.errNode.scrollIntoView(false); } }, showNotValidationMode: function (node) { var p = node.getParent("div"); if (p) { if (p.get("MWFtype") == "tab$Content") { if (p.getParent("div").getStyle("display") == "none") { var contentAreaNode = p.getParent("div").getParent("div"); var tabAreaNode = contentAreaNode.getPrevious("div"); var idx = contentAreaNode.getChildren().indexOf(p.getParent("div")); var tabNode = tabAreaNode.getLast().getFirst().getChildren()[idx]; tabNode.click(); p = tabAreaNode.getParent("div"); } } this.showNotValidationMode(p); } }, validationMode: function () { if (this.isNotValidationMode) { this.isNotValidationMode = false; this.node.setStyles(this.node.retrieve("borderStyle")); if (this.errNode) { this.errNode.destroy(); this.errNode = null; } } }, validationConfigItem: function (routeName, data) { var flag = (data.status == "all") ? true : (routeName == data.decision); if (flag) { var n = this.getData(); var v = (data.valueType == "value") ? n : n.length; switch (data.operateor) { case "isnull": if (!v) { this.notValidationMode(data.prompt); return false; } break; case "notnull": if (v) { this.notValidationMode(data.prompt); return false; } break; case "gt": if (v > data.value) { this.notValidationMode(data.prompt); return false; } break; case "lt": if (v < data.value) { this.notValidationMode(data.prompt); return false; } break; case "equal": if (v == data.value) { this.notValidationMode(data.prompt); return false; } break; case "neq": if (v != data.value) { this.notValidationMode(data.prompt); return false; } break; case "contain": if (v.indexOf(data.value) != -1) { this.notValidationMode(data.prompt); return false; } break; case "notcontain": if (v.indexOf(data.value) == -1) { this.notValidationMode(data.prompt); return false; } break; } } return true; }, validationConfig: function (routeName, opinion) { if (this.json.validationConfig) { if (this.json.validationConfig.length) { for (var i = 0; i < this.json.validationConfig.length; i++) { var data = this.json.validationConfig[i]; if (!this.validationConfigItem(routeName, data)) return false; } } return true; } return true; }, validation: function (routeName, opinion) { if (!this.validationConfig(routeName, opinion)) return false; if (!this.json.validation) return true; if (!this.json.validation.code) return true; this.currentRouteName = routeName; var flag = this.form.Macro.exec(this.json.validation.code, this); this.currentRouteName = ""; if (!flag) flag = MWF.xApplication.process.Xform.LP.notValidation; if (flag.toString() != "true") { this.notValidationMode(flag); return false; } return true; }, getExcelData: function(){ return this.getData(); }, setExcelData: function(data){ if( typeOf(data) === "string" )data = data.replace(/ /g,"
"); //excel字段换行是 this.excelData = data; this.setData(data, true); }, validationExcel: function () { if (!this.isReadonly()){ var errorList = this.validationConfigExcel(); if (errorList.length) return errorList; if (!this.json.validation) return []; if (!this.json.validation.code) return []; var flag = this.form.Macro.exec(this.json.validation.code, this); if (!flag) flag = MWF.xApplication.process.Xform.LP.notValidation; if (flag.toString() !== "true") { return [flag]; } } return []; }, validationConfigExcel: function () { var errorList = []; if (this.json.validationConfig){ if (this.json.validationConfig.length){ for (var i=0; idata.value)return data.prompt; break; case "lt": if (v