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实现的listview效果
Apr 28 Javascript
JS之小练习代码
Oct 12 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
RxJS的入门指引和初步应用
Jun 15 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和MySql来与ODBC数据连接
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
深入理解js promise chain
2016/05/05 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
Python实现的选择排序算法示例
2017/11/29 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
九年级化学教学反思
2014/01/28 职场文书
房屋买卖协议书
2014/04/10 职场文书
主题实践活动总结
2014/05/08 职场文书
教师创先争优承诺书
2015/04/27 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
nginx之内存池的实现
2022/06/28 Servers