CKEditor+SWFUpload實作功能較為強大的編輯器（一）---CKEditor配置

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/qq1010885678/article/details/37512171

CKEditor爆表的強大功能大家都有目共睹，号稱最強大的線上編輯器，隻要将檔案複制到項目中，在添加引用，在一句代碼就可以将普通的textarea變成華麗的編輯器

所謂一複制，一拖，一換就大功告成

但是普通的CKEditor由于會産生諸如<,>這樣的危險符号，在用asp.net時必須在頁面頭的标簽的ValidateRequest屬性設定為false

在WebConfig檔案中的httpRuntime節點配置requestValidateMode="2.0"，否則會報錯。

這樣雖然功能可是實作，但是有可能造成XSS跨站腳本攻擊，這是十分危險的

是以普通的CKEditor一般是給網站的管理者使用的（=。=管理者應該不會去做某些危險的事情吧）

給使用者使用的都是UBB編譯器

網上可以找到很多很多UBB編譯器，但是現在的CKEditor中內建了這個功能，是以使用起來比較得心應手

現在進入主題

CKEditor3.6.5版本下載下傳位址（最新版本的CKEditor我沒有找到UBB的功能= =是不是下錯包了郁悶）：

CKEditor3.6.5

下面是具體的使用流程：

1.下載下傳完之後打開_samples檔案夾，這裡面有所有插件的使用方法，可以根據自己的需要進行選擇，這裡選擇bbcode.htm

2.在你的頁面上必須有一個textarea文本域，取好id之後（這裡以editor1為例）在這個文本域的後面添加一段js代碼，或者在window.onload()裡面添加也是一樣的

3.在bbcode.htm頁面右鍵檢視源，找到textarea後面的那段js代碼

這裡将它貼出來示衆一下（快跟大家問好= 。=）

<script type="text/javascript">
			//<![CDATA[

			// Replace the <textarea id="editor"> with an CKEditor
			// instance, using the "bbcode" plugin, shaping some of the
			// editor configuration to fit BBCode environment.
			CKEDITOR.replace( 'editor1',
				{
					extraPlugins : 'bbcode',
					// Remove unused plugins.
					removePlugins : 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',
					// Width and height are not supported in the BBCode format, so object resizing is disabled.
					disableObjectResizing : true,
					// Define font sizes in percent values.
					fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
					toolbar :
					[
						['Source', '-', 'Save','NewPage','-','Undo','Redo'],
						['Find','Replace','-','SelectAll','RemoveFormat'],
						['Link', 'Unlink', 'Image', 'Smiley','SpecialChar'],
						'/',
						['Bold', 'Italic','Underline'],
						['FontSize'],
						['TextColor'],
						['NumberedList','BulletedList','-','Blockquote'],
						['Maximize']
					],
					// Strip CKEditor smileys to those commonly used in BBCode.
					smiley_images :
					[
						'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','tounge_smile.gif',
						'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angel_smile.gif','shades_smile.gif',
						'cry_smile.gif','kiss.gif'
					],
					smiley_descriptions :
					[
						'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
						'indecision', 'angel', 'cool', 'crying', 'kiss'
					]
			} );

			//]]>
			</script>
           

4.現在要做的就是把CKEDITOR.replace( 'editor1',   這個editor1替換成自己定義的文本域的id就ok了

現在在重新打開一下測試的頁面，是不是發現textarea已經變成了一個UBB編譯器啦

需要注意的是：這時候這個textarea已經不是一個文本域了，而是被替換成了一個編輯器

不能再使用window,getElementById("editor1").value;或者$("#editor1").val()這種方式來獲得裡面輸入的值了

而是要使用

var oEditor = CKEDITOR.instances.editor1;

oEditor .getData();

這種方式來擷取

設定通過oEditor .setData();來控制

随便輸入幾個文字，添加點樣式，然後轉換到源碼模式，傳說中的ubb代碼就出現了~

最後，由于在我的項目中引用了很多js檔案，而且都是必須的，然後不知道怎麼滴。。CKEDITOR一直報錯，而且還不止一個，怎麼搞都不行

最後隻能換了一個包試試，竟然神奇的可以用了，但是老是出現一個NotSupportedError錯誤，如圖所示

唉，最後瘋了直接在浏覽器點了不在顯示此消息。。。眼不見心不煩

希望有高手知道這是怎麼回事，求教育！！