首页 > 代码库 > CKEditor学习笔记2（CKEditor基本配置修改）

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

2024-07-02 08:29:48   229人阅读

第二篇，围绕这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整合。


联系
我们