MTに独自のエディタを追加する

10078 ワード
MovableType MovableType テキストリンク

Movable Typeの記事編集画面にある本文のエディタはプラグインで追加できるようになっています。リッチテキストフォーマットで使えるTinyMCEも本体組み込みではなくプラグインとして実装されています。

プラグインからエディタを追加するのはとても簡単です。config.tamlに以下を記述するだけです。

config.yaml
id: MyEditor
name: My Editor
version: 0.00
description: The my editor.

editors:
    myeditor:
        label: My Editor
        template: editor.tmpl

text_filters:
    my_format:
        label: My format
        code: ...

editorsの下にエディタの識別子を入れ、その中にエディタの名前とテンプレートのファイル名を指定します。エディタはフォーマットに結び付けられるので、必要であれば独自のフォーマットも定義しておきます。

エディタのテンプレートは入力欄の部分にはめ込まれるとかではなく、単に編集画面の先頭にインクルードされるだけです。大抵はJavaScriptを読み込むだけなので、以下のようにして独自のJSファイルを読み込む記述を追加します。

tmpl/editor.tmpl
<mt:setvarblock name="js_include" append="1">
<script type="text/javascript" src="<mt:Var name="static_uri"/>plugins/MyEditor/my_editor.js"></script>
</mt:setvarblock>

ここからが本番です。エディタの実体はJavaScriptのMT.Editorを拡張したオブジェクトです。エディタオブジェクトを定義するコードを先ほどのJSファイルに記述していきます。

まずはクラスメソッド的なものを定義していきます。

MT.Editor.MyEditor = function() { MT.Editor.apply(this, arguments) };

$.extend(MT.Editor.MyEditor, MT.Editor, {
    isMobileOSWYSIWYGSupported: function() {
        return false;
    },
    formats: function() {
        return ['my_format'];
    },
});

isMobileOSWYSIWYGSupportedメソッドはモバイルでもWYSIWYGをサポートするかどうかを返すものです。
formatsメソッドはこのエディタがサポートしているフォーマット郡を返すメソッドです。ここでは独自のmy_formatのみをサポートしていることにします。

続いてインスタンスメソッド的なものを定義します。

$.extend(MT.Editor.MyEditor.prototype, MT.Editor.prototype, {
    initEditor: function(format) {
        console.log('initEditor:', format);

        this.$textarea = $('#' + this.id);
        this.$editorArea = this.$textarea.parent();

        this.$box = $('<div style="height:100px;border:dashed 2px #f00; text-align:center; font-size:30px">My Editor</div>').appendTo(this.$editorArea).hide();

        this.setFormat(format, true);
    },
    setFormat: function(format, calledInInit) {
        console.log('setFormat:', format, calledInInit);
        this.$textarea.hide();
        this.$box.show();
    },
    hide: function() {
        console.log('hide');
        this.$textarea.show();
        this.$box.hide();
    },
});

initEditorメソッドはエディタの初期化時に呼ばれるメソッドです。ここではテキストエリアの代わりに表示する適当な要素を用意しています。
setFormatメソッドは他のフォーマットから切り替えられた時に呼ばれるメソッドで、エディタの表示処理を行います。初回はinitEditorメソッドしか呼ばれないので自分で呼び出します。
hideメソッドは他のエディタに切り替えられた時に自分を隠すためのメソッドです。これを実装しないと他のエディタでも表示されっぱなしになってしまいます。

最後に以下のコードでMT.EditorManagerにエディタを登録します。

MT.EditorManager.register('component', MT.Editor.MyEditor);

これをMTに組み込むとこんな感じになります。

あとはエディタの機能をひたすら実装すればエディタが完成します。