自定义CKEditor工具栏
>首页 -> 社会专题 -> 硬件网络 2012-10-09 来源: 作者: 【】 浏览:722

CKEditor中的工具栏默认显示所有功能按钮。出于安全的原因、或者是简化的原因,需要对这个工具栏进行自定义设置。CKEditor工具栏自定义配置非常简单,按下述步骤完成即可(假设已经完成CKEditor的安装):

编辑ckeditor目录下的的config.js文件,默认的是下面的工具栏代码(特别说明:config.js中没有下面的代码,默认就是显示全部按钮,但如果对工具栏进行自定义,最好的办法还是把该代码全部复制粘贴,然后再删除一个个不需要的按钮)

config.toolbar = 'Full';   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' ] } ];   config.toolbar_Basic = [ ['Bold', 'Italic', '-','NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ];

注意工具按钮是分组的,一个name内的大括号就是一个工具按钮分组,items后边是具体的按钮,我们可以对这些内容进行适当的删除。比如将config.js做成如下的内容:

CKEDITOR.editorConfig = function( config ) { config.toolbar = 'MyToolbar';  config.toolbar_MyToolbar = [ { name: 'document', items : ['Source','NewPage','Preview' ] }, { name: 'basicstyles', items : ['Bold','Italic','Strike','-','RemoveFormat' ] }, { name: 'clipboard', items : ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, { name:'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] }, '/', { name:'styles', items : [ 'Styles','Format' ] }, { name: 'paragraph', items : ['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] }, { name:'insert', items :['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ,'Iframe'] }, { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, { name: 'tools', items :[ 'Maximize','-','About' ] } ]; };

上代码创建的CKEditor工具栏就如下图所示:

工具栏的定义英汉对照说明:

Source = 源码模式

-

Save = 保存(提交表单)

NewPage = 新建

Preview = 预览

- = 分割线

Templates = 模板

Cut = 剪切

Copy = 复制

Paste = 粘贴

PasteText = 粘贴为无格式文本

PasteFromWord = 从 MS WORD 粘贴

-

Print = 打印

SpellChecker = 拼写检查

Scayt = 即时拼写检查

Undo = 撤销

Redo = 重做

-

Find = 查找

Replace = 替换

-

SelectAll = 全选

RemoveFormat = 清除格式

Form = 表单

Checkbox = 复选框

Radio = 单选框

TextField = 单行文本

Textarea = 多行文本

Select = 列表/菜单

Button = 按钮

ImageButton = 图片按钮

HiddenField = 隐藏域

/

Bold = 加粗

Italic = 倾斜

Underline = 下划线

Strike = 删除线

-

Subscript = 下标

Superscript = 上标

NumberedList = 编号列表

BulletedList = 项目列表

-

Outdent = 减少缩进量

Indent = 增加缩进量

Blockquote = 块引用

CreateDiv = 创建DIV容器

JustifyLeft = 左对齐

JustifyCenter = 居中

JustifyRight = 右对齐

JustifyBlock = 两端对齐

BidiLtr = 文字方向从左到右

BidiRtl = 文字方向从右到左

Link = 插入/编辑超链接(上传文件)

Unlink = 取消超链接

Anchor = 插入/编辑锚点链接

Image = 图像(上传)

Flash = 动画(上传)

Table = 表格

HorizontalRule = 插入水平线

Smiley = 插入表情

SpecialChar = 插入特殊符号

PageBreak = 插入分页符

/

Styles = 样式快捷方式

Format = 文本格式

Font = 字体

FontSize = 文字大小

TextColor = 文字颜色

BGColor = 背景颜色

Maximize = 全屏编辑模式

ShowBlocks = 显示区块

-

About = 显示关于

您看到此篇文章时的感受是:
Tags: 责任编辑:佚名
免责申明: 除原创及很少部分因网文图片遗失而补存外,本站不存储任何有版权的内容。你看到的文章和信息及网址索引均由机器采集自互联网,由于时间不同,内容可能完全不同,请勿拿本网内容及网址索引用于交易及作为事实依据,仅限参考,不会自行判断者请勿接受本站信息,本网转载,并不意味着赞同其观点或证实其内容的真实性.如涉及版权等问题,请立即联系管理员,我们会予以更改或删除,保证您的权利.对使用本网站信息和服务所引起的后果,本网站不作任何承诺.
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论:0条】 【关闭】 【返回顶部
更多
上一篇隐藏fckeditor 工具栏 下一篇Js FCKeditor的值获取和修改的代..
密码: (新用户注册)

最新文章

图片主题

热门文章

推荐文章

相关文章

便民服务

手机扫描

空间赞助

快速互动

论坛互动
讨论留言

有事联系

有哪个那个什么的,赶紧点这里给DOVE发消息

统计联系

MAIL:gnlt@Dovechina.com
正在线上:1360

版权与建议

任何你想说的