CKEditor 3.X使用小结---初始化与面板功能定制

        CKEditor是一款可直接内嵌于网页的富文本编辑器，实现了所见即所得效果。它的前身即FCKEditor，从2009年开始，项目组将它重命名为CKEditor。

        CKEditor的工作方式是替换原表单中的<textarea>域(或DOM中的div)，至于替换的原理，对使用者来说是透明的，但要注意的是，替换后，在用javascript对原表单中此<textarea>域，进行为空判断的时候，可能会遇到取不到域中值的问题，这时需要用CKEditor框架自己封装的取值方法来获取。（CKEDITOR.instances.your_editor.getData(),”your_editor”为<textarear id=”your_editor”>中id属性同名的变量）

        替换（初始化）前，需要在页面中加载ckeditor.js核心代码（<script src=”ckeditor.js” type=”text/javascript”>），替换可以通过以下两个方法实现。

        1. 将<textarea>域的class属性值设置为“ckeditor”即可加载编辑器。

        2. JavaScript调用：

            举例：<textarea id=”sample”></textarea>或<div id="sample"></div>

            a. 将<textarea>或div的id属性值设置为“sample”

JavaScript代码

            b. JavaScript代码

            

        <script language="JavaScript">
	//<![CDATA[
		CKEDITOR.replace( 'sample', {
			//编辑器初始化语言
			language : 'zh-cn',
	        //编辑器初始化功能定制
	        toolbar : [
	        	{ name: 'document', items : [ 'DocProps' ] },
	        	{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
	        	'/',
	       		{ 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: 'links', items : [ 'Link','Unlink' ] },
	        	{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar' ] },
	        	'/',
	        	{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
	        	{ name: 'colors', items : [ 'TextColor','BGColor' ] },
	        	{ name: 'tools', items : [ 'Maximize', 'ShowBlocks', ] },
	        ],
	        //是否可以自行拖拽编辑器大小
	        resize_enabled : false,
	        //编辑器高度
	        height : '200px',
	    	//编辑器宽度
	    	width : '1000px',
	    });
	//]]>
	</script>

        查看面板所有功能，可参考官方文档http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

        查看编辑器所有可配置项，可参考官方文档http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html