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

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

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

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

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

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

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

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

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

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

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

补充:

官方给出的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富文本编辑器开发有所帮助。

(0)

相关推荐

  • CKEditor网页编辑器 中文使用说明

    安装 安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成. 1.从我们的网站http://www.jb51.net/codes/21295.html上下载CKEditor的最新版本. 2.将下载的文件解压到你网站目录下的"ckeditor"文件夹里. 注意:你也可以将这些文件放在你网站的任何一个地方,默认为"ckeditor". 测试你的安装 编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页,请查看"_samples&q

  • 网页编辑器FCKeditor 2.6.4精简配置方法

    上传目录请在fckeditoreditorfilemanagerconnectorsaspconfig.asp中设置 Dim ConfigUserFilesPathConfigUserFilesPath = "/userfiles/" 中文配置说明:因为下载下来的压缩包里面有包含很多在我们使用时,用不到的,不删除也行.看个人喜好下面以PHP为例,进行程序瘦身 删除所有"_"开头的文件和文件夹 删除FCKeditor的目录下: fckeditor.afpfckedit

  • PHP CKEditor 上传图片实现代码

    我花了一个下午的时间,自己用PHP脚本写了一个处理上传文件的脚本代码,没有做更多的安全处理,希望对大家有用. 首先,在你的config.js文件里添加如下代码: 复制代码 代码如下: CKEDITOR.editorConfig = function( config ) { config.filebrowserImageUploadUrl = './upload.php?type=img'; config.filebrowserFlashUploadUrl = './upload.php?type

  • php版本CKEditor 4和CKFinder安装及配置方法图文教程

    本文实例讲述了php版本CKEditor 4和CKFinder安装及配置方法.分享给大家供大家参考,具体如下: 下载并解压CKEditor 4和CKFinder CKEditor 4下载地址:https://ckeditor.com/cke4/builder,选择自定义的版本,记得加上中文语言包 CKFinder下载地址:https://download.cksource.com/CKFinder/CKFinder%20for%20PHP/3.4.4/ckfinder_php_3.4.4.zip

  • 手把手教你 CKEDITOR 4 扩展插件制作

    本文实例讲述了CKEDITOR 4 扩展插件制作.分享给大家供大家参考,具体如下: 今天让我们来探索一下ckeditor的扩展功能,换句话说就是自定义按钮,以及点击按钮之后实现的功能. 要实现自定义按钮,我们要做几个事情: 1.准备一个图标,最好是16*16大小的png格式图片,你没有的话,姜哥帮你准备了一张. 2.在plugins目录下建立我们和自定义插件同名的目录,并且在里面建立一个叫plugin.js的文件. 3.在我们自己的插件目录中,建立一个dialogs目录,并且在里面新建一个与我们

  • 限制ckeditor上传图片文件大小的方法

    一种可以通过修改PHP.INI配置文件上传大小来限制,另一种方法只能手动修改Fckeditor源码,方法如下打开editor/filemanager/connectors/php目录下config.php,创建Config变量设置上传图片大小,这里以KB为单位1.$Config['MaxImageSize']= '1024';2.打开editor/filemanager/connectors/php目录下commands.php,找到 复制代码 代码如下: if ( isset( $Config

  • 手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

    本文实例讲述了CKEDITOR 4 实现Dialog 内嵌 IFrame操作.分享给大家供大家参考,具体如下: 在上一篇博文<CKEDITOR 4 扩展插件制作>中,姜哥跟大家探讨了在ckeditor中添加dialog,已经添加dialog的一些控件,最终将控件中的值插入到ckeditor编辑器中的过程.但是实际上,我们更多的应用,还是会在dialog中,添加iframe组件,直接引用外部网页,以实现更为复杂的功能.今天姜哥就和大家一起分享一下,这个开发过程. 继续我们上一个工程中的例子,我们

  • CKEditor4配置与开发详细中文说明文档

    一.CKEditor4安装 安装CKEditor 是很容易的.选择合适的过程(新安装或升级),按下面描述的步骤安装. 1.新安装 第一次安装CKEditor,按如下方式进行: 1) 从CKEditor 网站:http://ckeditor.com/download下载最新版本的CKEditor .  2) 将下载的文档解压到你的website根目录下的ckeditor 目录中.你可以将文档放在你的website的任意路径中.ckeditor 目录是缺省目录. 2.升级 要升级现有的CKEdito

  • ckeditor的使用和配置方法分享

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo

  • 通过Fckeditor把图片上传到独立图片服务器的方法

    我大概思考了下有如下几种方法可以解决: 1.在图片服务器上开通FTP,人为添加图片地址即可,但不方便,特别是在可视编辑器中看图还的多一部操作. 2.在图片服务器上开通FTP,并提高IIS执行dosShell访问ftp,但是不安全. 3.在图片服务器上开通IIS,WEB后台直接访问(还是存在在编辑器中不方便查看的问题,但可以用js控制上传后自动追加到HTML编辑窗口中) 4.利用现有在线编辑器的上传程序来实现. 第三,四种方法比较靠谱,但还需要解决跨域问题,第三种还要单独写程序,改动比较大,用第四

  • CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】

    本文实例讲述了CKEditor 4.4.1 添加代码高亮显示插件功能.分享给大家供大家参考,具体如下: 随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件.下面就来介绍如何使用Code Snippet这个代码高亮插件.本文还介绍了CKEditor中如何安装Code Snippet插件. 新版本附加信息 CKEdi

随机推荐