基于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富文本编辑器。

下节终于可以介绍重头戏，自定义插件的开发了。