CKEditor的安裝與基本使用（JSP）

時間  2019-11-17
標籤 ckeditor 安裝 基本 使用 jsp 欄目 JSP 简体版
原文   原文鏈接


文章分類:Web前端

1、下載CKEditorjavascript

       1. 直接下載地址。當前最新版本號爲3.5：html

       http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip前端

       2. 或者可直接到官方站點下載：java

       http://ckeditor.com/downloadweb

 

2、安裝CKEditor框架

       解壓ckeditor_3.5.zip，獲得ckeditor目錄，將ckeditor整個目錄拷貝到項目project的根目錄下，即WebRoot下編輯器

 

3、驗證CKEditor是否成功安裝ide

       部署執行項目，訪問: http://localhost/項目名稱/ckeditor/_samples/index.htmlspa

       則可出現 「CKEditor Samples List」 的Demo頁面，說明CKeditor已成功安裝orm

 

4、應用CKEditor

       1. 導入JS文件

            <script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>

 

       2. 建立和使用CKEditor

 

Java代碼   收藏代碼
  1. <textarea class="ckeditor" cols="80" id="content" name="content" rows="10">  
  2.       CKEditor Test......(此處的內容會在編輯器中顯示)  
  3. </textarea>  
  4.   
  5. <script type="text/javascript">  
  6. //<![CDATA[  
  7.     CKEDITOR.replace('content',{toolbar:'Full', skin : 'kama'});  
  8. //]]>  
  9. </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代碼   收藏代碼
  1. <script type="text/javascript">  
  2.     window.onload = function(){  
  3.         CKEDITOR.replace('content');  
  4.     }  
  5. </script>  

 

 

5、獲取編輯器裏的數據

      有時在提交表單時，需要推斷下編輯器裏的內容是否爲空。這時可以使用CKEditor的JavaScript API：

      CKEDITOR.instances.content.getData()      

 

Java代碼   收藏代碼
  1. function test() {  
  2.     var editor_data = CKEDITOR.instances.content.getData();  
  3.     if(editor_data==null || editor_data==""){  
  4.         alert("請填寫內容！

    ");  

  5.         return false;  
  6.     }  
  7. }  

       注意：假設你在編輯器裏打了一堆的空格，內容是不爲空的，因爲編輯器會把你打的空格都轉換成&nbsp;

 

至此，CKEdiotr編輯器就能夠在頁面上顯示與使用。

 

補充說明：假設你的項目中使用struts2等框架，也可依據上面textarea的屬性name="content"來獲取編輯器裏的內容，最好使用BLOB來存儲。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程