TinyMCEを使う

さて、文章の保管まで出来ると、次は多少欲が出ます。

JSPとは直接関係ありませんが、本文を単純にテキストで編集するのは、ちょっとつまらないですね。
そこで WordPress の様に、TinyMCE を使って、リッチテキストで編集できるようにしましょう。

TinyMCE を"素"から使うのは、私も始めてです。
導入手順ですが、詳しい解説は別のサイトにおまかせして、ざっと

1. TinyMCEをダウンロードして webapps/[app名]配下に置く
2. HTML で CSS と JavaScript を読み込む
3. JavaScript で初期化設定を記述

バージョンは、4.8.2 です。
デフォルトですと、使える部品が少ないです。
下記のプラグインを入れました。
プラグインはダウンロードに含まれているので、該当する JavaScript を読み込むだけです。

• color text
• table
• image
• link

「color text」 が自動ではツールバーに表示されないので、
初期化設定に追加する必要がありました。
若干面倒なのは、デフォルトで表示されている部品も調べて設定し直しする必要があります。

tinymce.init({
    selector: "#richtext",
    language: "ja", // 言語 = 日本語
    branding: false, // クレジットの削除
    plugins: "table link code textcolor image",
    toolbar: "undo redo | styleselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | link | image",
  });

以上で完成ですが、なかなか良いですね。
これだけで一挙に CMS らしくなりました。
なお、JSP のロジックは一切変更していません。

★ 後で判りますが、編集対象の TEXTAREA に表示する文字列内のタグ文字はエスケープ処理が必要です 

近年のクライアントサイドの UI は本当にすごいと思います。

 

 

« 前頁

次頁 »