`

ckeditor工具栏配置

阅读更多
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 = 显示关于





分享到:
评论

相关推荐

    CKEditor 应用 源码 JSP

    内附JSP中使用CKEditor源程序实例以及CKEditor配置使用说明,以及怎么选择性的使用工具栏的条目,设置样式风格,大家可以参考,希望对大家有帮助

    CKEditor4配置与开发详细中文说明文档

    一、CKEditor4安装 安装CKEditor 是很容易的。选择合适的过程(新安装或升级),按下面描述的步骤安装。 1、新安装 第一次安装CKEditor,按如下方式进行: 1) 从CKEditor 网站:http://ckeditor.com/download...

    CKeditor for joomla1.7 v3.6.2.rar

    简单的自定义拖放工具栏。 内置链接浏览器直接链接到您的Joomla的元素。 始终最新的 CKEditor版本,其中包括 : 从Word中粘贴功能强大的支持。 完全可配置和强大的造型系统 。 高品质的XHTML输出生成 。 全部(可用...

    Ckeditor 3.62编辑器和CkFinder 2.1完美组合案例

    工具栏简化处理(只留常用工具)。 总之做了一个可以直接拿来使用的案例。 还有关于中文出现乱码的问题,如果你的图片上传出现乱码请保证你的程序编码是UTF-8的因为,CKfinder的是UTF-8编码的。 好了希望对大家有用...

    ckeditor5-custom-element:在ckeditor5中插入自定义元素(html标记)

    ckeditor5-自定义元素关于这是的插件。 它允许在编辑器中添加自定义元素。 创建的元素的html转换如下所...导入工具栏图标(可选) import Icon1 from 'path-to-icon/iconfile.svg';配置插件假设构建基于经典编辑器: e

    CKeditor4 字体颜色功能配置方法教程

    今天动手ckeditor编辑器的时候发现工具栏上并没有可以更改字体颜色和背景颜色的按钮,所以我上网搜了下,网上特别多config.js文件配置的代码了,看得眼花缭乱的我选择把全部代码都复制下来。结果当然是没用的……一...

    CKeditor for joomla 1.5 v3.6.3

    简单的自定义拖放工具栏。内置链接浏览器直接链接到您的Joomla的元素。始终最新的 CKEditor版本,其中包括 :从Word中粘贴功能强大的支持。完全可配置和强大的造型系统 。高品质的XHTML输出生成 。全部(可用)整个...

    CKeditor for joomla 2.5 v3.6.3

    简单的自定义拖放工具栏。内置链接浏览器直接链接到您的Joomla的元素。始终最新的 CKEditor版本,其中包括 :从Word中粘贴功能强大的支持。完全可配置和强大的造型系统 。高品质的XHTML输出生成 。全部(可用)整个...

    CKeditor for joomla1.7 v3.6.3.zip

    简单的自定义拖放工具栏。 内置链接浏览器直接链接到您的Joomla的元素。 始终最新的 CKEditor版本,其中包括 : 从Word中粘贴功能强大的支持。 完全可配置和强大的造型系统 。 高品质的XHTML输出生成 。 全部...

    ckeditor5-custom-build:定制的ckeditor5

    配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器缓存有...

    ckeditor5-emoji:一个简单的插件,可在hackathon期间创建的Unicode表情符号插入CKEditor 5中

    CKEditor 5表情符号功能 该软件包为CKEditor 5实现了表情符号功能。 该插件是在黑客马拉松期间创建的,它大致基于链接插件的源代码。 它基本上将Unicode表情...emoji –工具栏项目(按钮) 开发环境 要启用该插件,您

    ckeditor5:经典CKEditor

    诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器缓存有任何...

    ckeditor:自定义CKEditor v4

    配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器...

    ckeditor

    诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器缓存有...

    statamic-ckeditor

    安装并使用 Redactor 字段后,该字段将在字段焦点上显示 CKEditor 工具栏。 我制作了这个插件来替换 Redactor,所以这对我来说不是问题。 如果您想继续在发布表单中使用 Redactor,请随时穿上调试裤并深入研究代码...

    ckeditor:ckedior在线构建

    配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。打开sample/index.html文件并编辑初始化CKEditor 5的脚本。保存文件并刷新浏览器。就这样。注意:如果您对浏览器缓存有...

    ckeditor5

    配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器...

    candimage:CKEditor 插件,允许上传和浏览图像

    工具栏: 组: candimage 纽扣: candimageProps打开图像属性对话框。 candimageUpload上传图片。 candimagePick打开图像浏览器对话框。 [] [] 配置 必需的: config . candimage = { // Requests. getUrl...

    CKeditor for joomla1.7 v3.6.3

    CKeditor是一款在线网页编辑插件(用浏览器编辑...简单的自定义拖放工具栏。 内置链接浏览器直接链接到您的Joomla的元素。 始终最新的 CKEditor版本,其中包括 : 从Word中粘贴功能强大的支持。 完全可配置和强大的

    工具编辑器

    CKEditor是一个强大的编辑工具,只要完全正确的配置好 就可以立即开发出像word文档一样的工具栏。

Global site tag (gtag.js) - Google Analytics