如何對富文本編輯器（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