CKeditor4 字体颜色功能配置方法教程


Posted in Javascript onJune 26, 2019

本文实例讲述了CKeditor4 字体颜色功能配置方法。分享给大家供大家参考,具体如下:

今天动手ckeditor编辑器的时候发现工具栏上并没有可以更改字体颜色和背景颜色的按钮,所以我上网搜了下,网上特别多config.js文件配置的代码了,看得眼花缭乱的我选择把全部代码都复制下来。结果当然是没用的……一开始我还能有文本框、工具栏,到后来就变成什么都没有了。

后来我找到了ckeditor的文档:https://ckeditor.com/docs/index.html,找到里面的指南

CKeditor4 字体颜色功能配置方法教程

在搜索框里搜索text color ,然后就出现我想要的东西了

CKeditor4 字体颜色功能配置方法教程

点击color button 来到https://ckeditor.com/cke4/addon/colorbutton页面,会跳出下面这个东西,滑到下面download它

CKeditor4 字体颜色功能配置方法教程

CKeditor4 字体颜色功能配置方法教程

CKeditor4 字体颜色功能配置方法教程

注意 这下面有两个需要添加的依赖(面板按钮和UI按钮),然后点进去依样照葫芦的下载另外两个依赖 ,解压缩,放在ckeditor目录下的plugins目录里

CKeditor4 字体颜色功能配置方法教程

这里有个注意的点:你要确定你一点开目录就能看到.js的配置文件,要不然是网页看不到文本框的

然后 在config.js文件里加上:

config.extraPlugins = 'button,panelbutton,colorbutton';

大功告成!这就有我要的设置文本颜色和背景颜色的工具了

CKeditor4 字体颜色功能配置方法教程

补充:

官方给出的Demo在线演示,配置字体颜色扩展是在当前页面的js调用中实现的(而不是config.js文件中实现),代码如下:

<script data-sample="1">
  CKEDITOR.replace( 'editor1', {
    height: 250,
    extraPlugins: 'colorbutton,colordialog'
  } );
</script>
<script data-sample="2">
  CKEDITOR.replace( 'editor2', {
    height: 250,
    extraPlugins: 'colorbutton',
    colorButton_colors: 'CF5D4E,454545,FFF,CCC,DDD,CCEAEE,66AB16',
    colorButton_enableAutomatic: false
  } );
</script>

希望本文所述对大家CKEDitor富文本编辑器开发有所帮助。

Javascript 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 #Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 #Javascript
亲自动手实现vue日历控件
Jun 26 #Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 #Javascript
ES6 Generator函数的应用实例分析
Jun 26 #Javascript
vue实现简单的日历效果
Sep 24 #Javascript
vue实现记事本功能
Jun 26 #Javascript
You might like
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php依赖注入知识点详解
2019/09/23 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
python实现文件的分割与合并
2019/08/29 Python
Python实现快速排序的方法详解
2019/10/25 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
中学实习教师自我鉴定
2013/12/12 职场文书
法律系毕业生求职信
2014/05/28 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2014小学年度工作总结
2014/12/20 职场文书
家属慰问信
2015/02/14 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
让文件路径提取变得更简单的Python Path库
2021/05/27 Python