JSPで行こう!

TinyMCE4から5へバージョンアップ

TinyMCEのバージョンを 4.8 から 5.7 に上げます。

大きな不満は無かったのですが「画像」の ファイルアップロード がバージョン5以降から使えるようで、従来からファイルアップロードは TinyMCE とは関係なく別に実装していましたが、クリップボードからの貼り付けにも対応しているかもしれないので使ってみました。

バージョンアップ作業ですが、まず最新版(この時点では、5.7.1)をダウンロードします。前のディレクトリ("tinymce")はリネームして何かあったら直ぐに元に戻せるようにしておきましょう。後は、/webapps/{アプリケーション名}に解凍します。

とりあえず解凍したままで使ってみました。
見た感じでは、特に不具合は無いようです。

※ なお、4.x から 5.x では大きな変更は無かったようですが、3.x 以前からのバージョンアップは変わっているので注意が必要だと書いてあります。

画像のアップロードの設定

さて、5.7へのバージョンアップが出来ましたが、TinyMCE だけでアップロード機能は作れません。
サーバー側でファイルを受ける機能を作る必要があります。
幸い、サーバー側でのアップロード処理は使用している言語に関わらず同じですので、既に実装していればそのまま使えるはずです。
アップロードしてデータベースに登録する機能は作ってありますので、TinyMCEからのリクエストが特別で無い限り動くと思われます。

TinyMCEの画像メニューでアップロード画面を表示させるには、次の設定が必要です。
簡単で、初期化の際に次の1行を追加するだけです。

tinymce.init({
  selector: '#textarea1',  // TinyMCEを適用する html の要素(既に設定されているはず)
  :
  images_upload_url: 'uploader_json_mce.jsp', // サーバー側の呼び出しURL
});

さらに、呼び出すサーバー側のJSPですが、以前作った JSON を返すもので、成功時に次の様な、リンクURLを含む JSON 文字列を返してあげます。

out.print("{\"location\":\"image_dsp.jsp?id=" + file_id + "\"}");

たったこれだけでした。
なお、「コピー&貼付」は出来ないようで、ちょっと残念です。
クリップボードからのコピーも出来るはずなので、ちょっと頑張ってみますか・・・。

« 前頁 次頁 »