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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
JS检测图片大小的实例
Aug 21 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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 Cookie学习笔记
2016/08/23 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
快速入门python学习笔记
2017/12/06 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python属于解释语言吗
2020/06/11 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python实现壁纸下载与轮换
2020/10/19 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
动员大会主持词
2014/03/20 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
七一慰问简报
2015/07/20 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Python日志模块logging用法
2022/06/05 Python