Ckeditor + Ckfinderを使用したJavaScriptファイルアップロードケースの詳細な説明

1. 準備

Ckeditor_4.5.7_full + Ckfinder_java_2.6.0

2. 減圧

1. 通常のファイルを解凍するのと同じように、ckeditor を解凍します。

和平常文件解壓相同，正常解壓即可

2. ckfinder を解凍します。解凍後、ckfinder フォルダーに入り、CKFinderJava-2.6.0.war ファイルを見つけます。解凍を続けます。

這里寫圖片描述

3. 赤い枠に注目

這里寫圖片描述

3. 統合を開始する

1. 準備が完了したら、図 1 の ckeditor と図 3 の ckfinder フォルダーを自分のプロジェクトの WebContent にコピーします。 WebContent の下に新しいフォルダー「assets」を作成しました。

這里寫圖片描述

2. 新しいJSPページを作成する

<%@ ページ language="java" contentType="text/html; charset=UTF-8"
    ページエンコーディング="UTF-8"%>
<%@ タグライブラリ uri="http://java.sun.com/jsp/jstl/core" プレフィックス="c"%>
<%
    文字列パス = request.getContextPath();
    文字列 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>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="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>
<本文>
    ${ベース}
    <p>
    <h1>${メッセージ }</h1>
    <フォーム>
      <テキストエリア名="エディター1" id="エディター1" 行数="10" 列数="80">
          これは CKEditor に置き換えられるテキストエリアです。
      </テキストエリア>
    </フォーム>
    <!-- ckeditor を使用して、ID editor1 のテキストエリアを操作します -->
    <script type="text/javascript">
        var editor = CKEDITOR.replace( 'editor1' );
        CKFinder.setupCKEditor(エディター、'${base }/assets/ckfinder/');
    </スクリプト>
</本文>
</html>

この時点で、リッチテキストエディターがすでに表示されます。

3. 図に示すようにディレクトリに入り、config.xml を独自のプロジェクトの WEB-INF にコピーし、ファイルの名前を ckfinder.xml に変更して、lib の下の jar パッケージをインポートします。

這里寫圖片描述

4. ckfinder.xmlを変更する

這里寫圖片描述

Basedir は、ファイルが保存される物理パスです。プロジェクトがコンピューター上で実行されているときに、プロジェクトの実行パスを見つけて、それを保存する場所を探します。（表現がわかりにくい場合はプライベートメッセージを送ってくださいね〜）
5. ckeditorのconfig.jsファイルを変更する

CKEDITOR.editorConfig = 関数(config) {
    config.height = 300;
    config.enterMode = CKEDITOR.ENTER_BR; // 削除 <p>
    config.shiftEnterMode = CKEDITOR.ENTER_BR; // 削除 <p>
    config.toolbarCanCollapse = true; //ツールバーを折りたたむことができます config.toolbarGroups = [
        { 名前: 'ドキュメント'、グループ: [ 'モード'、'ドキュメント'、'doctools' ] },
        { 名前: 'クリップボード'、グループ: [ 'クリップボード'、'元に戻す' ] },
        { 名前: 'フォーム'、グループ: [ 'フォーム' ] },
        { 名前: '段落'、グループ: [ 'リスト'、'インデント'、'ブロック'、'配置'、'bidi'、'段落' ] },
        { 名前: '編集'、グループ: [ '検索'、'選択'、'スペルチェッカー'、'編集' ] },
        { 名前: '挿入'、グループ: [ '挿入' ] },
        '/',
        { 名前: 'スタイル'、グループ: [ 'スタイル' ] },
        { 名前: 'basicstyles'、グループ: [ 'basicstyles'、'cleanup' ] },
        { 名前: '色'、グループ: [ '色' ] },

        { 名前: 'その他', グループ: [ 'その他' ] },
        { 名前: 'リンク'、グループ: [ 'リンク' ] },
        { 名前: 'about', グループ: [ 'about' ] },
        { 名前: 'ツール'、グループ: [ 'ツール' ] }
    ];
    config.removeButtons = 'About、Flash、Form、Checkbox、Radio、TextField、Textarea、Select、Button、ImageButton、HiddenField、NewPage、Templates、Scayt、Language、Smiley、Iframe、Save、SelectAll、CreateDiv、BidiRtl、BidiLtr、ShowBlocks';
    var p='/Ckeditor/assets/';
        config.filebrowserBrowseUrl =p+'ckfinder/ckfinder.html'; 
        config.filebrowserImageBrowseUrl = p+'ckfinder/ckfinder.html?type=Images';
        config.filebrowserFlashBrowseUrl = p+'ckfinder/ckfinder.html?type=Flash';
        config.filebrowserUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
        config.filebrowserImageUploadUrl =p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
        config.filebrowserFlashUploadUrl = p+'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};

6. web.xmlに次のコードを追加します。

<サーブレット>
        <servlet-name>コネクタサーブレット</servlet-name>
        <サーブレットクラス>com.ckfinder.connector.ConnectorServlet</サーブレットクラス>
        <初期化パラメータ>
            <説明>
                設定ファイルへのパスはアプリケーション内の相対パスにすることができます。
                ローカル ファイル システム上の絶対パスまたは UNC パス。
            </説明>
            <param-name>XMLConfig</param-name>
            <パラメータ値>/WEB-INF/ckfinder.xml</パラメータ値>
        </init-param>
        <初期化パラメータ>
            <param-name>デバッグ</param-name>
            <param-value>false</param-value>
        </init-param>
        <起動時に読み込む>1</起動時に読み込む>
    </サーブレット>
    <サーブレットマッピング>
        <servlet-name>コネクタサーブレット</servlet-name>
        <url-pattern><!--このパスは、プロジェクトの下の ckfinder フォルダーを見つけるために使用できます-->
            コネクタは、次の例のように、
        </url-パターン>
    </サーブレットマッピング>

7. 実行して効果を確認します。

Ckeditor+Ckfinder を使用して JavaScript でファイルをアップロードする場合の詳細な説明については、この記事で終わります。Ckeditor+Ckfinder を使用して JavaScript でファイルをアップロードする場合の関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: