>  >  >  > 

EC-CUBEにTinyMCEを導入する方法

EC-CUBEにTinyMCEを導入する方法

どうも吉塚のポケモンおじさんことムラタです。

今回はEC-CUBE(Ver2.13.5)にWordpressを触ったことがある人には馴染み深いエディター「TinyMCE」を導入してみます。

目次

  1. TinyMCEをダウンロードする
  2. TinyMCEをEC-CUBEに設置する
  3. TinyMCEの設定
  4. 最後に

TinyMCEをダウンロードする

それでは早速TinyMCEを下記URLからダウンロードしましょう。
今回はVer4.4.0となります。

CDNも用意されているのでそちらを利用してもいいですね。

TinyMCEをEC-CUBEに設置する

本体ファイルを設置する

ダウンロードが完了したらファイルを展開してEC-CUBE内の「html/js/」に移します。

次にEC-CUBEの「data/Smarty/templates/admin/main_frame.tpl」を開き、</head>直前で

とします。
もしくは前述したと通り、CDNも利用できるので、

としてもOKです。

TinyMCEを適用する

本体ファイルが設置できたら次に商品登録(編集)画面のtextareaに対してTinyMCEを適用させます。

data/smarty/templates/admin/products/product.tpl」を開き、既存の<script>内の末尾に書きを追記します。

これだけです。
では実際にEC-CUBE管理画面にアクセスして商品登録(編集)画面にアクセスしてみましょう。
全てのtextareaが以下のようになっているはずです。

01

以上で実装は終わりです。
・・・が、全部が全部TinyMCEを適用したくなかったり余計な機能がありすぎるので逆に入力しづらいと思う人もいると思います。

そういった時のためにテキストエリア毎にTinyMCEのオプションを設定をしてみましょう。

TinyMCEの設定

任意のテキストエリアのみ適用

ではまずhtmlタグの使用が許可されている「詳細-メインコメント」に対してだけTinyMCEを適用してみましょう。
※事前に使用したいhtmlタグを「マスターデータ管理」の「mtb_allowed_tag」より設定しておいてください。

先ほどと同じく「data/smarty/templates/admin/products/product.tpl」を開き、「詳細-メインコメント」のtextareaタグを探します。316行目付近に記述があると思います。

該当のtextareaを見つけたら何か適当なID名を付与します。今回は仮に「id=”detail-maincomment”」とします。

次に先ほど<script>末尾に記述したTinyMCEのselectorオプションを編集します。

こうすることで「detail-maincomment」IDを持つテキストエリアのみTinyMCEが適用されます。

02

オプションを設定する

TinyMCEでは特に指定がない場合、様々な機能がデフォルトで付与されていますが、不要な項目に関しては予めこちらで外してあげたほうが親切ですよね。
オプションを指定して不要な項目を外したり、足りないものを追加したりしてみましょう。

日本語化

まずTinyMCEを日本語化してみます。
日本語化するにはオプション指定する前に日本語の翻訳ファイルをダウンロードしてくる必要があります。

TinyMCE公式サイトから「Download」→「Additional Download」→「Language Packages」へ移動します。

03

様々な言語の一覧が表示されるので、その中から「Japanese」を探し、「Download」ボタンをクリックしてファイルをダウンロードします。

ダウンロードしたファイルを解答すると「ja.js」というファイルが入っていると思うのでそのファイルを「/js/tinymce/js/tinymce/langs/」の中に設置します。
※CDNを利用している場合はどこか適当な場所に設置してください。

product.tplに戻り、TinyMCEの記述に「language: “ja”」を追加します。

CDNを利用している人は先ほどダウンロードした言語ファイルの場所を別途指定する必要があります。

これで日本語化できていると思います。確認してみましょう。

「ファイル」「編集」「表示」…のようにちゃんと日本語化できていることが確認できます。

メニューバーを削除

TinyMCEのメニューバーと呼ばれるエリアには様々な機能がありますが、今回は不要なので削除します。

「menubar」オプションを「false」とするだけです。

エディター上部にあったエディターが無くなったのが確認できると思います。

ステータスバーを削除

エディターの下部には現在選択しているhtmlタグが何なのかを表示してくれる「ステータスバー」があります。

06

別に削除する必要は無いとは思いますが、より見た目をシンプルにするために削除してみましょう。
「statusbar」オプションを「false」とします。

これでエディター下部からステータスバーが無くなりました。

07

ツールバーの内容を変更する

メニューバーの下にあるツールバーと呼ばれるワンクリックで様々なhtmlタグを呼び出せるエリアがあります。次はここの内容を変更してみます。

08

デフォルトでは上記のように「戻す」「やりなおす」「書式スタイル」「太字」「斜体」「左揃え」「中央揃え」「右揃え」「中央揃え」「箇条書き」「番号付き箇条書き」「インデントを減らす」「インデントを増やす」が用意されています。

今回はこれを「太字」「斜体」「箇条書きリスト」「番号付き箇条書きリスト」の4つに機能を絞ってみます。

「toolbar」オプションに必要な機能の名前を入力します。

機能ごとを半角スペースで区切り「|」を入れることでツールバー内に区切り線を入れることが可能です。

09

だいぶスッキリしましたね。
削除ではなく追加したい場合は公式サイトの下記ページを参考に記述してください。

オリジナル要素ボタンを追加する

例えば特定のクラスやIDを含んだ要素を入力して欲しいけど入力する人の知識が乏しい場合にソースコードを触ってもらうのは難しい・・・といった時は、それ専用のボタンを用意してワンクリックで出力できるようにしてあげましょう。

例として「btn」クラスを持つa要素

をボタンとして追加します。

まずsetupオプションに下記の記述をします。

上から順に説明していくと、「addButton」で第一引数に任意のボタン名を設定します。今回は「orgbutton」とします。

そして第二引数にボタンの詳細を設定していきます。
「text」は表示されるボタンテキストになるので「リンクボタン」とします。
※「image」を指定し、テキストではなく画像とすることも可能です。

「onclick」はクリックされた時に行う処理を記述します。
エディターに対して要素を追加するので「editor.insertContent」とし、引数に追加する内容を記述します。

ここまでできたら「toolbar」オプションの適当な場所にaddButtonで指定した任意のボタン名を入れてあげることで、設定したボタンがツールバーの中に追加されます。

上記の結果が下記になります。

10

複数のオリジナル要素をひとつのボタンにまとめる

オリジナル要素のボタンをツールバーに追加することができましたが、オリジナル要素が他にも沢山あって最終的にツールバーが2段、3段になって収まりが悪い・・・といった場合、要素をまとめて1つのボタンの中に収めてしまいましょう。

先ほどと同じくsetupにaddButtonでボタンを追加するまでは一緒ですが、今度は「type」と「menu」をオプションに追加しましょう。

「type」に「menubutton」を指定し、「menu」の中に更にボタンの内容を記述していくといった感じです。

上記の結果が下記になります。

11

「パーツセット」というボタンが追加され、それをクリックすると中にグループ化したボタンが表示されます。
これでたくさんオリジナル要素があってもスッキリまとめられますね。

エディターにcssを読みこませる

エディター内の見た目を実際に出力する画面と同じ見た目にしたほうが入力する人も分かりやすくて良いですよね。

そういった時は「content_css」オプションを指定します。

cssを更新しても全然反映されないって人はcssファイル名の後ろにURLパラメーターを渡してキャッシュを回避してあげてください。

12

これでエディター内の見た目も実際の画面と近くなりだいぶ分かりやすくなりましたね。

エディターの高さを変更する

先ほどのスタイルをあてた画面をみると分かりますがデフォルトのエディターの高さのままだと低すぎてせっかく見た目を合わせても台無しです。
そこで「height」オプションを指定して高さを設定してあげましょう。

視える範囲が拡大されてさらに見やすくなりました。

13

画像アップローダーを追加する

最後にエディター内に画像をアップロードして貼り付けられるようにしてみましょう。

TinyMCEのデフォルトには画像に関するボタンを設定されていないので、まずプラグインとして追加してあげる必要があります。

「plugins」オプションに「image」を指定した後、「toolbar」にも「image」を指定します。

これで画像ボタンが追加されたのが確認できると思います。

14

ただしこの画像ボタン、内容としてはサーバー上にアップしている画像のパスを指定して貼り付けるというだけで、ここから画像をアップする機能は付いていません。

15

さすがにこれだと使えたものではないので、別途アップローダー付きのプラグインを実装します。

アップローダー付きプラグインは探せば色々あるのですが、今回は「jbimages」というプラグインを使用します。

サイト内の「Download@Github」ボタンよりファイルをダウンロードし、「/js/tinymce/js/tinymce/plugins/」に「jbimages」というディレクトリを作成してその中に解凍したファイルを全て設置します。

設置が済んだら先ほどの「plugins」と「toolbar」の記述に「jbimages」を追加します。

これで先ほどの画像ボタンの隣に新しくアップローダー付き画像ボタンが追加されていると思います。

16

17

このアップローダーはデフォルトの画像のアップロード先を「/images」としていますが、このアップロード先を変更するにはアップしたプラグインファイルの中の「config.php」を編集します。

編集する箇所は41行目付近の下記になります。

※お使いのサーバーによってはアップロード先のディレクトリのパーミッションを変更する必要があるので要注意です。

感のいい人は薄々分かっていると思いますがCDNを利用している場合は日本語化の時と同じく、上記の設定ではプラグインが適用されませんので「external_plugins」オプションにURLを指定してあげる必要があります。

※この場合のアップロード先の変更がどう指定するのか分かりませんでした・・・

最後に

いかがだったでしょうか?
使い方によっては商品登録ページにかなり柔軟な項目の追加が可能になるかと思います。

TinyMCEのオプションに関してはかなり多岐にわたって設定が可能かと思いますが、ドキュメントは英語のみですし、検索してもWPのTinyMCEについての記事ばかりがヒットしてしまうため、なかなか把握するのが難しいですが今後EC-CUBEに限らず色々な場面で活用していけると良いのではないでしょうか?

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
究極の間食|おやつの王様