如何自定义CKEditor工具栏
CKEditor 工具栏是一个JavaScript数组,数组里面包含了要显示的工具的名字。工具栏的命名规则为:“toolbar_<name>”, “<name>”是定义的工具栏名字。 下面代码中是CKEditor默认定义好的两个工具栏,“Full”和“Basic”,并且默认使用的是“Full”工具栏
-------------------------------------------------------------------------------------------------------------------------
config.toolbar = 'Full';
config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
自定义工具栏
用户可以在config.js里自定义工具栏:
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';//把默认工具栏改为‘MyToolbar’
config.toolbar_MyToolbar =
[
['NewPage','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format'],
['Bold','Italic','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor'],
['Maximize','-','About']
];
};
或者你也可以定义多个Toolbar,然后在不同的地方使用不同的toolbar属性的设置:
CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});
CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
当然,你也可以在调用CKEditor的地方直接定义新的工具栏
CKEDITOR.replace( 'editor1',
{
toolbar :
[
['Styles', 'Format'],
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
]
});
分享到:
相关推荐
配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器...
ckeditor5-自定义元素关于这是的插件。 它允许在编辑器中添加自定义元素。 创建的元素的html转换如下所...导入工具栏图标(可选) import Icon1 from 'path-to-icon/iconfile.svg';配置插件假设构建基于经典编辑器: e
简单的自定义拖放工具栏。 内置链接浏览器直接链接到您的Joomla的元素。 始终最新的 CKEditor版本,其中包括 : 从Word中粘贴功能强大的支持。 完全可配置和强大的造型系统 。 高品质的XHTML输出生成 。 全部(可用...
简单的自定义拖放工具栏。内置链接浏览器直接链接到您的Joomla的元素。始终最新的 CKEditor版本,其中包括 :从Word中粘贴功能强大的支持。完全可配置和强大的造型系统 。高品质的XHTML输出生成 。全部(可用)整个...
简单的自定义拖放工具栏。内置链接浏览器直接链接到您的Joomla的元素。始终最新的 CKEditor版本,其中包括 :从Word中粘贴功能强大的支持。完全可配置和强大的造型系统 。高品质的XHTML输出生成 。全部(可用)整个...
简单的自定义拖放工具栏。 内置链接浏览器直接链接到您的Joomla的元素。 始终最新的 CKEditor版本,其中包括 : 从Word中粘贴功能强大的支持。 完全可配置和强大的造型系统 。 高品质的XHTML输出生成 。 全部...
CKEditor 5数学功能 这是CKEditor 5的基于TeX的数学插件。您可以使用它来插入,编辑和查看数学方程式和公式。... 将数学按钮添加到工具栏 InlineEditor . defaultConfig = { toolbar : { items :
配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器缓存有...
CKeditor是一款在线网页编辑插件(用浏览器编辑...简单的自定义拖放工具栏。 内置链接浏览器直接链接到您的Joomla的元素。 始终最新的 CKEditor版本,其中包括 : 从Word中粘贴功能强大的支持。 完全可配置和强大的
诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器缓存有任何...
1、EChar有缓存,如果自定义工具栏没反应,看看是不是有缓存原因; 2、EChar有兼容性问题,如果效果不是预期,看看是不是浏览器问题; 3、路径问题,在例子里面写了多个层级和方式的例子,都可以用,注意层级关系 4...
诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器缓存有...
1.内容包括ckeditor文件夹,只需引用对应的js文件即可;一份doxc应用说明,页面如何应用,在JavaScript中如何取值赋值 2.文本编辑器样式是带标签的是形式保存到...4.编辑器的工具栏可根据需要自定义显示 5.普遍浏览器都支持
配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。打开sample/index.html文件并编辑初始化CKEditor 5的脚本。保存文件并刷新浏览器。就这样。注意:如果您对浏览器缓存有...
该软件包包含有助于创建预格式化文本以及命令和工具栏按钮的插件。 将CodeSnippet插件导入到包含您的编辑器的文件中,如下所示 import CodeSnippet from 'ckeditor5-code-snippet-plugin/dist/codesnippet' ;
配置构建诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑用于初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器...
Yii 1 的#Html-editor ...html 标签自定义编辑器工具栏用于增强编辑器功能的额外插件##安装将editCK文件夹复制到WebRoot /protected/extension文件夹中从下载 KCFinder 将kcfinder文件夹解压到WebRoot /vendors文件
它包括一个简化的工具栏,简化的对话框和一个自定义文件管理器。 文件管理器也可以与CKEditor分开使用。 目前,Rich与Active Admin,Rails Admin和Vanilla Formtastic(版本1和2)集成在一起。 上载的文件可以存储...
诸如更改工具栏项目,更改图标顺序或自定义插件配置之类的更改应该相对容易地进行。 打开sample/index.html文件并编辑初始化CKEditor 5的脚本。保存文件并刷新浏览器。 就这样。 注意:如果您对浏览器缓存有任何...
加载栏 固定和默认标题布局 固定和默认页脚布局 固定和默认SidebarLayouts 翻译从JSON加载 RTL的支持 延迟加载的脚本和样式 动态分页 聊天指令 嵌套列表 树视图 线性图标(Themify) 验证表单 多个文件上传 向导与验证...