CKEditor的安裝與基本使用（JSP）一、下載CKEditor 1. 直接下載地址，當前最新版本為3.5： http://download./CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip 2. 或者可直接到官方網(wǎng)站下載： 二、安裝CKEditor 解壓ckeditor_3.5.zip，得到ckeditor文件夾，將ckeditor整個文件夾復制到項目工程的根目錄下，即WebRoot下
三、驗證CKEditor是否安裝成功 部署運行項目，訪問: http://localhost/項目名稱/ckeditor/_samples/index.html 則可出現(xiàn) “CKEditor Samples List” 的Demo頁面，說明CKeditor已安裝成功
四、應用CKEditor 1. 導入JS文件 <script type=”text/javascript” src=”http://chrissie./blog/<%=request.getContextPath()%>/ckeditor/ckeditor.js“></script>
2. 創(chuàng)建和使用CKEditor
<textarea class=”ckeditor” cols=”80″ id=”content” name=”content” rows=”10″> CKEditor Test……(此處的內容會在編輯器中顯示)</textarea><script type=”text/javascript”>//<![CDATA[ CKEDITOR.replace('content',{toolbar:'Full', skin : 'kama'});//]]></script> 說明： 1) textarea屬性值 name=”content“: 名字可隨意定義，但必須與下面的CKEDITOR.replace(‘content‘);匹配
2) CKEDITOR.replace(‘content‘);是最基本的寫法，表示使用CKEditor的JavaScript API創(chuàng)建的編輯器實例， 替換上面的textarea。 若要為CKEditor增加一些屬性設置，則其屬性必須寫在{}花括號內， 如上{toolbar:‘Full’, skin : ‘kama’}， 具體的屬性網(wǎng)上很多文章均可搜索到，這里不累述了。
3) 上面的textarea后面的“CKEDITOR.replace(‘content‘);”腳本也可以寫在<head></head>標簽內
<script type=”text/javascript”> window.onload = function(){ CKEDITOR.replace(‘content’); }</script> 五、獲取編輯器里的數(shù)據(jù) 有時在提交表單時，需要判斷下編輯器里的內容是否為空，這時可使用CKEditor的JavaScript API： CKEDITOR.instances.content.getData()
function test() { var editor_data = http://chrissie./blog/CKEDITOR.instances.content.getData(); if(editor_data==null || editor_data==”"){ alert(“請?zhí)顚憙热荩?#8221;); return false; }} 注意：如果你在編輯器里打了一堆的空格，內容是不為空的，因為編輯器會把你打的空格都轉換成
至此，CKEdiotr編輯器即可在頁面上顯示與使用。
補充說明：如果你的項目中使用struts2等框架，也可根據(jù)上面textarea的屬性name=”content”來獲取編輯器里的內容，最好使用BLOB來存儲。 |
|
|
