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 = 显示关于
分享到:
相关推荐
3. **工具栏配置** 工具栏是CKEditor中最直观的部分,可以调整用户可以看到和使用的编辑功能。你可以根据需要添加、移除或重新排列工具栏按钮。例如,以下代码会创建一个简单的工具栏,只包含基本的编辑功能: ```...
- 可以选择预设的工具栏模式(如“Basic”、“Full”等),也可以完全自定义工具栏按钮: ```javascript config.toolbar = 'Full'; config.toolbar_Full = [ ['Source', '-', 'Save', 'NewPage', 'Preview', '-...
4. **工具栏配置**:工具栏是编辑器中最直观的部分,可以通过`config.toolbar`进行自定义。它支持基础、全功能以及自定义三种模式。 ```javascript config.toolbar = 'Full'; ``` 全功能模式下,工具栏配置...
- `toolbar`:定义显示在工具栏上的按钮和功能。 - `language`:设置编辑器的语言,例如`language: 'zh-cn'`用于简体中文。 - `height`和`width`:调整编辑器的高度和宽度。 - `removePlugins`:移除不需要的插件,...
CKEditor 提供了多种内置工具栏配置,也可以自定义工具栏: ```javascript // 使用 Basic 工具栏 config.toolbar = 'Basic'; // 使用 Full 工具栏 config.toolbar = 'Full'; // 自定义工具栏 config.toolbar_Full...
在CKEditor的实例化代码中,你可以看到自定义按钮和下拉框已经出现在工具栏上。 ```html <!DOCTYPE html> <title>CKEditor 4.2 自定义按钮与下拉框示例 <script src="ckeditor/ckeditor.js"> <script src="...
基本将免费的工具备齐了,源文件,可自行修改重新打包,node_modules 文件夹为包文件,该文件夹容量较大,在实际应用时可以删除,必须在网站模式使用,如:http://127.0.0.1/ckeditor5-build-classic/sample/,图片...
- **自定义配置**: 可以通过配置选项来自定义编辑器的行为和外观,例如禁用某些按钮或更改工具栏布局。配置项可以通过JavaScript代码设置: ```html CKEDITOR.replace('editor1', { toolbar : 'Full' // 设置...
`),定义可用字体(`config.font_names`),以及调整工具栏按钮(`config.toolbar_Full`和`config.toolbar_Basic`)。此外,还需要指定ckfinder的路径,以便ckeditor在需要时调用ckfinder的浏览和上传功能,如`...
全屏模式的实现是通过一个专门的按钮来触发的,通常位于CKEditor 5工具栏上。这个按钮的图标通常表现为两个对角线箭头,表示扩大或缩小。点击这个按钮,编辑器界面会立即适应浏览器窗口大小,隐藏非必要的工具栏和侧...
- `config.toolbar`:配置工具栏,可以使用预设的'Basic'、'Full'或自定义组合。 - `config.toolbarCanCollapse`:是否允许用户折叠工具栏。 - `config.toolbarLocation`:设置工具栏的位置,如`'top'`或`'bottom...
例如,你可以更改默认字体、字号、工具栏布局等: ```javascript CKEDITOR.editorConfig = function( config ) { // 设置默认字体和字号 config.defaultFontFamily = 'Arial, sans-serif'; config.fontSize_...
在CKEditor中,你可以设置编辑器的界面语言、工具栏按钮、默认字体样式、颜色选择器等。这些配置通常在`config.js`文件中进行,通过修改特定的配置选项来实现。例如,如果你希望编辑器默认显示中文界面,可以在配置...
- `config.toolbar`:定义工具栏配置,可以是预设的 'Basic'、'Full' 或自定义配置。 - `config.toolbarCanCollapse`:设置是否允许工具栏折叠,`true` 表示可以。 - `config.toolbarLocation`:设定工具栏的位置,...
5. **工具栏定制**:`config.toolbar`允许自定义工具栏中的按钮和分组,可预设多个工具栏配置,如`'Basic'`和`'Full'`。 ```javascript config.toolbar = 'Full'; config.toolbar_Full = [ ['Source', '-', '...
开发者可以通过自定义配置文件来调整工具栏布局、设置语言、禁用某些功能或添加插件,以满足特定项目需求。 配置CKEditor在MyEclipse中的步骤大致如下: 1. **下载CKEditor**:首先,访问CKEditor官方网站...
例如,添加一个简单的工具栏配置: ```javascript editorConfig: { toolbar: [ ['Bold', 'Italic', 'Underline'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'], ['Link', 'Unlink'], ['...
在配置中,你可以自定义编辑器的功能,例如移除某些按钮(如下划线、下标、上标)、设置段落格式选项、移除对话框的高级选项、控制工具栏是否可折叠、设置默认的换行模式以及宽度和高度。此外,`config.entities`...