如何对富文本编辑器（FCK Html Editor）的工具栏进行扩展？

咱们在项目开发过程当中，会常常使用到富文本编辑器。GeneXus内置的富文本编辑器FCK Html Editor使用起来很是方便，只要将页面变量的控件类型（Control Type）选择为FCK Html Editor便可。

以下图所示：

 

运行效果以下：

 

 

GeneXus的富文本编辑器集成的是CKEditor 4，而CKEditor是很是强大且能够扩展不少功能的，那么在GeneXus中如何对富文本编辑器进行功能扩展呢？

咱们以一个实例来讲明吧。如今默认的富文本编辑器是没有设置行高的这个功能的，咱们在CKEditor是能够搜索到Line Height（https://ckeditor.com/cke4/addon/lineheight）这个插件的，接下来咱们看一下如何将它加入到GeneXus的富文本编辑器中。

 

 

1. 下载Line Height插件，而后复制到代码目录下CKEditor控件的plugins文件夹中。

例如，我选择的Java环境进行测试，以下图所示。

 

 

2. 新建一个js文件，例如myconfig.js，里面添加代码：

CKEDITOR.config.extraPlugins = 'lineheight';

将文件放在CKeditor控件目录下，以下图所示：

 

 

3. 在FCK Html Editor控件的Custom Configuration属性关联刚刚创建的js文件。

 

 

4. 而后运行就能够啦，运行效果以下。能够看到咱们页面上的富文本编辑器的工具栏中就多了一个行间距的设置功能。

 

 

除此以外呢，我再补充说明几点：

1）  咱们是能够一次添加不少插件的，只须要在myconfig.js文件中加入对应的配置代码就能够了，CKEditor有不少的扩展功能，你们能够根据本身的须要进行下载使用；

2）  在实际使用过程当中，我会把myconfig.js文件放在GeneXus的文件中，这样此js文件就会自动复制到指定的目录，就不用担忧未来忘记了。以下图：

 

3）  上面例子中的LineHeight插件，我下载下来后，默认显示是英语的，我看了一下源代码，加入了中文，供你们参考。

　　●在LineHeight对应的plugin.js文件中，加入中文标识

 　　

　　●在语言包中，加入须要翻译的中文（参考它自带的其余语言文件格式，修改一下便可）

 　　

 

此篇文章参考的Wiki连接：

https://wiki.genexus.com/commwiki/servlet/wiki?27961,Custom%20configuration%20of%20FCK%20HTML%20Editor