码迷,mamicode.com
首页 > 其他好文 > 详细

CKEditor学习笔记2(CKEditor基本配置修改)

时间:2014-05-01 18:27:08      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:ckeditor   ckeditor配置   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基本配置修改),码迷,mamicode.com

CKEditor学习笔记2(CKEditor基本配置修改)

标签:ckeditor   ckeditor配置   ckeditor表情处理   

原文地址:http://blog.csdn.net/com185272358/article/details/24812627

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!