文章分類:Web前端
一、下載CKEditor
1. 直接下載地址。當前最新版本號為3.5：
http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip
2. 或者可直接到官方站點下載：
二、安裝CKEditor
解壓ckeditor_3.5.zip，得到ckeditor目錄，將ckeditor整個目錄拷貝到項目project的根目錄下，即WebRoot下
三、驗證CKEditor是否成功安裝
部署執行項目，訪問: http://localhost/項目名稱/ckeditor/_samples/index.html
則可出現 “CKEditor Samples List” 的Demo頁面，說明CKeditor已成功安裝
四、應用CKEditor
1. 導入JS文件
<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
2. 創建和使用CKEditor
Java代碼
- <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創建的編輯器實例，
替換上面的textarea。
若要為CKEditor添加一些屬性設置。則其屬性必須寫在{}花括號內，
如上{toolbar:'Full', skin : 'kama'}，
詳細的屬性網上非常多文章均可搜索到，這里不累述了。
3) 上面的textarea后面的“CKEDITOR.replace('content');”腳本也能夠寫在<head></head>標簽內
Java代碼
- <script type="text/javascript">
- window.onload = function(){
- CKEDITOR.replace('content');
- }
- </script>
五、獲取編輯器里的數據
有時在提交表單時，須要推斷下編輯器里的內容是否為空。這時可使用CKEditor的JavaScript API：
CKEDITOR.instances.content.getData()
Java代碼
- function test() {
- var editor_data = CKEDITOR.instances.content.getData();
- if(editor_data==null || editor_data==""){
- alert("請填寫內容！
");
- return false;
- }
- }
注意：假設你在編輯器里打了一堆的空格，內容是不為空的，由於編輯器會把你打的空格都轉換成
至此，CKEdiotr編輯器就可以在頁面上顯示與使用。
補充說明：假設你的項目中使用struts2等框架，也可依據上面textarea的屬性name="content"來獲取編輯器里的內容，最好使用BLOB來存儲。
一、下載CKEditor
1. 直接下載地址。當前最新版本號為3.5：
http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip
2. 或者可直接到官方站點下載：
二、安裝CKEditor
解壓ckeditor_3.5.zip，得到ckeditor目錄，將ckeditor整個目錄拷貝到項目project的根目錄下，即WebRoot下
三、驗證CKEditor是否成功安裝
部署執行項目，訪問: http://localhost/項目名稱/ckeditor/_samples/index.html
則可出現 “CKEditor Samples List” 的Demo頁面，說明CKeditor已成功安裝
四、應用CKEditor
1. 導入JS文件
<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>
2. 創建和使用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創建的編輯器實例，
替換上面的textarea。
若要為CKEditor添加一些屬性設置。則其屬性必須寫在{}花括號內，
如上{toolbar:'Full', skin : 'kama'}，
詳細的屬性網上非常多文章均可搜索到，這里不累述了。
3) 上面的textarea后面的“CKEDITOR.replace('content');”腳本也能夠寫在<head></head>標簽內
- <script type="text/javascript">
- window.onload = function(){
- CKEDITOR.replace('content');
- }
- </script>
五、獲取編輯器里的數據
有時在提交表單時，須要推斷下編輯器里的內容是否為空。這時可使用CKEditor的JavaScript API：
CKEDITOR.instances.content.getData()
- function test() {
- var editor_data = CKEDITOR.instances.content.getData();
- if(editor_data==null || editor_data==""){
- alert("請填寫內容！
");
- return false;
- }
- }
注意：假設你在編輯器里打了一堆的空格，內容是不為空的，由於編輯器會把你打的空格都轉換成
至此，CKEdiotr編輯器就可以在頁面上顯示與使用。
補充說明：假設你的項目中使用struts2等框架，也可依據上面textarea的屬性name="content"來獲取編輯器里的內容，最好使用BLOB來存儲。