Htmleditor.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  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("change", function(){
  79. this._setBusinessData(this.getData());
  80. }.bind(this));
  81. // this._loadEvents();
  82. }.bind(this));
  83. },
  84. _loadEvents: function(editorConfig){
  85. Object.each(this.json.events, function(e, key){
  86. if (e.code){
  87. this.editor.on(key, function(event){
  88. return this.form.Macro.fire(e.code, this, event);
  89. }.bind(this), this);
  90. }
  91. }.bind(this));
  92. },
  93. _loadValue: function(){
  94. var data = this._getBusinessData();
  95. },
  96. resetData: function(){
  97. this.setData(this._getBusinessData());
  98. },
  99. getData: function(){
  100. return this.editor.getData();
  101. },
  102. setData: function(data){
  103. this._setBusinessData(data);
  104. if (this.editor) this.editor.setData(data);
  105. },
  106. createErrorNode: function(text){
  107. var node = new Element("div");
  108. var iconNode = new Element("div", {
  109. "styles": {
  110. "width": "20px",
  111. "height": "20px",
  112. "float": "left",
  113. "background": "url("+"/x_component_process_Xform/$Form/default/icon/error.png) center center no-repeat"
  114. }
  115. }).inject(node);
  116. var textNode = new Element("div", {
  117. "styles": {
  118. "line-height": "20px",
  119. "margin-left": "20px",
  120. "color": "red"
  121. },
  122. "text": text
  123. }).inject(node);
  124. return node;
  125. },
  126. notValidationMode: function(text){
  127. if (!this.isNotValidationMode){
  128. this.isNotValidationMode = true;
  129. this.node.store("borderStyle", this.node.getStyles("border-left", "border-right", "border-top", "border-bottom"));
  130. this.node.setStyle("border", "1px solid red");
  131. this.errNode = this.createErrorNode(text).inject(this.node, "after");
  132. this.showNotValidationMode(this.node);
  133. }
  134. },
  135. showNotValidationMode: function(node){
  136. var p = node.getParent("div");
  137. if (p){
  138. if (p.get("MWFtype") == "tab$Content"){
  139. if (p.getParent("div").getStyle("display")=="none"){
  140. var contentAreaNode = p.getParent("div").getParent("div");
  141. var tabAreaNode = contentAreaNode.getPrevious("div");
  142. var idx = contentAreaNode.getChildren().indexOf(p.getParent("div"));
  143. var tabNode = tabAreaNode.getChildren()[idx];
  144. tabNode.click();
  145. p = tabAreaNode.getParent("div");
  146. }
  147. }
  148. this.showNotValidationMode(p);
  149. }
  150. },
  151. validationMode: function(){
  152. if (this.isNotValidationMode){
  153. this.isNotValidationMode = false;
  154. this.node.setStyles(this.node.retrieve("borderStyle"));
  155. if (this.errNode){
  156. this.errNode.destroy();
  157. this.errNode = null;
  158. }
  159. }
  160. },
  161. validationConfigItem: function(routeName, data){
  162. var flag = (data.status=="all") ? true: (routeName == data.decision);
  163. if (flag){
  164. var n = this.getData();
  165. var v = (data.valueType=="value") ? n : n.length;
  166. switch (data.operateor){
  167. case "isnull":
  168. if (!v){
  169. this.notValidationMode(data.prompt);
  170. return false;
  171. }
  172. break;
  173. case "notnull":
  174. if (v){
  175. this.notValidationMode(data.prompt);
  176. return false;
  177. }
  178. break;
  179. case "gt":
  180. if (v>data.value){
  181. this.notValidationMode(data.prompt);
  182. return false;
  183. }
  184. break;
  185. case "lt":
  186. if (v<data.value){
  187. this.notValidationMode(data.prompt);
  188. return false;
  189. }
  190. break;
  191. case "equal":
  192. if (v==data.value){
  193. this.notValidationMode(data.prompt);
  194. return false;
  195. }
  196. break;
  197. case "neq":
  198. if (v!=data.value){
  199. this.notValidationMode(data.prompt);
  200. return false;
  201. }
  202. break;
  203. case "contain":
  204. if (v.indexOf(data.value)!=-1){
  205. this.notValidationMode(data.prompt);
  206. return false;
  207. }
  208. break;
  209. case "notcontain":
  210. if (v.indexOf(data.value)==-1){
  211. this.notValidationMode(data.prompt);
  212. return false;
  213. }
  214. break;
  215. }
  216. }
  217. return true;
  218. },
  219. validationConfig: function(routeName, opinion){
  220. if (this.json.validationConfig){
  221. if (this.json.validationConfig.length){
  222. for (var i=0; i<this.json.validationConfig.length; i++) {
  223. var data = this.json.validationConfig[i];
  224. if (!this.validationConfigItem(routeName, data)) return false;
  225. }
  226. }
  227. return true;
  228. }
  229. return true;
  230. },
  231. validation: function(routeName, opinion){
  232. if (!this.validationConfig(routeName, opinion)) return false;
  233. if (!this.json.validation) return true;
  234. if (!this.json.validation.code) return true;
  235. var flag = this.form.Macro.exec(this.json.validation.code, this);
  236. if (!flag) flag = MWF.xApplication.process.Xform.LP.notValidation;
  237. if (flag.toString()!="true"){
  238. this.notValidationMode(flag);
  239. return false;
  240. }
  241. return true;
  242. }
  243. });