2. 程式人生 > >CKEditor與CKFinder學習--整合SpringMVC

CKEditor與CKFinder學習--整合SpringMVC

阿新 • • 發佈：2019-01-28

先來看一下效果

這裡寫圖片描述

這個是我採用了office2013的面板，並對介面按鈕做了優化後的效果

這裡寫圖片描述

這個是bootstrap的面板，好了，開始進入正題。

第一步 下載

下載ckeditor和ckfinder

ckeditor

Full Package版本

其他版本

ckfinder

java Free trail版本

其他版本

第二步 SpringMVC搭建

參考之前的一篇文章，搭建一個最簡單的SpringMVC專案

專案結構如圖所示

這裡寫圖片描述

第三步 解壓並拷貝

3.1 ckeditor

將下載的ckeditor_4.5.7_full.zip進行解壓得到ckeditor資料夾

這裡寫圖片描述

3.2 ckfinder

將下載的ckfinder_java_2.6.0.zip進行解壓得到ckfinder資料夾

這裡寫圖片描述

ckfinder資料夾中包含原始碼目錄和一個ckfinder的war包，還有install和license

將CKFinderJava-2.6.0.war進行解壓（可以將其放在web伺服器（tomcat或者其它容器以tomcat為例）的webapps目錄下，並啟動tomcat，CKFinderJava-2.6.0.war會自動解壓，或者用解壓縮工具進行解壓），解壓後ckfinder資料夾。

這裡寫圖片描述

注意，這裡要的是從CKFinderJava-2.6.0.war解壓的ckfinder，不是從ckfinder_java_2.6.0.zip解壓

將3.1中解壓的ckeditor資料夾和剛才解壓的ckfinder資料夾拷貝到assets目錄下

這裡寫圖片描述

不建議重新命名ckeditor和ckfinder資料夾，因為後面會很麻煩，尤其是ckfinder重新命名之後根本找不到那個上傳的網址，可以將ckeditor的samples目錄和CHANGES.md，README.md，和LICENSE.md刪掉，將ckfinder的_samples目錄，changelog.txt，install.txt和license.txt刪掉。

第四步 引入js

參考

官方示例

<!DOCTYPE html>
<html>
 

    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

通過官方的示例我們知道，要用CKEditor需要三步

  1. 引入ckeditor.js
  2. 建立一個textarea，注意textarea的id
  3. 通過ckeditor來操作上面的textarea，是通過id來控制的

讓我們在jsp中引用

4.1 在需要ckeditor的頁面引入ckeditor.js

<script type="text/javascript" src="${base }/assets/ckeditor/ckeditor.js"></script>

其中base是專案的路徑

base是通過如下程式碼得到的

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<c:set var="base" value="<%=basePath%>"></c:set>

4.2 建立一個textarea

    <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
    </form>

4.3 通過ckeditor來操作textarea

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

完整的jsp程式碼

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<c:set var="base" value="<%=basePath%>"></c:set>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 引入ckeditor.js和ckfinder.js -->
<script type="text/javascript" src="${base }/assets/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>

<title>ckeditor</title>
</head>
<body>
    ${base }
    <p>
    <h1>${msg }</h1>
    <form>
            <!-- 一個textarea -->
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
    </form>
    <!-- 將id為editor1的textarea用ckeditor來操作 -->
    <script type="text/javascript">
        CKEDITOR.replace( 'editor1' );
    </script>
</body>
</html>

為剛才的jsp頁面新增一個Controller訪問

CkController.java

package com.gwc.cktest.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class CkController {
    @RequestMapping(value="/index.html",method=RequestMethod.GET)
    public ModelAndView ckIndex(){
        ModelAndView model = new ModelAndView();
        model.addObject("msg", "Hello CKEditor");
        model.setViewName("index");
        return model;
    }
}

因為我們在mvc中有這麼一個配置

    <!-- 配置根檢視 -->
    <mvc:view-controller path="/" view-name="index"/>

我們的專案名稱為ckdemo

在瀏覽器位址列輸入

或者

看到如下結果，表示ckeditor已經配置好了

這裡寫圖片描述

參考文獻

第五步 整合CKFinder

前四步CKEditor已經配置好了，可是在進行圖文混排寫文章的時候還是很不方便，因為插入的圖片必須來自網路，使用不方便。

這裡寫圖片描述

CKFinder就可以把本地的檔案進行上傳，並使用，下面開始配置CKFinder。

在第三步我們已經將需要的ckfinder資料夾放在了assets目錄下，請確保ckfinder資料夾是從CKFinderJava-2.6.0.war中解壓的，其目錄結構是下面的樣子，再確保一次解壓是否正確。

這裡寫圖片描述

5.1 引入ckfinder.js

引入ckfinder的js，這個我們在第四步已經引入過了

<script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>

將第四步的js檔案修改為下面的

    <script type="text/javascript">
        var editor = CKEDITOR.replace( 'editor1' );
        CKFinder.setupCKEditor(editor, '${base }/assets/ckfinder/');
    </script>

如果已經成功引入，點選圖片按鈕，就可以看到瀏覽伺服器的按鈕，並且多了一個上傳的切換卡

這裡寫圖片描述

這裡寫圖片描述

如果沒有出現，請仔細核對上面的步驟，是否路徑沒有寫對，或者該引入的js沒有引入

5.2 配置web.xml和ckfinder.xml

不過這個時候並不能瀏覽伺服器的圖片資源，需要引入ckfinder.xml，並配置一下web.xml

參考

將第三步中CKFinderJava-2.6.0.war解壓後得到的config.xml拷貝到WEB-INF目錄下，最好將其重新命名一下，我將其命名為ckfinder.xml

這裡寫圖片描述

這裡寫圖片描述

將ckfinder.xml（是config.xml的副本，我重新命名的）拷貝到WEB-INF目錄下，並開始配置web.xml

這裡寫圖片描述

在web.xml最後面加上如下的配置

    <!-- ckfinder -->
    <servlet>
        <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
        <init-param>
            <description>
                Path to configuration file can be relative path inside application,
                absolute path on local file system or UNC path.
            </description>
            <param-name>XMLConfig</param-name>
            <param-value>/WEB-INF/ckfinder.xml</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>ConnectorServlet</servlet-name>
        <url-pattern>
            /assets/ckfinder/core/connector/java/connector.java
        </url-pattern>
    </servlet-mapping>

這裡寫圖片描述

注意事項

上面的

<param-value>/WEB-INF/ckfinder.xml</param-value>

會加在我們剛拷貝的那個ckfinder.xml

而

    <url-pattern>
        /assets/ckfinder/core/connector/java/connector.java
    </url-pattern>

一定要把我們的ckfinder路徑配置正確，我們的ckfinder在assets目錄下

還需要引入ckfinder需要的jar包，jar包在CKFinderJava-2.6.0.war解壓後的WEB-INF/lib目錄下，根據需要引入相關的jar，CKFinder-2.6.0.jar是必須的，上傳檔案需要commons-fileupload-1.2.2.jar，和commons-10-2.0.jar，圖片縮放需要thumbnailator-0.4.8.jar，其他jar包根據需要自行引入即可。

這裡寫圖片描述

配置好之後，啟動伺服器（這裡我用的是tomcat）

瀏覽器訪問

插入圖片，點選瀏覽伺服器會開啟ckfinder相應的網址。

這裡寫圖片描述

我們發現不能訪問，接下來配置ckfinder.xml

將config標籤下的第一個子標籤enabled設定為true就可以了，在config.xml的第15行。

<enabled>true</enabled>

更多的介紹參考

第二個可選的修改地方是baseURL，如果不改則上傳的檔案會被放在web容器webapps\ROOT\CKFinderJava\userfiles

這裡寫圖片描述

瀏覽檔案也是從上述的目錄中瀏覽的。

預設配置如下

<baseURL>/CKFinderJava/userfiles/</baseURL>

可以將其改為我們的地址

<baseURL>http://127.0.0.1:8080/ckdemo/assets/CKFinderJava/userfiles/</baseURL>

因為springmvc會攔截所有的請求，所以將其放在我們的assets目錄下。

更多配置，參考

到這裡已經可以上傳檔案，並且從伺服器瀏覽檔案了。

這裡寫圖片描述

可以瀏覽伺服器已有的圖片

這裡寫圖片描述

還可以上傳圖片

這裡寫圖片描述

如果在上傳圖片的時候，上傳了無法正常顯示，請檢視是否中文亂碼？如果是中文亂碼，修改tomcat伺服器的配置server.xml的第65行為下。

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>

好了，可以開始進行圖文混排了。

資源下載地址

關於ckeditor的自定義按鈕配置，ckfinder的安全訪問，後面再寫。

參考文獻

相關推薦

CKEditor與CKFinder學習--整合SpringMVC

先來看一下效果 這個是我採用了office2013的面板，並對介面按鈕做了優化後的效果 這個是bootstrap的面板，好了，開始進入正題。 第一步 下載 下載ckeditor和ckfinder ckeditor Full Package

CKEditor與CKFinder學習--CKFinder原始碼修改自定義上傳檔名

CKFinder的系列文章到目前應該說基本可以滿足開發需求了，不過還有一個小細節，CKFinder預設上傳的檔名和原始檔名一致，如果檔名重複會自動新增編號“(1)”“(2)”等。 如果需要自定義上傳的檔名怎麼辦呢？ 先看效果 採用uuid來命名

CKEditor學習筆記3（CKEditor與CKFinder的Java整合）

下載地址CKEditor 我下載的版本ckfinder_java_2.4 解壓之後，會看到一個CKFinderJava-2.4.war檔案，直接放到Tomcat/webapps釋出目錄下，把服務開啟就自動解壓了，然後將ckfinder目錄Copy到你專案WebRoot下。

CKEditor與CKFinder整合並實現檔案上傳功能

一．需要的資源： a) ckeditor_3.6.2 （解壓） b) ckeditor-java-3.6.2 （解壓） c) ckfinder_java_2.1 （解壓） 二．執行步驟： 1.MyEclipse新建Web Project：CKEditor_Fin

Spring 學習筆記（七） SpringMVC與Hibernate的整合

前言 4.文中並未貼出所有程式碼，請讀者自行到上述連線中下載原始碼，如有問題，請留言。 一、程式碼整體框架如下 分為config、Dao、domain、Service、和web層。 二、資料庫設計 三、關鍵程式碼 1.Hibernate的配置 package

MyBatis 學習總結 05 Mybatis3.x與Spring3.x整合 OLD

into 包括 mybatis 方法 成對 nec 自動化工具 tty red 　　本文通過加載mybatis-configuration.xml 文件來產生SqlSessionFactory，然後通過SqlSessionFactory去產生sqlSession，然後在通過

springmvc與freemarker的整合

cnn war startup servlet lte amp ade 處理 courier 官方簡介：FreeMarker 是一款 模板引擎： 即一種基於模板和要改變的數據， 並用來生成輸出文本(HTML網頁，電子郵件，配置文件，源代碼等)的通用工具。 它不是面向最終用戶

Spring學習(十九)----- Spring與WEB容器整合

nco mime exceptio 利用 ted 現在 security IT 啟動 首先可以肯定的是，加載順序與它們在 web.xml 文件中的先後順序無關。即不會因為 filter 寫在 listener 的前面而會先加載 filter。最終得出的結論是：list

SpringMVC學習(十)——SpringMVC與前臺的json數據交互

TP sso 加載 eas ping watermark 客戶端 class post json數據格式在接口調用中、html頁面中比較常用，json格式比較簡單，解析也比較方便，所以使用很普遍。在SpringMVC中，也支持對json數據的解析和轉換，這篇文章主要總結一下

Maven學習歸納（三）——依賴添加依賴排除與項目整合

源文件 bubuko mda 如何 命令行 運維 插件 程序 移除 一、Maven的坐標 1. 坐標的定義 數學意義上的坐標可以是平面上的（x，y）也可以是空間上的(x，y，z)，都可以確定一個質點的位置和方向。 Maven中有很多構件，為了能夠自動化解析任何一個構件

SpringMVC與Springfox(Swagger2)整合詳解以及涉及的問題處理

        Swagger 是一個規範和完整的框架，用於生成、描述、呼叫和視覺化 RESTful 風格的 Web 服務。總體目標是使客戶端和檔案系統作為伺服器以同樣的速度來更新。檔案的方法，引數和模型緊密整合到伺服器端的程式碼，允許API來始終保持同步

框架整合——SpringMVC與MyBatis整合（超詳細）

SpringMVC與MyBatis是我們現在最流行的開發框架組合之一，這裡我來整理一下框架的整合搭建過程 前言 使用IDE：IntelliJ IDEA JDK：1.8 開啟IDEA，新建maven工程 第一步：開啟IDEA，點選Create New Pro

SpringMVC與MyBatis的整合

SpringMVC與MyBatis的整合 1、檔案結構圖 所有需要的JAR包都引入以後，首先進行Spring與MyBatis的整合，先看一個專案結構圖：            

activemq 學習系列(五) activemq 與 spring boot 整合

-a pool autowire mapping pri control ESS fin tid activemq 與 spring boot 整合 1、添加依賴 <dependency> <groupId>

springmvc 與 springfox-swagger2整合

一、pom.xml引入基於maven的swagger依賴 　　　　　<dependency> <groupId>io.springfox</groupId> <artifactId>springfox-sw

一起來學大資料｜整合SpringMVC與Mybatis，各司其職相得益彰

  我們在上篇的文章中學習了在網頁上展示一個簡單 的商品頁面，而我們真正需要的是與資料庫之間結合。 今天我們就一起來看看持久層最優秀的mybatis和控制層最優秀的spring最佳整合。 整合思路 Dao層： 1、SqlMapConfig.xml，這裡我們只需

JavaEE MyBatis與Spring的整合——基於mapper介面方式開發（教材學習筆記）

在MyBatis與Spring的整合開發中雖然可以通過傳統的DAO開發方式，但是採用DAO方式會產生大量的重複程式碼，因此學習另外一種程式設計方式就很重要了，即Mapper介面程式設計（本章程式碼是基於上一篇部落格的點這裡） 一、基於MapperFactoryBean的整合 Mapper

JavaEE Spring與MyBatis的整合之傳統DAO方式整合（教材學習筆記）

在實際開發中MyBatis都是與Spring整合在一起使用的，在之前學習了MyBatis與Spring，現在來學習如何使他們整合 首先建立一個名為chapter10的web專案 一、環境搭建 1.準備好所有的有關jar包，具體如下： 將上面所有jar包新增到專案lib目錄下

SpringMVC學習(一)——SpringMVC介紹與入門

SpringMVC介紹 SpringMVC是什麼？ SpringMVC和Struts2都屬於表現層的框架，它是Spring框架的一部分，我們可以從Spring的整體結構中看得出來： SpringMVC處理流程 SpringMVC處理流程如下圖

akka學習教程(十二) Spring與Akka的整合

akka系列文章目錄 概述 近年來隨著Spark的火熱，Spark本身使用的開發語言Scala、用到的分散式記憶體檔案系統Tachyon（現已更名為Alluxio）以及基於Actor併發程式設計模型的Akka都引起了大家的注意。瞭解過Akk