Htmleditor.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.$Element", null, false);
  3. MWF.xApplication.process.FormDesigner.Module.Htmleditor = MWF.FCHtmleditor = new Class({
  4. Extends: MWF.FC$Element,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default",
  8. "propertyPath": "../x_component_process_FormDesigner/Module/Htmleditor/htmleditor.html"
  9. },
  10. initialize: function(form, options){
  11. this.setOptions(options);
  12. this.path = "../x_component_process_FormDesigner/Module/Htmleditor/";
  13. this.cssPath = "../x_component_process_FormDesigner/Module/Htmleditor/"+this.options.style+"/css.wcss";
  14. this._loadCss();
  15. this.moduleType = "element";
  16. this.moduleName = "htmleditor";
  17. this.form = form;
  18. this.container = null;
  19. this.containerNode = null;
  20. },
  21. _createMoveNode: function(){
  22. this.moveNode = new Element("div", {
  23. "MWFType": "htmleditor",
  24. "id": this.json.id,
  25. "styles": this.css.moduleNodeMove,
  26. "events": {
  27. "selectstart": function(){
  28. return false;
  29. }
  30. }
  31. }).inject(this.form.container);
  32. },
  33. _createNode: function(){
  34. this.node = this.moveNode.clone(true, true);
  35. this.node.setStyles(this.css.moduleNode);
  36. this.node.set("id", this.json.id);
  37. this.node.addEvent("selectstart", function(e){
  38. e.preventDefault();
  39. });
  40. // this.loadCkeditor();
  41. },
  42. _setEditStyle_custom: function(name){
  43. if (name=="editorProperties"){
  44. if (this.editor){
  45. Object.each(this.json.editorProperties, function(value, key){
  46. if (value=="true") this.json.editorProperties[key] = true;
  47. if (value=="false") this.json.editorProperties[key] = false;
  48. }.bind(this));
  49. this.distroyCkeditor();
  50. var config = Object.clone(this.json.editorProperties);
  51. if (this.json.config){
  52. if (this.json.config.code){
  53. var obj = MWF.Macro.exec(this.json.config.code, this);
  54. Object.each(obj, function(v, k){
  55. config[k] = v;
  56. });
  57. }
  58. }
  59. this.loadCkeditor(config);
  60. }
  61. }
  62. if (name=="templateCode"){
  63. if (this.editor) this.editor.setData(this.json.templateCode);
  64. }
  65. },
  66. _initModule: function(){
  67. this.node.empty();
  68. var config = Object.clone(this.json.editorProperties);
  69. if (this.json.config){
  70. if (this.json.config.code){
  71. var obj = MWF.Macro.exec(this.json.config.code, this);
  72. Object.each(obj, function(v, k){
  73. config[k] = v;
  74. });
  75. }
  76. }
  77. this.loadCkeditor(config);
  78. this._setNodeProperty();
  79. if (!this.form.isSubform) this._createIconAction() ;
  80. this._setNodeEvent();
  81. },
  82. //ckeditor
  83. loadCkeditor: function(config){
  84. COMMON.AjaxModule.load("ckeditor", function(){
  85. CKEDITOR.disableAutoInline = true;
  86. var editorDiv = new Element("div").inject(this.node);
  87. if (this.json.templateCode) editorDiv.set("html", this.json.templateCode);
  88. var height = this.node.getSize().y;
  89. var editorConfig = config || {};
  90. if (this.form.options.mode=="Mobile"){
  91. // if (!editorConfig.toolbar && !editorConfig.toolbarGroups){
  92. editorConfig.toolbar = [
  93. //{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
  94. //{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
  95. //{ name: 'links' },
  96. //{ name: 'insert' },
  97. //{ name: 'forms' },
  98. //{ name: 'tools' },
  99. //{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
  100. //{ name: 'others' },
  101. //'/',
  102. { name: 'paragraph', items: [ 'Bold', 'Italic', "-" , 'TextColor', "BGColor", 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', "-", 'Undo', 'Redo' ] },
  103. { name: 'basicstyles', items: [ 'Styles', 'FontSize']}
  104. //{ name: 'colors' },
  105. //{ name: 'about' }
  106. ];
  107. // }
  108. }
  109. if (!editorConfig.removeButtons){
  110. editorConfig.removeButtons = "EasyImageUpload,ExportPdf";
  111. }else{
  112. editorConfig.removeButtons += ",EasyImageUpload,ExportPdf";
  113. }
  114. if (!editorConfig.removePlugins || !editorConfig.removePlugins.length) editorConfig.removePlugins = [];
  115. editorConfig.removePlugins = editorConfig.removePlugins.concat(['cloudservices','easyimage', 'exportpdf']);
  116. // CKEDITOR.basePath = COMMON.contentPath+"/res/framework/htmleditor/ckeditor/";
  117. this.editor = CKEDITOR.replace(editorDiv, editorConfig);
  118. this.editor.on("dataReady", function(){
  119. this.editor.setReadOnly(true);
  120. }, this);
  121. }.bind(this));
  122. },
  123. destroy: function(){
  124. this.distroyCkeditor();
  125. this.form.moduleList.erase(this);
  126. this.form.moduleNodeList.erase(this.node);
  127. this.form.moduleElementNodeList.erase(this.node);
  128. if (this.form.scriptDesigner){
  129. this.form.scriptDesigner.removeModule(this.json);
  130. }
  131. if (this.property) this.property.destroy();
  132. this.node.destroy();
  133. this.actionArea.destroy();
  134. delete this.form.json.moduleList[this.json.id];
  135. this.json = null;
  136. delete this.json;
  137. this.treeNode.destroy();
  138. o2.release(this);
  139. },
  140. distroyCkeditor: function(){
  141. if (this.editor) this.editor.destroy();
  142. this.editor = null;
  143. },
  144. _preprocessingModuleData: function(){
  145. this.node.clearStyles();
  146. //if (this.initialStyles) this.node.setStyles(this.initialStyles);
  147. this.json.recoveryStyles = Object.clone(this.json.styles);
  148. if (this.json.recoveryStyles) Object.each(this.json.recoveryStyles, function(value, key){
  149. if ((value.indexOf("x_processplatform_assemble_surface")!=-1 || value.indexOf("x_portal_assemble_surface")!=-1)){
  150. //需要运行时处理
  151. }else{
  152. this.node.setStyle(key, value);
  153. delete this.json.styles[key];
  154. }
  155. }.bind(this));
  156. if (this.editor){
  157. this.editor.destroy();
  158. this.editor = null;
  159. this.node.empty();
  160. }
  161. this.json.preprocessing = "y";
  162. },
  163. _recoveryModuleData: function(){
  164. if (this.json.recoveryStyles) this.json.styles = this.json.recoveryStyles;
  165. this.json.recoveryStyles = null;
  166. if (!this.editor) this.loadCkeditor();
  167. }
  168. });