Plone4のHTMLエディタ(TinyMCE)のツールバーに独自のボタンを追加する

動機

Plone4にはWYSIWYGエディタとしてTinyMCEが採用されています。

HTMLを知らないユーザーにとってページを編集する唯一のツールなので、このエディタの使い勝手はとても重要です。

デフォルトでも十分便利なエディタですが、サイトによってはお決まりのHTMLコードをツールバーのボタンを押すだけで挿入できたら便利な場面もあると思います。

そこで今回はPlone4でTinyMCEのツールバーに独自のボタンを追加するミニマムな方法を紹介したいと思います。

完成イメージ

先ずは完成イメージです。

ページ編集画面を表示すると以下のように独自のボタンが追加されます。

ボタンを押すと、カーソル位置に「ExSoft Test」という文字が挿入されます。

手順

先ず、TinyMCEのpluginコード(javascript)を記述します。

javascriptの配置方法はどんな方法でも良いですが、今回は最も前提が少なくて済むportal_skins/customにjavascriptコードをuploadする方法でいきます。

ファイル名はtinymce-testplugin.jsとします。(名前は任意です)

$(function(){

    var cmd_name = 'exsofttest';
    var btn_name = 'btn_exsoft_test';
    var plugin_name = 'plugin_exsoft_test'

    tinymce.create('tinymce.plugins.ExsoftTestPlugin', {

        init : function (ed, url) {

            var t = this;
            t.url = url;
            t.editor = ed;
            t.docs = false;

            ed.addButton(btn_name, {
                title : 'Exsoft Test',
                cmd : cmd_name
                /* image : url + '/exsofttest.gif' */
            });

            ed.addCommand(cmd_name, function (val, page) {
                var html = 'ExSoft Test';
                ed.execCommand('mceInsertContent', false, html);
            });

        }
                 
   });

   tinymce.PluginManager.add(plugin_name, tinymce.plugins.ExsoftTestPlugin);

});

addCommandに渡しているfunctionの実装だけが肝で、それ以外のコードは毎回お決まりです。

今回はこのfunctionの実装も「ExSoft Test」というplainな文字列を挿入するだけのミニマムなものとしています。

追加するボタンに使用するアイコンを指定する場合は、addButtonメソッドでURLを指定します。 今回は、既存ボタンのアイコン画像を使用する事にします。

既存ボタンのアイコンは、１つのgifファイル(*1)をbackground-positionで位置を調整する事で各ボタンのアイコンとしているので、 同じ方法でニコニコマークを独自ボタンに割り当てるためにploneCustom.cssに以下を記述します。

*1:アイコンgifは右参照 > [site-root]/portal_javascripts/Sunburst%20Theme/themes/advanced/img/icons.gif

.ploneSkin span.mce_btn_exsoft_test{
    background-position: -60px;
}

ここで指定するspanのclass名はpluginコードのbtn_nameと一致させる必要があります。(mce_のprefixは固定で付与する)

あとはPlone UIから[サイト設定] > [TinyMCEビジュアルエディタ]でTinyMCE設定画面を表示し各項目を設定します。

最初にカスタムプラグインを認識させる為に、[リソースタイプ]タブの[カスタムプラグイン]に以下を記述します。

plugin_exsoft_test|/tinymce-testplugin.js

|の左の値はpluginコード内のplugin_nameで指定した文字と一致させる必要があります。

|の右の値はpluginコードが参照できるURLと一致させる必要があります。

最後にツールバーにボタンを追加する為に、[ツールバー]タブの[カスタムツールバーボタン]に以下を記述します。

btn_exsoft_test

この値はpluginコード内のbtn_nameで指定した文字と一致させる必要があります。

お疲れさまでした。

以上で完成です。ページ編集画面のツールバーに独自のボタンが追加されている事が確認できると思います。クリックするとカーソル位置に文字が挿入されます。

あとはpluginコードを皆さんの要件にあわせるだけです。

TinyMCEのpluginコードについては本家サイトや eggs/Products.TinyMCE-x.x.x-py2.x.egg/Products/TinyMCE/skins/tinymce/plugins/table/js/table.js が参考になると思います。