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

KEditor中的工具栏默认显示所有功能按钮。出于安全的原因、或者是简化的原因,需要对这个工具栏进行自定义设置。CKEditor工具栏自定义配置非常简单。

  编辑ckeditor目录下的的config.js文件,默认的是下面的工具栏代码,

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

(特别说明: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‘]
];

下面是经删除过后的工具条代码

config.toolbar = ‘Full‘;
    config.toolbar_Full = [
        {name: ‘document‘,items: [‘Source‘, ‘-‘, ‘DocProps‘, ‘Preview‘, ‘Print‘, ‘-‘]},
        {name: ‘clipboard‘,items: [‘Cut‘, ‘Copy‘, ‘Paste‘, ‘PasteText‘, ‘PasteFromWord‘, ‘-‘, ‘Undo‘, ‘Redo‘]},
        {name: ‘editing‘,items: [‘Find‘, ‘Replace‘, ‘-‘, ‘SelectAll‘, ‘-‘]},
        { 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‘]},
        ‘/‘,
        { name: ‘styles‘,items: [‘Styles‘, ‘Format‘, ‘Font‘, ‘FontSize‘]},
        { name: ‘colors‘,items: [‘TextColor‘, ‘BGColor‘]},
        { name: ‘tools‘,items: [ ‘ShowBlocks‘, ‘-‘]}
    ];
    config.toolbar_Basic = [[‘Bold‘, ‘Italic‘, ‘-‘, ‘NumberedList‘, ‘BulletedList‘, ‘-‘, ‘Link‘, ‘Unlink‘, ‘-‘, ‘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://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar CKEditor官网对CKEditor Toolbar Definition的说明
时间: 2024-10-23 18:08:13

CKEditor (Toolbar Definition)工具栏自定义配置的相关文章

Ueditor/自定义配置

UEditor除 了具有轻量.可定制等优点外,还始终将优化编辑操作.提升用户体验摆在了很重要的位置.在这一点上,除了对编辑器功能.性能.实现细节等不断地改进和追求 创新之外,众多灵活而人性化的自定义配置也充分地体现了这个特点,通过修改配置项的值,用户几乎可以完全地改变编辑器的外观和行为. 从配置本身的优先级来看,UEditor的配置可以分为系统默认配置和用户自定义配置两种类型.系统默认配置是指editor_config.js中的所有配置,而用户自定义配置则是指用户在实例化编辑器的时候传入的JSO

spring-boot 速成(4) 自定义配置

spring-boot 提供了很多默认的配置项,但是开发过程中,总会有一些业务自己的配置项,下面示例了,如何添加一个自定义的配置: 一.写一个自定义配置的类 package com.example.config; import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component

App.config和Web.config配置文件的自定义配置节点

前言 昨天修改代码发现了一个问题,由于自己要在WCF服务接口中添加了一个方法,那么在相应调用的地方进行更新服务就可以了,不料意外发生了,竟然无法更新.左查右查终于发现了问题.App.config配置文件中的配置貌似出现了问题.查找节点发现是如下节点: <configSections> <section name="Test1" type="Demo.Section1,Demo"/> .............. </configSect

C# 快捷使用自定义配置节点

C#除了appSettings和connectionStrings默认配置外还允许用户自定义使用配置.C# 提供3中简单的自定义配置,配置文件如下 <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSections> <section name="Config1" type="System.Configuration.S

MVC自定义配置

ASP.NET 5 入门 (2) – 自定义配置 ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 初步理解ASP.NET5的配置 正如我的第一篇文章ASP.NET 5 (vNext) 理解和概述 所说,ASP.NET 5的具有全新的配置机制,我们可以通过以下几点来进行理解: 支持多种跨平台的配置文件格式(如XML, Json, Ini和环境变量) 标准的配置文件如project.json不再包括任何自定义的配置信息. 自定义的配置完全由开发者另行建立和加载 自定义的配置信息可

ASP.NET 5 入门 (2) – 自定义配置

ASP.NET 5 入门 (2) – 自定义配置 ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 初步理解ASP.NET5的配置 正如我的第一篇文章ASP.NET 5 (vNext) 理解和概述 所说,ASP.NET 5的具有全新的配置机制,我们可以通过以下几点来进行理解: 支持多种跨平台的配置文件格式(如XML, Json, Ini和环境变量) 标准的配置文件如project.json不再包括任何自定义的配置信息. 自定义的配置完全由开发者另行建立和加载 自定义的配置信息可

基于Spring的可扩展Schema进行开发自定义配置标签支持

一.背景 最近和朋友一起想开发一个类似alibaba dubbo的功能的工具,其中就用到了基于Spring的可扩展Schema进行开发自定义配置标签支持,通过上网查资料自己写了一个demo.今天在这里进行和大家分享,也记录下方便以后复习备忘. 二.demo测试环境 1.JDK1.7 2.spring 4.2.5.RELEASE 3.基于Maven 4.开发工具Eclipse 三.项目介绍 1.实现步骤分析 [1].设计配置属性并开发JavaBean. [2].编写xsd文件. [3].编写Nam

可自定义配置箭头的CSS3气泡提示框

今天我们要来分享一款基于纯CSS的气泡提示框,和之前分享的一款jQuery消息提示框插件Tipso类似,整个提示框由箭头和矩形框组成,并且气泡提示框的箭头可以有不同的方向.这款CSS气泡提示框由纯CSS完成,最大的特点就是可以自定义配置,包括文字颜色.背景颜色和箭头方向等.效果图如下: 在线预览   源码下载 实现的代码. css代码: .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5;

轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单

1. 引言 上一节<轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能>最后提到,新建的菜单不能只是默认放在菜单的后面,应该可以自定义的放在当前菜单栏中的任何位置.这一节就讲述wangEditor目前支持的几种自定义配置菜单的使用. 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508.html 交流QQ群: