Htmleditor.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. MWF.xDesktop.requireApp("process.Xform", "$Module", null, false);
  2. MWF.xApplication.process.Xform.Htmleditor = MWF.APPHtmleditor = new Class({
  3. Extends: MWF.APP$Module,
  4. options: {
  5. "moduleEvents": ["load", "postLoad", "afterLoad"]
  6. },
  7. initialize: function(node, json, form, options){
  8. this.node = $(node);
  9. this.node.store("module", this);
  10. this.json = json;
  11. this.form = form;
  12. this.field = true;
  13. },
  14. load: function(){
  15. if (this.fireEvent("queryLoad")){
  16. this._queryLoaded();
  17. this._loadUserInterface();
  18. this._loadStyles();
  19. //this._loadEvents();
  20. this._afterLoaded();
  21. this.fireEvent("postLoad");
  22. this.fireEvent("load");
  23. }
  24. },
  25. _loadUserInterface: function(){
  26. this.node.empty();
  27. if (this.readonly){
  28. this.node.set("html", this._getBusinessData());
  29. this.node.setStyles({
  30. "-webkit-user-select": "text",
  31. "-moz-user-select": "text"
  32. });
  33. }else{
  34. var config = Object.clone(this.json.editorProperties);
  35. if (this.json.config){
  36. if (this.json.config.code){
  37. var obj = MWF.Macro.exec(this.json.config.code, this);
  38. Object.each(obj, function(v, k){
  39. config[k] = v;
  40. });
  41. }
  42. }
  43. this.loadCkeditor(config);
  44. }
  45. // this._loadValue();
  46. },
  47. loadCkeditor: function(config){
  48. COMMON.AjaxModule.loadDom("ckeditor", function(){
  49. CKEDITOR.disableAutoInline = true;
  50. var editorDiv = new Element("div").inject(this.node);
  51. var htmlData = this._getBusinessData();
  52. if (htmlData){
  53. editorDiv.set("html", htmlData);
  54. }else if (this.json.templateCode){
  55. editorDiv.set("html", this.json.templateCode);
  56. }
  57. var height = this.node.getSize().y;
  58. var editorConfig = config || {};
  59. if (this.form.json.mode==="Mobile"){
  60. if (!editorConfig.toolbar && !editorConfig.toolbarGroups){
  61. editorConfig.toolbar = [
  62. { name: 'paragraph', items: [ 'Bold', 'Italic', "-" , 'TextColor', "BGColor", 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', "-", 'Undo', 'Redo' ] },
  63. { name: 'basicstyles', items: [ 'Styles', 'FontSize']}
  64. ];
  65. }
  66. }
  67. editorConfig.localImageMaxWidth = 800;
  68. editorConfig.reference = this.form.businessData.work.job;
  69. editorConfig.referenceType = "processPlatformJob";
  70. // CKEDITOR.basePath = COMMON.contentPath+"/res/framework/htmleditor/ckeditor/";
  71. // CKEDITOR.plugins.basePath = COMMON.contentPath+"/res/framework/htmleditor/ckeditor/plugins/";
  72. this.editor = CKEDITOR.replace(editorDiv, editorConfig);
  73. this._loadEvents();
  74. //this.editor.on("loaded", function(){
  75. // this._loadEvents();
  76. //}.bind(this));
  77. //this.setData(data)
  78. this.editor.on("blur", function(){
  79. this.ecnet(this.getData());
  80. }.bind(this));
  81. this.editor.on("change", function(){
  82. //this._setBusinessData(this.getData());
  83. }.bind(this));
  84. // this._loadEvents();
  85. }.bind(this));
  86. },
  87. ecnet: function(){
  88. MWF.Actions.get("x_general_assemble_control").ecnetCheck({"value": this.editor.document.$.body.innerText}, function(json){
  89. //josn.data.item
  90. }.bind(this));
  91. },
  92. _loadEvents: function(editorConfig){
  93. Object.each(this.json.events, function(e, key){
  94. if (e.code){
  95. this.editor.on(key, function(event){
  96. return this.form.Macro.fire(e.code, this, event);
  97. }.bind(this), this);
  98. }
  99. }.bind(this));
  100. },
  101. _loadValue: function(){
  102. var data = this._getBusinessData();
  103. },
  104. resetData: function(){
  105. this.setData(this._getBusinessData());
  106. },
  107. getData: function(){
  108. return this.editor.getData();
  109. },
  110. setData: function(data){
  111. this._setBusinessData(data);
  112. if (this.editor) this.editor.setData(data);
  113. },
  114. createErrorNode: function(text){
  115. var node = new Element("div");
  116. var iconNode = new Element("div", {
  117. "styles": {
  118. "width": "20px",
  119. "height": "20px",
  120. "float": "left",
  121. "background": "url("+"/x_component_process_Xform/$Form/default/icon/error.png) center center no-repeat"
  122. }
  123. }).inject(node);
  124. var textNode = new Element("div", {
  125. "styles": {
  126. "line-height": "20px",
  127. "margin-left": "20px",
  128. "color": "red",
  129. "word-break": "keep-all"
  130. },
  131. "text": text
  132. }).inject(node);
  133. return node;
  134. },
  135. notValidationMode: function(text){
  136. if (!this.isNotValidationMode){
  137. this.isNotValidationMode = true;
  138. this.node.store("borderStyle", this.node.getStyles("border-left", "border-right", "border-top", "border-bottom"));
  139. this.node.setStyle("border", "1px solid red");
  140. this.errNode = this.createErrorNode(text).inject(this.node, "after");
  141. this.showNotValidationMode(this.node);
  142. }
  143. },
  144. showNotValidationMode: function(node){
  145. var p = node.getParent("div");
  146. if (p){
  147. if (p.get("MWFtype") == "tab$Content"){
  148. if (p.getParent("div").getStyle("display")=="none"){
  149. var contentAreaNode = p.getParent("div").getParent("div");
  150. var tabAreaNode = contentAreaNode.getPrevious("div");
  151. var idx = contentAreaNode.getChildren().indexOf(p.getParent("div"));
  152. var tabNode = tabAreaNode.getChildren()[idx];
  153. tabNode.click();
  154. p = tabAreaNode.getParent("div");
  155. }
  156. }
  157. this.showNotValidationMode(p);
  158. }
  159. },
  160. validationMode: function(){
  161. if (this.isNotValidationMode){
  162. this.isNotValidationMode = false;
  163. this.node.setStyles(this.node.retrieve("borderStyle"));
  164. if (this.errNode){
  165. this.errNode.destroy();
  166. this.errNode = null;
  167. }
  168. }
  169. },
  170. validationConfigItem: function(routeName, data){
  171. var flag = (data.status=="all") ? true: (routeName == data.decision);
  172. if (flag){
  173. var n = this.getData();
  174. var v = (data.valueType=="value") ? n : n.length;
  175. switch (data.operateor){
  176. case "isnull":
  177. if (!v){
  178. this.notValidationMode(data.prompt);
  179. return false;
  180. }
  181. break;
  182. case "notnull":
  183. if (v){
  184. this.notValidationMode(data.prompt);
  185. return false;
  186. }
  187. break;
  188. case "gt":
  189. if (v>data.value){
  190. this.notValidationMode(data.prompt);
  191. return false;
  192. }
  193. break;
  194. case "lt":
  195. if (v<data.value){
  196. this.notValidationMode(data.prompt);
  197. return false;
  198. }
  199. break;
  200. case "equal":
  201. if (v==data.value){
  202. this.notValidationMode(data.prompt);
  203. return false;
  204. }
  205. break;
  206. case "neq":
  207. if (v!=data.value){
  208. this.notValidationMode(data.prompt);
  209. return false;
  210. }
  211. break;
  212. case "contain":
  213. if (v.indexOf(data.value)!=-1){
  214. this.notValidationMode(data.prompt);
  215. return false;
  216. }
  217. break;
  218. case "notcontain":
  219. if (v.indexOf(data.value)==-1){
  220. this.notValidationMode(data.prompt);
  221. return false;
  222. }
  223. break;
  224. }
  225. }
  226. return true;
  227. },
  228. validationConfig: function(routeName, opinion){
  229. if (this.json.validationConfig){
  230. if (this.json.validationConfig.length){
  231. for (var i=0; i<this.json.validationConfig.length; i++) {
  232. var data = this.json.validationConfig[i];
  233. if (!this.validationConfigItem(routeName, data)) return false;
  234. }
  235. }
  236. return true;
  237. }
  238. return true;
  239. },
  240. validation: function(routeName, opinion){
  241. if (!this.validationConfig(routeName, opinion)) return false;
  242. if (!this.json.validation) return true;
  243. if (!this.json.validation.code) return true;
  244. var flag = this.form.Macro.exec(this.json.validation.code, this);
  245. if (!flag) flag = MWF.xApplication.process.Xform.LP.notValidation;
  246. if (flag.toString()!="true"){
  247. this.notValidationMode(flag);
  248. return false;
  249. }
  250. return true;
  251. }
  252. });