# 自定义控件

开发人员可以为myApps|OBPM添加自定义控件，以适应不同用户不同的需求。下面是添加自定义控件具体步骤：

![img](images/field1.png) 

 

 

**Fckeditor自定义控件的添加过程**

## 一、 注册控件名称：

修改obpm-designer-web\core\dynaform\form\webeditor\fckconfig.js下的两个地方

1、 找到：  FCKConfig.PluginsPath=FCKConfig.BasePath+ 'plugins/';

然后在上句代码之后添加“test”为自定名称

FCKConfig.Plugins.Add('test') ;

如下图所示：

![img](images/field2.png) 

2、找到FCKConfig.ToolbarSets["Default"]（这里视情况而定，这里使用默认的Toolbar）添加“test”（这里主要是设置你的控件显示在编辑器的位置）

如下图所示：

![img](images/field3.png) 

## 二、 注册属性标题（实现多语言）

修改语言配置文件

obpm-designer-web\core\dynaform\form\webeditor\editor\lang（目录）

1、 en.js（英文）

test:"test",   //

testtitle:"testtitle", //onmouse title

testProp:"testProp", //右击属性菜单

如下图所示：

![img](images/field4.png) 

2、 zh-cn.js（中文）

test:"测试自定义控件",

testtitle:"测试自定义控件",

testProp:"测试自定义控件属性",

如下图所示：

![img](images/field5.png) 

3、 zh-cn.js（繁体）

test:"測試自定義控件",

testtitle:"測試自定義控件",

testProp:"測試自定義控件屬性",

如下图所示：

![img](images/field6.png) 

1、2、3是对应起来

## 三、 建立控件实体

1、在obpm-designer-web\core\dynaform\form\webeditor\editor\plugins

目录下，新建一个自定的控件文件夹（命名规范：要和一中注册的名字相同，且大小写区分）

![img](images/field7.png) 

2.该文件夹里面可以放关于该控件的相关信息

1) 配置js：fckplugin.js

![img](images/field8.png) 

2) 控件图标：test.gif

3) 控件实体文件：myapps_test.jsp

Ok方法

InitDocument方法

.....

classname：cn.myapps.runtime.dynaform.form.ejb.test

如下图所示：

![img](images/field9.png) 

3.添加对应的java类对象

![img](images/field10.png) 

## 四、 右击菜单的添加

在obpm-designer-web\core\dynaform\form\webeditor\editor\_source\internals\fck_contextmenu.js文件下

if ( tagName == 'IMG' && classname=="cn.myapps.core.dynaform.form.ejb.Test"){

​		 menu.AddSeparator() ;

​		 menu.AddItem( 'test', FCKLang.testProp, 37 ) ;

}

如下图所示：

![img](images/field11.png) 

## 五、最后一步

预览图：

![img](images/field12.png)