CKEditor+SWFUpload實現功能較為強大的編輯器

2020-06-16 18:09:15

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 及本文後面幾頁要用到的檔案下載：

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

使用者名稱與密碼都是www.linuxidc.com

具體下載目錄在 /2015年資料/2月/7日/CKEditor+SWFUpload實現功能較為強大的編輯器/

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割線------------------------------------------

下面是具體的使用流程：

1.下載完之後開啟_samples資料夾，這裡面有所有外掛的使用方法，可以根據自己的需要進行選擇，這裡選擇bbcode.htm

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

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

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

// 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錯誤，如圖所示

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

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

CKEditor的使用方法 http://www.linuxidc.com/Linux/2014-03/99201.htm

CKEditor協同KCFinder實現圖片的遠端管理和圖文並茂的內容發布 http://www.linuxidc.com/Linux/2013-12/93827.htm

更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2015-02/113063p2.htm

CKEditor+SWFUpload實現功能較為強大的編輯器

熱門文章