ckeditor 工具栏配置

转载 2017年01月03日 12:34:57
toolbar的配置,有两个Full和Basic,默认是Full,可以通过上面的config.toobar="Basic";设置成简单模式。插件本身这两种模式的定义如下

注意工具按钮是分组的,一个name内的大括号就是一个工具按钮分组,items后边是具体的按钮,“/”表示工具栏换行,“-”表示工具图标之间的中隔线“|”

[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. config.toolbar = 'Full';  
  2.    
  3. config.toolbar_Full =  
  4. [  
  5.     { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },  
  6.     { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },  
  7.     { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker''Scayt' ] },  
  8.     { name: 'forms', items : [ 'Form''Checkbox''Radio''TextField''Textarea''Select''Button''ImageButton',   
  9.         'HiddenField' ] },  
  10.     '/',  
  11.     { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },  
  12.     { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',  
  13.     '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },  
  14.     { name: 'links', items : [ 'Link','Unlink','Anchor' ] },  
  15.     { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },  
  16.     '/',  
  17.     { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },  
  18.     { name: 'colors', items : [ 'TextColor','BGColor' ] },  
  19.     { name: 'tools', items : [ 'Maximize''ShowBlocks','-','About' ] }  
  20. ];  
  21.    
  22. config.toolbar_Basic =  
  23. [  
  24.     ['Bold''Italic''-''NumberedList''BulletedList''-''Link''Unlink','-','About']  
  25. ];  


它们和图标是对应的


例如上图中Basic模式中的几个按钮就对应着

 

[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. ['Bold''Italic''-''NumberedList''BulletedList''-''Link''Unlink','-','About']  

所以要自己定义想显示的图标,就得照着图,找对应的字符串是什么

然后在config.js中配置,我自己配置的代码如下:

[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. CKEDITOR.editorConfig = function (config) {  
  2.     // Define changes to default configuration here. For example:  
  3.     // config.language = 'fr';  
  4.     // config.uiColor = '#AADC6E';  
  5.     config.width = 550;  
  6.     config.toolbar = 'MyToolbar';  
  7.   
  8.     config.toolbar_MyToolbar =  
  9.     [  
  10.         ['Undo''Redo''-''SelectAll''RemoveFormat'],  
  11.         ['NumberedList''BulletedList''-''Outdent''Indent''Blockquote''JustifyLeft''JustifyCenter''JustifyRight''JustifyBlock'],  
  12.         ['Maximize'],  
  13.         '/',  
  14.         ['Format''Font''FontSize'],  
  15.         ['TextColor''BGColor'],  
  16.         ['Bold''Italic''Underline''Strike''-''Subscript''Superscript']  
  17.     ];  
  18. };  


效果如下图:

工具栏的定义英汉对照说明:
-
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 = 显示关于

Source = 源码模式

CKEditor在线编辑器配置工具栏

CKEditor官方提供了两种可以直接配置使用的工具栏,“Basic”和“Full”。在CKEditor官网的下载页面中有三种分别包含不同功能插件的包供下载,分别是基本包(包含了17个插件)、标准包(...
  • hugh282003
  • hugh282003
  • 2014年03月13日 23:23
  • 3303

ckeditor4.3工具栏自定义配置

CKEditor中的工具栏默认显示所有功能按钮。出于安全的原因、或者是简化的原因,需要对这个工具栏进行自定义设置。CKEditor工具栏自定义配置非常简单。   编辑ckeditor目录下的的con...
  • u011765218
  • u011765218
  • 2015年02月03日 12:35
  • 1759

CKEditor工具栏全部按钮名称

上面是CKEditor的工具栏的全部按钮,按照顺序对应的参数名分别如下(参数太多,我也看花眼了,如果发现不正确的请联系我,我再改正)。 Js代码 config.toolbar = [ ['...
  • lmmilove
  • lmmilove
  • 2014年08月18日 10:01
  • 3959

CKEditor去掉默认的<p>的处理

CKEditor在使用的时候,编辑框中总是默认带有P元素,如何去掉呢,请看下面: 1、在ckeditor里的config.js中添加 config.enterMode=1 回车的时候增加的...
  • zhengbo0
  • zhengbo0
  • 2013年11月14日 09:46
  • 1126

ckeditor 禁用和工具栏隐藏

1.工具栏隐藏 CKEDITOR.replace('txtEditMsg', { toolbarCanCollapse: true, toolbarStartupExpanded: false,...
  • u013414461
  • u013414461
  • 2014年02月08日 15:04
  • 3513

ckeditor去掉按钮

在ckeditor/config.js中,配置 config.toolbar = [                   [ 'Source', '-', 'Preview', '-', 'Te...
  • zcbyzcb
  • zcbyzcb
  • 2015年10月11日 10:15
  • 1187

js控制ckeditor自动隐藏工具栏

CKEDITOR.replace( 'news.content',{toolbarStartupExpanded:false,toolbar :'Basic',height:150});
  • DXLDeHuaLi
  • DXLDeHuaLi
  • 2014年05月11日 11:26
  • 1689

ckeditor 工具栏配置

toolbar的配置,有两个Full和Basic,默认是Full,可以通过上面的config.toobar="Basic";设置成简单模式。插件本身这两种模式的定义如下 注意工具按钮是分组的,一...
  • zh_fn
  • zh_fn
  • 2014年03月18日 12:26
  • 3635

ckeditor详细配置与使用说明

一、使用方法: 1、在页面中引入ckeditor核心文件ckeditor.js  cript" src="ckeditor/ckeditor.js"> 2、在使用编辑器的地方插入HT...
  • Gavid0124
  • Gavid0124
  • 2016年08月02日 11:00
  • 6860

如何在不同的页面中设置CKEditor的高度和宽度

$(function () {     CKEDITOR.replace('txtEditMsg', { height: '240px', width: '552px' }); });
  • limlimlim
  • limlimlim
  • 2013年12月03日 09:35
  • 13545
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ckeditor 工具栏配置
举报原因:
原因补充:

(最多只允许输入30个字)