Movable Type のプレーンエディタを拡張する ExtendPlainEditor プラグイン

先日 tagAssist プラグインを導入しようと思ったものの、MT6 では利用できないことを知りました。 自分なりに調べてみたところ、 TinyMCE がプラグインとして実装されている MT 5.2.x 以降は残念ながら使えなくなったようです。

そこで、勉強がてら同様の機能を追加できるプラグインを作ってみました。

インストール方法

GitHub のリポジトリから、最新版を入手してください。

fa-github: mt-plugin-ExtendPlainEditor：https://github.com/dreamseeker/mt-plugin-ExtendPlainEditor

プラグインのディレクトリ構成は、下記のとおりです。
mt-static と plugins へそれぞれアップロードします。

mt-plugin-ExtendPlainEditor
├── mt-static
│   └── plugins
│       └── ExtendPlainEditor
└── plugins
    └── ExtendPlainEditor

インストールできていれば、ブログやウェブページの編集画面で「フォーマット:」のプルダウンから「リッチテキスト」以外を選択するとボタンが増えているハズです。

スクリーンショット

ボタンのカスタマイズ

現状では管理画面からボタンの有効・無効などを操作する機能はありません(※今後、実装するかも判りません)ので、ボタンのカスタマイズは mt-static のプラグインディレクトリにある extension.js を編集してください。

並び順の変更や任意のボタンを追加する場合は、3行目の buttons を調整します。

buttons = 'ext_btn_div,ext_btn_span,ext_btn_pre,|,ext_btn_h1,ext_btn_h2,ext_btn_h3,ext_btn_h4,ext_btn_h5,ext_btn_h6,|,ext_btn_img_left,ext_btn_img_right';

ここで定義したボタンがどのような振る舞いをするかは、20行目以降の addButton でセットしています。
参考までに、div 要素を追加するボタンの定義は以下の通りです。

// div
ed.addButton('ext_btn_div', {
    title: 'div',
    onclick: function(e) {
        e.preventDefault();
        $('#' + ta)
            .selection('insert', {text: '<div>', mode: 'before'})
            .selection('insert', {text: '</div>', mode: 'after'});
    }
});

title にツールバーへ表示するテキストを指定し、click イベント時に選択テキストの前後にタグを挿入するようになっています。

なお、制作にあたって MT 標準の TinyMCE プラグインが選択範囲をどのように保持しているのか？がよく判らなかったため、選択されたテキストの取得は jQuery.selection プラグインを利用させていただきました。

fa-github: jQuery.selection：https://github.com/madapaja/jquery.selection

こちらもあわせて、ご確認ください。

作ってみて気づいたこと

「フォーマット：リッチテキスト」以外の場合でも、ツールバーは TinyMCE で初期化してるんですね。
それでいて、入力欄は textarea のまま・・・ということに気が付かず、しばらく選択テキストが取れずに悩んでしまいました(｡-_-｡)

comments powered by Disqus