CKEditor3.x 在Java項目中配置、包括圖片上傳(支持FTP、圖片壓縮)

時間  2019-11-13
標籤 ckeditor3.x ckeditor java 項目 配置 包括 圖片 上傳 支持 ftp 壓縮 欄目 Java 简体版
原文   原文鏈接

CKEditor 3.x配置說明javascript

1、基本使用：html

 一、所需文件架包java

A. Ckeditor基本文件包，好比：ckeditor_3.6.2.zipweb

  下載地址：http://ckeditor.com/downloadapache

 

 二、配置使用瀏覽器

A．將下載下來的CKEditor壓縮解壓，將解壓後的文件夾(「ckeditor」)拷貝進項目裏面，好比我是放在」WebContent」的」commons」文件夾下；服務器

B．在須要使用CKEditor的頁面引入CKEditor的支持javascriptapp

<head>

<script type="text/javascript" src="/commons/ckeditor/ckeditor.js"></script>jsp

</head>編輯器

 

C．通常咱們的內容是使用一個」<textarea>」來顯示內容，而後使用調用腳本替換

<textarea id="editor1"name="editor1">Initial value.</textarea>

<script type="text/javascript">CKEDITOR.replace(「editor1」);</script>

D．CKEDITOR.replace(「editor1」)中的」editor1」爲id或者是name搜索方式默認是先按id來搜索，沒找到再按name來搜索

E．具體的圖例

 


2、Java項目中配置使用：

一、所需文件架包

A．Ckeditor基本文件包，好比：ckeditor_3.6.2.zip

  下載地址：http://ckeditor.com/download

B．CKEditor for Java 架包，好比：ckeditor-java-core-3.5.3.jar

      下載地址：http://ckeditor.com/download

 二、配置使用

A．將下載下來的CKEditor壓縮解壓，將解壓後的文件夾(「ckeditor」)拷貝進項目裏面，好比我是放在」WebContent」的」commons」文件夾下；

B．將下載下來的CKEditorfor Java 包(ckeditor-java-core-3.5.3.jar)複製進項目」 /WEB-INF/lib」目錄；

C．在須要使用CKEditor的jsp頁面配置CKEditor的標籤，之後使用經過標籤使用

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

D．通常咱們的內容是使用一個」<textarea>」來顯示內容，而後替換成CKEditor編輯器

<textareaid="id_1"name="id_1">Initial value.</textarea> 

<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

   * replace 只的是textarea 的name或者id
* basePath CKEditor的根目錄

E．具體圖例

            

3、Java項目中配置使用並支持簡單的圖片上傳功能：

CKEditor在Java項目中配置使用，並支持圖片的上傳功能。原理是經過showModalDialog來實現的，弊端不支持Chrome瀏覽器，IE,FireFox支持；

一、所需文件架包

A．Ckeditor基本文件包，好比：ckeditor_3.6.2.zip

  下載地址：http://ckeditor.com/download

B．CKEditor for Java 架包，好比：ckeditor-java-core-3.5.3.jar

     下載地址：http://ckeditor.com/download

 二、配置使用

A．將下載下來的CKEditor壓縮解壓，將解壓後的文件夾(「ckeditor」)拷貝進項目裏面，好比我是放在」WebContent」的」commons」文件夾下；

B．將下載下來的CKEditorfor Java 包(ckeditor-java-core-3.5.3.jar)複製進項目」 /WEB-INF/lib」目錄；

C．在須要使用CKEditor的jsp頁面配置CKEditor的標籤，之後使用經過標籤使用

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

D．通常咱們的內容是使用一個」<textarea>」來顯示內容，而後替換成CKEditor編輯器

<textareaid="id_1"name="id_1">Initial value.</textarea> 

<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

   * replace 只的是textarea 的name或者id
   * basePath CKEditor的根目錄
 

E．簡單快捷的給CKEditor加上圖片上傳功能

 

         CKEditor很是好用，但它的圖片/文件上傳使用了CKFinder，雖然功能很是強大，但集成起來仍是比較麻煩，並且根據應用還須要改造。若是本身的應用已經有圖片/文件上傳模塊，可否直接拿過來用呢？答案是確定的，並且很是簡單，就是在圖片連接輸入框的右邊加個按鈕，點擊事件連接到已有的上傳模塊，上傳後把圖片的url傳遞給左邊的輸入框便可。步驟以下：

  打開ckeditor\plugins\image\dialogs\image.js，在連接輸入框代碼結尾也就是「m.lang.image.urlMissing)},」後面加上這些代碼：

「{type:'button',id:'myUpload',align:'center',label:'新上傳',onClick:function(){varretFile = showModalDialog("/common/uploadImage.jsp","", "dialogHeight:20;dialogWidth:29;"); if(retFile !=null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},」

  「/common/uploadImage.jsp」是應用已經有的上傳模塊連接，上傳成功後經過模式對話框的returnValue返回圖片連接，好比在上傳成功頁面加上以下js函數，點擊肯定時調用。

function Done() {

  window.returnValue = imgPath;//上傳後的圖片連接

  window.close();

}

F．具體圖例

 

4、Java項目中配置使用並支持圖片上傳功能包括FTP上傳，圖片壓縮：

CKEditor在Java項目中配置使用，並支持圖片的上傳功能。原理是經過commons-fileupload上傳組件實現的，這裏已經封裝好上傳處理Servlet只須要在配置文件ckeditor.properties 中配置相關FTP服務器信息，是否壓縮圖片，上傳附件的大小格式限制等。

一、所需文件架包和配置文件

A．Ckeditor基本文件包，好比：ckeditor_3.6.2.zip

  下載地址：http://ckeditor.com/download

B．CKEditor for Java 架包，好比：ckeditor-java-core-3.5.3.jar

     下載地址：http://ckeditor.com/download

C．Apache的上傳組包 commons-fileupload，好比：commons-fileupload-1.2.1.jar

   下載地址：http://commons.apache.org/

D．Apache的上傳組包 commons-io，好比：commons-io-1.4.jar

   下載地址：http://commons.apache.org/

E．Apache的FTP組件包commons-net， 好比：commons-net-ftp-2.0.jar

   下載地址：http://commons.apache.org/

F．Apache的工具包 commons-lang，好比：commons-lang-2.5.jar

   下載地址：http://commons.apache.org/

G．上傳處理組件包 ckeditor-upload-1.0.jar

         本身封裝的基於Servlet的圖片上傳處理組件

H．CKEditor的圖片上傳配置屬性文件：ckeditor.properties

I．CKEditor的配置文件 config.js


備註：點擊下載以上資源包

 

 二、配置使用

A．將下載下來的CKEditor壓縮解壓，將解壓後的文件夾(「ckeditor」)拷貝進項目裏面，好比我是放在」WebContent」的」commons」文件夾下；

B．將下載下來的所需組件架包拷貝進項目」 /WEB-INF/lib」目錄；

         C．將圖片上傳配置文件ckeditor.properties拷貝到項目SRC(classes)根目錄下

          屬性文件內容以下：

# default allowed extensionssettings

ckeditor.resourceType.media.extensions.allowed=.aiff|.asf|.avi|.bmp|.fla|.flv|.gif|.jpeg|.jpg|.mid|.mov|.mp3|.mp4|.mpc|.mpeg|.mpg|.png|.qt|.ram|.rm|.rmi|.rmvb|.swf|.tif|.tiff|.wav|.wma|.wmv

# base directory for the userfiles relative to the context root

ckeditor.userFilesPath = /files/ckeditor/

# default encoding

ckeditor.encoding = UTF-8

# default file size threshold: 1*1024*1024 = 1048576

ckeditor.size.threshold = 1048576

# default one file size :5*1024*1024 = 52428800

ckeditor.file.size.max = 52428800

# default all files size :10*1024*1024 = 10485760

ckeditor.size.max = 10485760

# some messages

message.request.not.contain.images= Requestdoes not contain image or media file.

message.request.general.form = Request is thegeneral form.

message.request.file.max = One file is toolarge.

message.request.all.file.max = All files is toolarge.

# ftp configurations

# open ftp file upload istrue otherwise false

ftp.upload = true


ftp.server = 127.0.0.1

ftp.user_name = jjy

ftp.password = 123

ftp.port = 21

 

# image resize configurations

# open image resize is trueotherwise false

image.resize = true

#resizeByMaxSize:0,resizeByRatio:1,resizeByFixedWidth:2,resizeByFixedHeight:3

image.resize.type = 0

# resize size 100,120,240,400,640

image.resize.size = 120,240,400

 

D．CKEditor配置文件」 /ckeditor/config.js」修改

 

CKEDITOR.editorConfig = function(config) {

    //獲取項目的目錄好比：http://www.mymyty.com

    var strFullPath = window.document.location.href;

    var strPath = window.document.location.pathname;

    var pos = strFullPath.indexOf(strPath);

    var prePath = strFullPath.substring(0,pos);

    var postPath =strPath.substring(0,strPath.substr(1).indexOf('/')+1);

    var path_url = prePath+postPath;

 

    //顯示出圖片上傳模塊 

    config.pasteFromWordRemoveStyles = true;

    config.filebrowserImageUploadUrl = path_url + "/commons/ckeditor/images/upload.html"; //爲圖片上傳處理Servlet在web.xml中配置

 

    // 去掉ckeditor「保存」按鈕 

    config.removePlugins = 'save';

};

 圖片

 

E．在web.xml中配置Servlet

  <servlet>

    <servlet-name>ckeditor</servlet-name>

    <servlet-class>com.ebiz.ssi.ckeditor.CkeditorImagesUploadServlet</servlet-class>

       <load-on-startup>1</load-on-startup>

    </servlet>

<servlet-mapping>

     <servlet-name>ckeditor</servlet-name>

     <url-pattern>/commons/ckeditor/images/upload.html</url-pattern>

</servlet-mapping>

  圖片：

 

 

F．在須要使用CKEditor的jsp頁面配置CKEditor的標籤，之後使用經過標籤使用

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

G．通常咱們的內容是使用一個」<textarea>」來顯示內容，而後替換成CKEditor編輯器

<textareaid="id_1"name="id_1">Initial value.</textarea> 

<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

   * replace 只的是textarea 的name或者id
* basePath CKEditor的根目錄
 

H．具體圖例

 

5、CKEditor中config.js配置文件的說明即樣式自定義調整：

Congfig.js是CKDitor的配置文件，在這個裏面能夠修改編輯器的樣式和所需工具欄等等

 

config.language= 'zh-cn';         // 編輯器語言
config.width =600;                  //初始化時的寬度

config.height = 400;           //初始化時的高度
config.skin='kama';        //編輯器樣式，有三種：’kama’（默認）、’office2003′、’v2′
config.tabSpaces =4;               
config.resize_maxWidth =600;    //若是設置了編輯器能夠拖拽 這是能夠移動的最大寬度
config.toolbarCanCollapse =false;             //工具欄能夠隱藏
//config.toolbarLocation ='bottom';       //可選：設置工具欄在整個編輯器的底部bottom
config.resize_minWidth =600;    //若是設置了編輯器能夠拖拽 這是能夠移動的最小寬度
config.resize_enabled =false;            //若是設置了編輯器能夠拖拽

//如下是後添加的驗證非法數據
config.protectedSource.push(/<\s*iframe[\s\S]*?>/gi); //<iframe>tags.              
config.protectedSource.push(/<\s*frameset[\s\S]*?>/gi); // <frameset> tags.
config.protectedSource.push(/<\s*frame[\s\S]*?>/gi); // <frame> tags.
config.protectedSource.push(/<\s*script[\s\S]*?\/script\s*>/gi); // <SCRIPT> tags.

config.baseFloatZIndex = 10000;   // 編輯器的z-index值

config.baseHref = 「」;    //設置是使用絕對目錄仍是相對目錄，爲空爲相對目錄

 

6、CKEditor精簡說明：

下載了完整的程序以後，先要對程序中的沒必要要的東西進行刪除。凡是文件名或文件夾名前面有"_"的文件或文件夾均可以刪除，這些文件是一些說明文件或者實例文件。另外，./lang文件夾中，只保留：zh_cn.js，en.js文件便可，這個文件夾是程序的語言包，由於其它語言你們用不到，放在那裏也佔用空間，因此刪掉。./skins文件夾是編輯器的界面，根據狀況保留至少一個文件夾便可，其中kama是可自定顏色UI的文件，建議保留，固然若是不在意空間大小的話，也能夠所有上傳。刪除根目錄下的changes.html(更新列表),install.html(安裝指向),license.html(使用許可).

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