自定义控件说明文档

【myApps/OBPM版本号】：4.4stable sp21
【浏览器类型】：Chrome
【技术QQ群】：182378297
【场景】：自定义控件说明文档

【解决方法】：

1. # 自定义控件
   
2. 
   
3. 开发人员可以为myApps|OBPM添加自定义控件，以适应不同用户不同的需求。下面是添加自定义控件具体步骤：
   
4. 
   
5. 
   
6. 
   
7. 
   
8. **Fckeditor自定义控件的添加过程**
   
9. 
   
10. ## 一、 注册控件名称：
    
11. 
    
12. 修改obpm-designer-web\core\dynaform\form\webeditor\fckconfig.js下的两个地方
    
13. 
    
14. 1、 找到：  FCKConfig.PluginsPath=FCKConfig.BasePath+ 'plugins/';
    
15. 
    
16. 然后在上句代码之后添加“test”为自定名称
    
17. 
    
18. FCKConfig.Plugins.Add('test') ;
    
19. 
    
20. 如下图所示：
    
21. 
    
22. 
    
23. 
    
24. 2、找到FCKConfig.ToolbarSets["Default"]（这里视情况而定，这里使用默认的Toolbar）添加“test”（这里主要是设置你的控件显示在编辑器的位置）
    
25. 
    
26. 如下图所示：
    
27. 
    
28. 
    
29. 
    
30. ## 二、 注册属性标题（实现多语言）
    
31. 
    
32. 修改语言配置文件
    
33. 
    
34. obpm-designer-web\core\dynaform\form\webeditor\editor\lang（目录）
    
35. 
    
36. 1、 en.js（英文）
    
37. 
    
38. test:"test",   //
    
39. 
    
40. testtitle:"testtitle", //onmouse title
    
41. 
    
42. testProp:"testProp", //右击属性菜单
    
43. 
    
44. 如下图所示：
    
45. 
    
46. 
    
47. 
    
48. 2、 zh-cn.js（中文）
    
49. 
    
50. test:"测试自定义控件",
    
51. 
    
52. testtitle:"测试自定义控件",
    
53. 
    
54. testProp:"测试自定义控件属性",
    
55. 
    
56. 如下图所示：
    
57. 
    
58. 
    
59. 
    
60. 3、 zh-cn.js（繁体）
    
61. 
    
62. test:"測試自定義控件",
    
63. 
    
64. testtitle:"測試自定義控件",
    
65. 
    
66. testProp:"測試自定義控件屬性",
    
67. 
    
68. 如下图所示：
    
69. 
    
70. 
    
71. 
    
72. 1、2、3是对应起来
    
73. 
    
74. ## 三、 建立控件实体
    
75. 
    
76. 1、在obpm-designer-web\core\dynaform\form\webeditor\editor\plugins
    
77. 
    
78. 目录下，新建一个自定的控件文件夹（命名规范：要和一中注册的名字相同，且大小写区分）
    
79. 
    
80. 
    
81. 
    
82. 2.该文件夹里面可以放关于该控件的相关信息
    
83. 
    
84. 1) 配置js：fckplugin.js
    
85. 
    
86. 
    
87. 
    
88. 2) 控件图标：test.gif
    
89. 
    
90. 3) 控件实体文件：myapps_test.jsp
    
91. 
    
92. Ok方法
    
93. 
    
94. InitDocument方法
    
95. 
    
96. .....
    
97. 
    
98. classname：cn.myapps.runtime.dynaform.form.ejb.test
    
99. 
    
100. 如下图所示：
     
101. 
     
102. 
     
103. 
     
104. 3.添加对应的java类对象
     
105. 
     
106. 
     
107. 
     
108. ## 四、 右击菜单的添加
     
109. 
     
110. 在obpm-designer-web\core\dynaform\form\webeditor\editor\_source\internals\fck_contextmenu.js文件下
     
111. 
     
112. if ( tagName == 'IMG' && classname=="cn.myapps.core.dynaform.form.ejb.Test"){
     
113. 
     
114. ​                 menu.AddSeparator() ;
     
115. 
     
116. ​                 menu.AddItem( 'test', FCKLang.testProp, 37 ) ;
     
117. 
     
118. }
     
119. 
     
120. 如下图所示：
     
121. 
     
122. 
     
123. 
     
124. ## 五、最后一步
     
125. 
     
126. 预览图：
     
127. 
     
128. 
     
129. 
     

复制代码