CKEditorとCKFinder学習--SpringMVCの統合

26264 ワード
ckeditor ckfinder
まず効果を見てみましょう
CKEditor与CKFinder学习--整合SpringMVC_第1张图片
これはoffice 2013の肌を採用し、インタフェースボタンを最適化した効果です.
CKEditor与CKFinder学习--整合SpringMVC_第2张图片
これはbootstrapの肌です.さあ、本題に入ります.
ダウンロード
ckeditorとckfinderのダウンロード
ckeditor
Full Packageバージョン
http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.5.7/ckeditor_4.5.7_full.zip
その他のバージョン
http://ckeditor.com/download
ckfinder
JAva Free trailバージョン
https://download.cksource.com/CKFinder/CKFinder%20for%20Java/2.6.0/ckfinder_java_2.6.0.zip?
その他のバージョン
https://cksource.com/ckfinder/download
第2ステップSpringMVC構築
前の記事を参考にして、最も簡単なSpringMVCプロジェクトを構築します.
http://blog.csdn.net/frankcheng5143/article/details/50512340
プロジェクト構造を図に示す
ステップ3の解凍とコピー
3.1 ckeditor
ダウンロードするckeditor_4.5.7_full.zipを解凍してckeditorフォルダを得る
3.2 ckfinder
ダウンロードするckfinder_java_2.6.0.zipを解凍してckfinderフォルダを得る
CKEditor与CKFinder学习--整合SpringMVC_第3张图片
ckfinderフォルダにはソースディレクトリとckfinderのwarパッケージが含まれています.installとlicenseもあります.
CKFinder Java-2.6.0.warを解凍(tomcatまたは他のコンテナでtomcatを例に挙げる)するウェブappsディレクトリの下に置き、tomcat,CKFinder Java-2.6.0を起動する.warは自動的に解凍したり、解凍ツールで解凍したりします)、解凍後ckfinderフォルダを解凍します.
CKEditor与CKFinder学习--整合SpringMVC_第4张图片
注意、ここではCKFinder Java-2.6.0から.war解凍のckfinder、ckfinderからではありませんjava_2.6.0.zip解凍
3.1で解凍したckeditorフォルダとさっき解凍したckfinderフォルダをassetsディレクトリにコピー
CKEditor与CKFinder学习--整合SpringMVC_第5张图片
ckeditorとckfinderフォルダの名前を変更することはお勧めしません.後で面倒になるからです.特にckfinderの名前を変更した後、そのアップロードされたサイトが見つかりません.ckeditorのsamplesディレクトリとCHANGESをmd,README.mdとLICENSE.md削除、ckfinderの_samplesディレクトリ、changelog.txt,install.txtとlicense.txt削除.
ステップ4 jsの導入
リファレンス
http://docs.ckeditor.com/#!/guide/dev_installation
公式の例
<!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を使用するには3つのステップが必要であることがわかります.
  • ckeditorを導入する.js
  • textareaを作成し、textareaのid
    • に注意
  • 上記のtextareaをckeditorで操作し、idで制御する
    • jspで参照しましょう
    4.1 ckeditorが必要なページにckeditorを導入する.js 
    <script type="text/javascript" src="${base }/assets/ckeditor/ckeditor.js"></script>

    ここで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です.
    ブラウザのアドレスバーに入力
    http://127.0.0.1:8080/ckdemo
    または
    http://127.0.0.1:8080/ckdemo/index.html
    ckeditorが構成されていることを示す結果が表示されます.
    CKEditor与CKFinder学习--整合SpringMVC_第6张图片
    参考文献
    http://www.cnblogs.com/yuepeng/archive/2013/04/01/2992097.html
    http://docs.ckeditor.com/#!/guide/dev_installation
    ステップ5 CKFinderの統合
    前のステップCKEditorはすでに配置されていますが、図文を混ぜて文章を書くときは不便です.挿入された画像はネットワークから来なければならないので、使いにくいです.
    CKEditor与CKFinder学习--整合SpringMVC_第7张图片
    CKFinderは、ローカルのファイルをアップロードして使用することができ、次にCKFinderの構成を開始します.
    ステップ3では、必要なckfinderフォルダをassetsディレクトリの下に配置しました.ckfinderフォルダがCKFinderJava-2.6.0であることを確認してください.warで解凍されていますが、ディレクトリ構造は次のようになっています.もう一度解凍が正しいかどうかを確認します.
    5.1 ckfinderを導入する.js
    ckfinderのjsを導入して、これは私達は第4歩ですでに導入しました
    <script type="text/javascript" src="${base }/assets/ckfinder/ckfinder.js"></script>

    ステップ4のjsファイルを次のように変更します.
        <script type="text/javascript">
        var editor = CKEDITOR.replace( 'editor1' );
        CKFinder.setupCKEditor(editor, '${base }/assets/ckfinder/');
    </script>

    画像ボタンをクリックすると、ブラウズサーバーのボタンが表示され、アップロードされた切り替えカードが1つ増えます.
    CKEditor与CKFinder学习--整合SpringMVC_第8张图片
    CKEditor与CKFinder学习--整合SpringMVC_第9张图片
    表示されない場合は、パスが正しく書かれていないか、導入されたjsが導入されていないかをよく確認してください.
    5.2 webを配置する.xmlとckfinder.xml
    しかし、この時点ではサーバの画像リソースを閲覧することはできず、ckfinder.を導入する必要がある.xml、webを構成します.xml
    リファレンス
    http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending
    ステップ3でCKFinder Java-2.6.0.war解凍後のconfig.xmlはWEB-INFディレクトリにコピーします.名前を変更したほうがいいです.ckfinderと名付けます.xml
    CKEditor与CKFinder学习--整合SpringMVC_第10张图片
    CKEditor与CKFinder学习--整合SpringMVC_第11张图片
    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>

    CKEditor与CKFinder学习--整合SpringMVC_第12张图片
    注意事項
    上の
    <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パッケージは必要に応じて自分で導入すればいいです.
    CKEditor与CKFinder学习--整合SpringMVC_第13张图片
    構成が完了したら、サーバを起動します(ここではtomcatを使用しています)
    ブラウザアクセス
    http://127.0.0.1:8080/ckdemo/index.html
    画像を挿入し、ブラウズサーバをクリックするとckfinderの対応するURLが開きます.
    アクセスできないことに気づき、ckfinderを構成します.xml
    configラベルの下の最初のサブラベルenabledをtrueに設定すればいい、config.xmlの15行目.
    <enabled>true</enabled>

    詳細については、
    http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/Extending
    2つ目のオプションの変更点はbaseURLで、変更しないとアップロードされたファイルはwebコンテナwebappsROOTCKFinder Javauserfilesに置かれます
    CKEditor与CKFinder学习--整合SpringMVC_第14张图片
    ブラウズファイルも上記のディレクトリからブラウズします.
    デフォルト設定は次のとおりです.
    <baseURL>/CKFinderJava/userfiles/</baseURL>

    私たちの住所に変更できます
    <baseURL>http://127.0.0.1:8080/ckdemo/assets/CKFinderJava/userfiles/</baseURL>

    springmvcはすべてのリクエストをブロックするので、assetsディレクトリの下に置きます.
    詳細設定、参照
    http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java/Configuration/baseURL_and_baseDir
    ここまでファイルをアップロードして、サーバーからファイルをブラウズすることができます.
    CKEditor与CKFinder学习--整合SpringMVC_第15张图片
    サーバーの既存の画像を閲覧できます
    画像をアップロードすることもできます
    画像をアップロードしている間に、アップロードして正常に表示できない場合は、中国語の文字化けしているかどうかを確認してください.中国語の文字化けしたらtomcatサーバの構成serverを変更します.xmlの65番目の動作.
    <Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>

    はい、図文混成を始めることができます.
    リソースのダウンロードアドレス
    http://download.csdn.net/detail/frankcheng5143/9464707
    ckeditorのカスタムボタン構成については、ckfinderのセキュリティアクセスについては、後で書きます.
    参考文献
    http://docs.ckeditor.com/#!/guide/dev_installation
    http://docs.cksource.com/CKFinder_2.x/Developers_Guide/Java
    deviseの導入方法
    Python:ヒューマン・マシン・インタラクションからアート・デザインへ