如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

我们在项目开发过程中,会经常使用到富文本编辑器。GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Html Editor即可。

如下图所示:

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

运行效果如下:

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

GeneXus的富文本编辑器集成的是CKEditor 4,而CKEditor是非常强大且可以扩展很多功能的,那么在GeneXus中如何对富文本编辑器进行功能扩展呢?

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

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

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

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

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

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

CKEDITOR.config.extraPlugins = 'lineheight';

将文件放在CKeditor控件目录下,如下图所示:

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

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

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

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

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

除此之外呢,我再补充说明几点:

1)  我们是可以一次添加很多插件的,只需要在myconfig.js文件中加入对应的配置代码就可以了,CKEditor有很多的扩展功能,大家可以根据自己的需要进行下载使用;

2)  在实际使用过程中,我会把myconfig.js文件放在GeneXus的文件中,这样此js文件就会自动复制到指定的目录,就不用担心将来忘记了。如下图:

如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

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

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

  如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

  ●在语言包中,加入需要翻译的中文(参考它自带的其他语言文件格式,修改一下即可)

  如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

此篇文章参考的Wiki链接:

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

上一篇:[SQL Server]无法创建 SSIS 运行时对象,请验证 DTS.dll 是否可用及是否已注册


下一篇:mongodb集群配置分片集群