我们在项目开发过程中,会经常使用到富文本编辑器。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

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

  1. 【前端】wangEditor(富文本编辑器) 简易使用示例

    转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...

  2. 【重点突破】—— React实现富文本编辑器

    前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.   一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...

  3. [译] 通过 contentEditable 属性创建一个所见即所得的编辑器(富文本编辑器)

    译者注 这只是一篇入门教程,介绍了一些基础知识,仅供参考,切不可因此觉得富文本编辑器很简单. 创建富文本编辑器是一个非常复杂的工程,需要考虑到方方面面,也有很多坑(请参考原文第一条评论). 为免误导大 ...

  4. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript Iframe富文本编辑器中的光标定位

    最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...

  7. uniapp - 富文本编辑器editor(仅支持App和微信小程序)

    uniapp - editor富文本编辑器用法示例 丢几个图,用心看下去(-.-) 这里使用了https://ext.dcloud.net.cn/plugin?id=412 插件,用于选择字体颜色.其 ...

  8. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  9. 在线富文本编辑器FckEditor配置(.Net Framework 3.5)

    进入FCKeditor文件夹,编辑 fckconfig.js 文件.1.上传设置  .  var _FileBrowserLanguage         = 'php' ;         // a ...

随机推荐

  1. Vue.js随笔二(新建路由+component+添加样式+变量的显示)

    创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...

  2. Scrapy的安装--------Windows、linux、mac等操作平台

    Scrapy安装 Scrapy的安装有多种方式,它支持Python2.7版本及以上或者是Python3.3版本及以上.下面来说py3环境下,scrapy的安装过程. Scrapy依赖的库比较多,至少需 ...

  3. 「LibreOJ β Round #4」求和

    https://loj.ac/problem/528 1            ,  d =1 μ(d)=   (-1)^k   ,  d=p1*p2*p3*^pk  pi为素数 0         ...

  4. 遍历hashmap

    转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: Map map = new HashM ...

  5. 《JavaScript 实战》:实现拖放(Drag & Drop)效果

    拖放效果,也叫拖拽.拖动,学名Drag-and-drop ,是最常见的js特效之一.如果忽略很多细节,实现起来很简单,但往往细节才是难点所在.这个程序的原型是在做图片切割效果的时候做出来的,那时参考了 ...

  6. CURL 简介【转载】

    转自http://hancang2010.blog.163.com/blog/static/1824602612010711104018261/ 0) 头信息 curl命令查询服务器头信息 curl ...

  7. Spark 基本架构及原理

    转载自: http://blog.csdn.net/swing2008/article/details/60869183 转自:http://www.cnblogs.com/tgzhu/p/58183 ...

  8. amcharts的一些用法

    function chartdiv2() { var chart; var chartData = [ { "month" : "2015-08", " ...

  9. 聊聊spring的那些扩展机制

    1.背景 慎入:本文将会有大量代码出入. 在看一些框架源码的时候,可以看见他们很多都会和Spring去做结合.举个例子dubbo的配置: 很多人其实配置了也就配置了,没有去过多的思考:为什么这么配置s ...

  10. 64_p10

    python3-matplotlib-qt4-2.0.0-2.fc26.2.x86_64.rpm 05-Apr-2017 09:54 29438 python3-matplotlib-qt5-2.0. ...