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请求的代码
Sep 02 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
bootstrap表单示例代码分享
May 18 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
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缓存类代码(附详细说明)
2011/06/09 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
PHP7修改的函数
2021/03/09 PHP
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
vue 如何使用递归组件
2020/10/23 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python代码过长的换行方法
2018/07/19 Python
python异步Web框架sanic的实现
2020/04/27 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
成人教育自我鉴定
2013/11/01 职场文书
理想演讲稿范文
2014/05/21 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
个人务虚会发言材料
2014/10/20 职场文书
泰山导游词
2015/02/02 职场文书
工程款催款函
2015/06/24 职场文书
获奖感言范文
2015/07/31 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL