`

CKEditor (Toolbar Definition)工具栏自定义配置

阅读更多
S是大小写敏感的, 在设置配置文件的时候需要注意

以CKEditor 4为基础
我们可以通过两种方式配置CKEditor的工具栏,一种是是通过config.js配置文件设置, 另一种是IN-PAGE方式

1.config.js 方式

//都是数组类型
config.toolbar = [
    ['Source', '-', 'Bold', 'Italic'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], '/',
    ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select','Button']
    ];

config.toolbar = 'Basic';
config.toolbar_Basic =[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
    ];

config.toolbarGroups = [
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'links' },
    { name: 'insert' },
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
];


注意: “/”表示工具栏换行,“-”表示工具图标之间的中隔线“|”

2.IN-PAGE方式


CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });



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

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 = 显示关于


转:http://www.cnblogs.com/answercard/p/3709463.html
分享到:
评论

相关推荐

    ckeditor_4.x自定义按钮控件详细配置

    CKEditor 4.x 自定义按钮控件详细配置 CKEditor 是一个功能强大且广泛使用的富文本编辑器,提供了许多功能强大的插件和配置选项。在 CKEditor 4.x 版本中,我们可以通过自定义按钮控件来扩展编辑器的功能。本文将...

    ckeditor4.2.2自定义配置

    **ckeditor4.2.2自定义配置** CKEditor是一款强大的富文本编辑器,广泛应用于网页内容编辑、CMS系统以及各种在线文档处理。CKEditor 4.2.2是该系列的一个较早版本,但仍然包含丰富的功能和高度的可定制性。在实际...

    ckeditor4.2 自定义按钮和下拉框实现

    在CKEditor的实例化代码中,你可以看到自定义按钮和下拉框已经出现在工具栏上。 ```html <!DOCTYPE html> <title>CKEditor 4.2 自定义按钮与下拉框示例 <script src="ckeditor/ckeditor.js"> <script src="...

    ckeditor4音频视频上传自定义插件

    在IT行业中,富文本编辑器CKEditor 4是一款广泛应用的在线文本编辑工具,它提供了丰富的功能,如格式化、图片上传、链接管理等。本文将深入探讨如何为CKEditor 4自定义音频和视频上传插件,以满足特定的媒体处理需求...

    ckeditor3.x 支持自定义上传,媒体预览

    为了实现这些功能,你需要在CKEditor的配置文件中添加自定义插件,或者扩展现有的`image`或`media`插件。你还需要确保服务器端的接口能够正确处理上传的媒体文件,并返回正确的预览URL。在实际项目中,你可能还需要...

    ckeditor5:CkEditor5自定义构建

    包括用于设置外部方法以将内容插入编辑器的自定义插件: 插入连结 插入图片 插入片段 < textarea class =" editor " > </ textarea > < script src =" ../build/ckeditor.js " > </ script &...

    ckeditor 自定义上传图片

    对于图片上传,我们可以创建一个自定义插件,添加一个自定义按钮到编辑器的工具栏,点击这个按钮触发图片上传操作。自定义按钮的实现主要涉及两个部分:前端(编辑器界面)和后端(处理上传的服务器端代码)。 前端...

    Ckeditor自定义插件

    2. **创建自定义按钮**:在CKEditor的工具栏上添加一个新的按钮,这可以通过修改`config.js`文件或在`plugin.js`中调用`CKEDITOR.config.toolbarGroups`来完成。 3. **处理点击事件**:当用户点击按钮时,我们需要...

    ckeditor自定义插件

    在IT行业中,编辑器是开发人员日常工作中不可或缺的工具,CKEditor是一款著名的富文本编辑器,广泛用于网页内容编辑和管理。本主题聚焦于“ckeditor自定义插件”,这涉及到如何扩展CKEditor的功能,以满足特定项目的...

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

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

    ckeditor5:CKEditor 5自定义构建

    4. `ui`:定义用户界面元素,如工具栏布局。 完成配置后,执行以下命令来构建自定义的CKEditor 5版本: ```bash npm run-script build ``` 这将生成一个`/build`目录,其中包含你的自定义编辑器构建。为了测试和...

    ckeditor5-plugins:自定义ckeditor5插件(例如

    CKEditor5-plugins基于ckeditor5的,适用于自定义构建的插件包。要使用此插件包,则不建议直接使用官方的classic、document、inline、balloon等构建,建议自定义构建features 包含功能├── src│ ├── clear-...

    ckeditor 3 自定义控件

    根据给定文件的信息,本文将深入探讨如何在 CKEditor 3 中实现自定义控件以及如何集成 CKFinder 1.41。以下内容基于提供的标题、描述、标签及部分内容进行详细解析。 ### CKEditor 3 自定义控件 #### 一、CKEditor...

    ckeditor配置(详细)

    4. **工具栏配置**:工具栏是编辑器中最直观的部分,可以通过`config.toolbar`进行自定义。它支持基础、全功能以及自定义三种模式。 ```javascript config.toolbar = 'Full'; ``` 全功能模式下,工具栏配置...

    ckeditor5-v30 全工具版.rar

    基本将免费的工具备齐了,源文件,可自行修改重新打包,node_modules 文件夹为包文件,该文件夹容量较大,在实际应用时可以删除,必须在网站模式使用,如:http://127.0.0.1/ckeditor5-build-classic/sample/,图片...

    ckeditor4.0自定义标签操作详细步骤及修改后编辑器jar包下载

    在IT领域,文本编辑器是开发人员日常工作中不可或缺的工具之一,CKEditor 4.0作为一款强大的富文本编辑器,被广泛应用于网页内容编辑、文档处理等多个场景。本篇文章将详细阐述如何在CKEditor 4.0中进行自定义标签...

    CKEditor3.6.4+CKFinder2.3+配置

    1. **安装CKEditor**:将CKEditor的文件上传到服务器,配置编辑器的基本设置,如工具栏、语言等。 2. **安装CKFinder**:同样将CKFinder的文件上传至服务器,并设定相应的路径和配置文件。 3. **集成配置**:在...

    ckeditor的详细配置

    - 可以选择预设的工具栏模式(如“Basic”、“Full”等),也可以完全自定义工具栏按钮: ```javascript config.toolbar = 'Full'; config.toolbar_Full = [ ['Source', '-', 'Save', 'NewPage', 'Preview', '-...

    ckeditor3.6配置

    CKEditor 提供了多种内置工具栏配置,也可以自定义工具栏: ```javascript // 使用 Basic 工具栏 config.toolbar = 'Basic'; // 使用 Full 工具栏 config.toolbar = 'Full'; // 自定义工具栏 config.toolbar_Full...

    ckeditor5全屏按钮

    在使用CKEditor 5时,开发者可以通过自定义配置来调整全屏按钮的行为。例如,他们可以选择是否在初始化时显示全屏按钮,或者自定义全屏模式下的工具栏布局。此外,还可以通过监听编辑器的事件来在全屏模式切换时执行...

Global site tag (gtag.js) - Google Analytics