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 相关文章推荐
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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二维数组排序简单实现方法
2016/02/14 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Vue性能优化的方法
2020/07/30 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
Java的基础面试题附答案
2016/01/10 面试题
.net面试题
2015/12/22 面试题
汽车装潢店创业计划书范文
2014/02/05 职场文书
测控技术自荐信
2014/06/05 职场文书
授权委托书公证
2014/09/14 职场文书