一、配置CKEditor
这个配置,基本上囊括了CKEditor的最常用配置, 注意注释部分。
CKEditor 具有丰富的一组配置选项,可以定制其外观、功能和行为。主配置文件名字为config.js。此文件可以在 CKEditor 安装文件夹的根目录中找到。
可用的配置选项在 API 文档中可以找到所有可用的配置选项。参考 CKEDITOR.config 对象的定义。
API文档:http://docs.ckeditor.com/#
给大家看看我的config配置:
CKEDITOR.editorConfig = function( config ) {
//定义工具栏显示按钮
config.toolbar_ths =
[
{ name: 'document', items: ['Source', '-', 'DocProps', 'Print', '-', 'Templates'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
{ name: 'insert', items: ['Image', 'Flash', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },
'/',
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'tools', items: ['Maximize', 'ShowBlocks'] },
//自定义插件在工具栏上的位置
{ name: 'extent', items: ['Table','-','ths_form','-','ths_div','-','ths_label','-','ths_textfield','-','ths_select','-','ths_radio','-','ths_checkbox','-','ths_hiddenfield','-','ths_textarea','-','ths_button', '-','Preview']}
];
//使用哪个工具栏
config.toolbar = 'ths';
//加载自定义插件
config.extraPlugins += (config.extraPlugins ? ',ths_textfield,ths_select,ths_radio,ths_checkbox,ths_hiddenfield,ths_textarea,ths_button,ths_div,ths_label,ths_form' : 'ths_textfield,ths_select,ths_radio,ths_checkbox,ths_hiddenfield,ths_textarea,ths_button,ths_div,ths_label,ths_form');
//移除不需要的插件
config.removePlugins = 'forms,elementspath';
//移除不需要的工具栏按钮
config.removeButtons = 'CreateDiv';
//去掉回车添加p标签,使用br
config.enterMode = CKEDITOR.ENTER_BR ;
config.shiftEnterMode =CKEDITOR.ENTER_BR;
//config.startupMode = 'source'; (默认进入源代码编辑)
//取消内容过滤
config.allowedContent = true;
//工具栏是否可以被收缩
config.toolbarCanCollapse = true;
config.contentsCss = ['../assets/css/bootstrap.min.css'];
//工具栏的位置
config.toolbarLocation = 'top';//可选:bottom
//工具栏默认是否展开
config.toolbarStartupExpanded = true;
config.pasteFromWordRemoveStyles = false;
};
这个配置,基本上囊括了CKEditor的最常用配置, 注意注释部分。
config中每一项的意思,请参照http://docs.ckeditor.com/#!/api/CKEDITOR.config
注意到config中,我们加入了自己的插件
ths_textfield,ths_select,ths_radio,ths_checkbox,ths_hiddenfield,ths_textarea,ths_button,ths_div,ths_label,ths_form
那么最终,我们的表单设计器是什么样子?
看看效果:
看到这,熟悉.NET的同学,有没有想起VS中的可视化页面设计器?其实要实现的表单设计器,就是运行在浏览器中类似vs这种设计器的Javascript富文本编辑器。
下节终于可以介绍重头戏,自定义插件的开发了。