CKEditor学习笔记2（CKEditor基本配置修改）

第二篇，围绕这5个问题进行基本配置：
1、自定义ToolbarSet,去掉一些功能
2、加上几种常用的字体
3、修改“回车”和“Shift+回车”的换行行为
4、修改编辑区样式文件
5、更换表情图片

这些信息的配置，可以通过config.js文件进行，当然也可以创建自己的配置文件。
可以参考我的步骤:
1、首先创建一个目录custom，接着在该目录内新建一个myConfig.js配置文件。

2、JavaScript调用方式二（上一篇内容），修改为：

CKEDITOR.replace( 'editor1',
{customConfig : "/CKEditorSample/custom/myConfig.js"
});

有兴趣的可以用JSP调用标签来指定配置文件。。。

好了，该切入主题了，哈哈。
1、首先了解一下，CKEditor提供的ToolbarSet
基本工具集

CKEDITOR.config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

完全工具集（当然功能很全，我们可以删除不需要的功能）

CKEDITOR.config.toolbar_Full =
[
{ name: 'document',     items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard',    items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing',      items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms',        items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles',  items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph',    items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links',        items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert',       items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles',       items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors',       items : [ 'TextColor','BGColor' ] },
{ name: 'tools',        items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

Note that this setting is composed by "toolbar_name" added by the toolbar name。（这是文档上摘录的一句话）
它说，工具集的名称以toolbar_为前缀+工具集名称，好了，该创建属于自己的工具集了。
注意：删除的时候，不要破坏了它的结构。

myConfig.js

CKEDITOR.editorConfig = function( config )
{
}

myConfig.js（任务1：自定义ToolbarSet,去掉一些功能）

config.toolbar_mytool =
[
{ name: 'document',     items : [ 'Source','-','Save'] },
{ name: 'basicstyles',  items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph',    items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links',        items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert',       items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles',       items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors',       items : [ 'TextColor','BGColor' ] },
{ name: 'tools',        items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

myConfig.js（任务2：加上几种常用的字体）

//字体编辑时的字符集 可以添加常用的中文字符：宋体、楷体、黑体等
config.font_names = "Arial;Times New Roman;Verdana";

myConfig.js（任务3：修改“回车”和“Shift+回车”的换行行为）

config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;

myConfig.js（任务4：修改编辑区样式文件）
首先有必须了解一下，概念。
例如，现在有一个论坛网站，你可以引用别人的句子，再添加自己的评论（这时应该区分别人的评论和自己的评论吧，所以说需要给别人的评论内容添加样式，但是这时有个问题（你页面写编写的样式，CKEditor编辑区不鸟你，哈哈），这时这个修改编辑区样式就有用了。
这时也有两种做法
方式一：
1、找到ckeditor目录下的contents.css文件，将需要用到的样式添加进去（当前如果你这样做，可能存在代码的重复性哦）
2、myConfig.js添加配置

config.contentsCss = "ckeditor/contents.css"

方式二：
1、在ckeditor目录下创建一个css文件夹，用于放置CKEditor编辑区使用到的样式，新建一个myCss.css。
2、contents.css文件内，通过@import url(css/myCss.css)引入自己的css文件。
3、myConfig.js添加配置

config.contentsCss = "ckeditor/contents.css"

CKEditor默认提供的表情图片有点少，可以通过配置，添加更多的表情图片，满足需求。
阿里旺旺表情图片
myConfig.js（任务：5更换表情图片）
首先将下载目录，放到ckeditor/plugins/smiley目录下。

//表情路径
config.smiley_path = CKEDITOR.basePath + 'plugins/smiley/wangwang/';
//表情图片
config.smiley_images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif','80.gif','81.gif','82.gif','83.gif','84.gif','85.gif'];
//单行表情个数
config.smiley_columns = 8;

如果你做到了这里，恭喜你了，胜利不远了。
现在表情框，因为没有设置最大宽度、最大高度，滚动条效果，导致效果不咋的，解决这个问题很Easy，只需要修改一下CSS文件（该解决方案感觉不好，可惜找不到其它解决方案。。。）
ckeditor/skins/kama/dialog.css文件添加
.cke_dialog_ui_html{overflow-y:scroll; overflow-x:hidden;max-width:650px;max-height:455px;}
希望大家能看懂了，我的描述吧。下一篇将提到CKEditor+CKFind forJava整合。

CKEditor学习笔记2（CKEditor基本配置修改）相关推荐

golang学习笔记8 beego参数配置打包linux命令
golang学习笔记8 beego参数配置打包linux命令参数配置 - beego: 简约 & 强大并存的 Go 应用框架 https://beego.me/docs/mvc/contr ...
oracle dg 增加redo组,【学习笔记】Oracle Data Guard 修改dataguard主库redo组数和大小
天萃荷净运维DBA反映检查到Oracle DataGuard环境redo日志较小,总结一下修改dataguard主库redo组数和大小方法在一个dg环境中,配置的是实时同步,需要增加主库的redo ...
ESP32_WIFI Mesh学习笔记1---Ardino IDE 环境配置
ESP_WIFI MESH学习笔记1-Ardino IDE 环境配置文章目录 ESP_WIFI MESH学习笔记1---Ardino IDE 环境配置前言一.Arduino IDE配置问题二. ...
Apollo学习笔记3-定位模块配置
Apollo学习笔记3-定位模块配置环境介绍导航设备参数配置导航设备配置 (1)杆臂配置 (2)GNSS 航向配置 (3)导航模式配置 (4) USB 接口输出设置 (5)网口配置 (6) PP ...
oracle修改asm参数文件,学习笔记:Oracle RAC参数文件管理修改创建asm中的spfile文件...
天萃荷净 Oracle rac创建修改asm中的spfile文件内容 create spfile to asm --查看sid SQL> show parameter instance_name ...
ROS学习笔记一：安装配置ROS环境
ROS学习笔记一:安装配置ROS环境在安装完成ROS indigo之后,需要查看环境变量是否设置正确,并通过创建一个简单的实例来验证ROS能否正常运行. 1 查看环境变量在ROS的安装过程中,我们 ...
mesos 学习笔记-- mesos安装和配置
2019独角兽企业重金招聘Python工程师标准>>> mesos 学习笔记-- mesos安装和配置博客分类: 架构 mesos 参考资料: 官方文档:http://mesos. ...
多路径配置udev_学习笔记:Linux多路径配置 multipath实现设备用户组绑定详细设置...
天萃荷净 Linux多路径软件配置,通过multipath实现设备用户组绑定详细设置现在的Linux系统中,很多都会使用系统自带的multipath多路径软件,在以前的版本中,我们一般通过multi ...
ZED相机学习笔记1——安装与配置（Win10 + Python）
系列文章目录 ZED相机学习笔记1--安装与配置(Win10 + Python) 文章目录系列文章目录前言一.ZED2 相机二.配置ZED相机环境 1.安装CUDA 2.安装ZED-SDK 3 ...

CKEditor学习笔记2（CKEditor基本配置修改）

CKEditor学习笔记2（CKEditor基本配置修改）相关推荐

最新文章

热门文章