Home > MovableType > Movable Typeにてカスタムフィールドにリッチテキストエディタを適用する場合

Movable Typeにてカスタムフィールドにリッチテキストエディタを適用する場合

MTAppjQuery版でカスタムフィールドにリッチテキストエディタを適用

この記事を記載している時点の検索上で一番に引っかかる記事が http://qiita.com/BUN/items/3b924cfcfc0c689553bf ですがこのURL通りで設定すると画像が挿入出来ないという自体に陥ります。

コメント欄でもやり取りがされていますが、最終的に解決していないようなので掲載。なお、プラグイン版 https://github.com/miyanaga/mt-tinymce-field を利用する方法もあり、こちらは正常に画像挿入出来ます。

但し、プラグイン版は複数行ではなく新たに新しいカスタムフィールドを作成する事になります。 既に作成してしまった複数行カスタムフィールドをリッチテキストにしたい場合、プラグイン版のほうだと新たにカスタムフィールドを作成しないとリッチテキストエディタ化出来ません。

ポイント

ポイントは下記のコードを入れることです。(複数行のカスタムフィールドを hoge という設定で作成した場合)

jQuery('textarea[id^="customfield_hoge"]').attr('id', "richfield");

一度既存のテキストエリアのIDを書き換えてセットしてやります。全体は下記のようになります。

    var _esm = MT.App.EditorStrategy.Multi;
    var _create = _esm.prototype.create;
    var _set = _esm.prototype.set;

    jQuery('textarea[id^="customfield_hoge"]').attr('id', "richfield");

    _esm.prototype.create = function(app, ids, format) {
        jQuery('textarea[id^="richfield"]').each(function(i) {
            ids.push(this.id);
        });
        _create.apply(this, arguments);
    };

Chromeのデバッグツールを起動するとわかるのですが、上記のIDを書き換える作業をしないと画像挿入動作をするとエラーを吐きます。

そこからMTのコードをgrepしていくと本来は window.parent.app.insertHTML が実行されないといけないのですが、これが customefield から始まるIDだと top.insertCustomFieldAsset というのを実行しエラーになります。

上記のようなかたちになり、詳細は割愛いたしますが画像は挿入出来るようになるはずです。

概要欄でも出来たのは excerpt だったから

コメント欄でもあるとおり概要をリッチテキストエディタ化出来たのは customfield から始まるIDではなかったというところです。

その他

素直にプラグイン版を使ったほうがいい感じもします。 どこかのタイミングで本家がリッチテキストエディタ化出来るようにしそうですが。

Comments:0

コメントする

Home > MovableType > Movable Typeにてカスタムフィールドにリッチテキストエディタを適用する場合

Search

Feeds

Return to page top