CKEditor的安裝與基本使用（JSP）一,、下載CKEditor 1. 直接下載地址,，當(dāng)前最新版本為3.5： http://download./CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip 2. 或者可直接到官方網(wǎng)站下載： 二、安裝CKEditor 解壓ckeditor_3.5.zip,，得到ckeditor文件夾,，將ckeditor整個文件夾復(fù)制到項目工程的根目錄下，即WebRoot下
三,、驗證CKEditor是否安裝成功 部署運(yùn)行項目,，訪問: http://localhost/項目名稱/ckeditor/_samples/index.html 則可出現(xiàn) “CKEditor Samples List” 的Demo頁面，說明CKeditor已安裝成功
四,、應(yīng)用CKEditor 1. 導(dǎo)入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……(此處的內(nèi)容會在編輯器中顯示)</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增加一些屬性設(shè)置，則其屬性必須寫在{}花括號內(nèi),， 如上{toolbar:‘Full’, skin : ‘kama’},， 具體的屬性網(wǎng)上很多文章均可搜索到，這里不累述了,。
3) 上面的textarea后面的“CKEDITOR.replace(‘content‘);”腳本也可以寫在<head></head>標(biāo)簽內(nèi)
<script type=”text/javascript”> window.onload = function(){ CKEDITOR.replace(‘content’); }</script> 五,、獲取編輯器里的數(shù)據(jù) 有時在提交表單時，需要判斷下編輯器里的內(nèi)容是否為空,，這時可使用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í)顚憙?nèi)容,！”); return false; }} 注意：如果你在編輯器里打了一堆的空格，內(nèi)容是不為空的,，因為編輯器會把你打的空格都轉(zhuǎn)換成
至此,，CKEdiotr編輯器即可在頁面上顯示與使用。
補(bǔ)充說明：如果你的項目中使用struts2等框架,，也可根據(jù)上面textarea的屬性name=”content”來獲取編輯器里的內(nèi)容,，最好使用BLOB來存儲。 |
|
|
