Home > MovableType > TinyMCE for Movable Type のカスタマイズ

TinyMCE for Movable Type のカスタマイズ

  • Posted by: master
  • MovableType

Movable Type Advent Calendar 2015

この記事は Movable Type Advent Calendar 2015 の記事になります。
http://www.adventar.org/calendars/1035

時間があれば連載するかもしれない第一回目の TinyMCE の記事になります。

  1. TinyMCE for Movable Type のカスタマイズ
  2. MT & Selenium WebDriver for Ruby による自動テスト
  3. 企画職が作成する MT プラグインで何かしら作る際の手順

TinyMCE for Movable Type について

個人的に思うところで

  • ドキュメントが公式のもの以外少ない
  • 記事を書く人にとって一番使う部分
  • デフォルトのままだと機能が足りない

上記のような感想があります。
カスタマイズする際結構手間になるので、今回はカスタマイズを一部紹介したいと思います。

なお、MTの標準タイプはボタンが少ないですがTinyMCEの全ボタン表示はかなりな数になります。
http://archive.tinymce.com/tryit/3_x/full.php

参考ドキュメント

カスタマイズ知識として公式TinyMCEのページが参考になりますのでこのページを元にカスタマイズすると良いと思います。

http://archive.tinymce.com/wiki.php/Configuration3x

また mt-static 以下のファイルもしくはTinyMCE自体にある TinyMCE の tiny_mce_src.js も参考になります。
https://github.com/movabletype/movabletype/blob/master/mt-static/plugins/TinyMCE/tinymce/tinymce_src.js

標準ボタンの値をカスタマイズ

例えば標準ボタンのインデント値を変更したいといった場合

  1. デフォルトのインデントボタンを削除して新しくインデントボタンを作成
  2. デフォルトのインデントボタンを上書き
  3. インデント設定値部分を直接変更

ぱっと思いつく限り上記のパターンがありますが、今回は2番での紹介です。

最も簡単なカスタマイズ

公式ドキュメントにある通りに indentaition に値を指定すると完了します。

http://archive.tinymce.com/wiki.php/Configuration3x:indentation

tinyMCE.init({
        ...
        indentation : '20pt'
});

上記はドキュメントを読むと見つけられる部分なのですが、ここで終わるとカスタマイズ感がないので掘り下げてみます。

もう少し掘り下げて標準ボタンの値の設定場所を探す

標準のボタンは 30px インデントする指定となっています。この指定は tiny_mce_src.js の self.settings 部分で設定されています。(これは indentation で検索するとすぐ見つかる部分です。)

# 13253行目
indentation : '30px'

簡単なカスタマイズでは init でこの値を上書いて変更したことがわかります。

なお tiny_mce_src.jstiny_mce.js の圧縮前のコードになります。
実際にMTが読み込んでいるのは tiny_mce.js のほうになります。

開発ツールで設定値を確認する

実際にその値が設定されてるか、Chrome の開発ツールでも確認する事が出来ます。

MTの新規記事画面もしくは記事編集画面で開発ツールを開き「Console」画面を開きます。
そこで下記を打ってみると現在の値が取得出来ます。

tinymce.settings.indentation

上記以外にも self.settings 部分で指定されている値を取得できることがわかります。例えば下記も取得できます。

tinymce.settings.font_size_style_values

その他に settings の初期設定は下記が設定されている事が tiny_mce_src.js からわかります。

            self.settings = settings = extend({
                id : id,
                language : 'en',
                theme : 'advanced',
                skin : 'default',
                delta_width : 0,
                delta_height : 0,
                popup_css : '',
                plugins : '',
                document_base_url : tinymce.documentBaseURL,
                add_form_submit_trigger : TRUE,
                submit_patch : TRUE,
                add_unload_trigger : TRUE,
                convert_urls : TRUE,
                relative_urls : TRUE,
                remove_script_host : TRUE,
                table_inline_editing : false,
                object_resizing : TRUE,
                accessibility_focus : TRUE,
                doctype : tinymce.isIE6 ? '' : '', // Use old doctype on IE 6 to avoid horizontal scroll
                visual : TRUE,
                font_size_style_values : 'xx-small,x-small,small,medium,large,x-large,xx-large',
                font_size_legacy_values : 'xx-small,small,medium,large,x-large,xx-large,300%', // See: http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size
                apply_source_formatting : TRUE,
                directionality : 'ltr',
                forced_root_block : 'p',
                hidden_input : TRUE,
                padd_empty_editor : TRUE,
                render_ui : TRUE,
                indentation : '30px',
                fix_table_elements : TRUE,
                inline_styles : TRUE,
                convert_fonts_to_spans : TRUE,
                indent : 'simple',
                indent_before : 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,ul,li,area,table,thead,tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist',
                indent_after : 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,ul,li,area,table,thead,tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist',
                validate : TRUE,
                entity_encoding : 'named',
                url_converter : self.convertURL,
                url_converter_scope : self,
                ie7_compat : TRUE
            }, settings);

別の方法でカスタマイズ:コールバック

execcommand_callback というコールバックを仕込めるのでこの処理でインデントを上書くサンプルです。公式ドキュメントのサンプルは下記。

http://archive.tinymce.com/wiki.php/Configuration3x:execcommand_callback

参考にした処理は下記のようなコードです。

function CustomExecCommand(editor_id, elm, command, user_interface, value) {
        var inst, intentValue, indentUnit, value;

        intentValue = '20px';
        indentUnit = /[a-z%]+$/i.exec(intentValue);
        intentValue = parseInt(intentValue);

        switch (command) {
                case "Indent":
                        inst = tinyMCE.getInstanceById(editor_id);
                        inst.dom.setStyle(elm, 'marginLeft', (parseInt(elm.style.marginLeft || 0) + intentValue) + indentUnit);
                        return true;
        }

        return false;
}

後は init の時に execcommand_callback : CustomExecCommand のように記載すると同じようになると思います。 (実際はアウトデントの値もあわせないといけないので、アウトデントのカスタマイズも必要です)

上記は tiny_mce_src.js の indent 設定部分をほぼもってきているだけで、同じような処理になっていますがもっと違ったアプローチが出来ますのでカスタマイズ自由度は高いと思います。

コールバックもろもろ

コールバックは上記以外にも揃ってまして、下記のドキュメントに掲載されています。

http://archive.tinymce.com/wiki.php/Configuration3x:Callbacks

save_callback などの例は公開ボタンをおした時に TinyMCE 内の a を b に変えるサンプルになっていて EntryBody で regex_replace のように書き出しの際同じような処理が出来ます。

function myCustomSaveContent(element_id, html, body) {
        // Do some custom HTML cleanup
        html = html.replace(/a/g,'b');

        return html;
}

tinyMCE.init({
        ...
        save_callback : "myCustomSaveContent"
});

まとめ

ちょっとしたカスタマイズTipsでしたが、公式ドキュメントにはまだまだカスタマイズ方法が掲載されてますのでオレオレエディタとして作り変える事も可能ですしドキュメントからヒントが得られます。

例えば Data API を使った特定のお客様専用のTinyMCE投稿画面を作る、というアプローチも出来るようになっています。(ここで記載しているカスタマイズはMTのみでなく、通常のTinyMCEでも可能です)

あまり注目されないエディタ画面のTipsでしたが、ちょっとしたカスタマイズで使いやすさが変わるので制作や提案のヒントになれば幸いです。

Comments:0

コメントする

Home > MovableType > TinyMCE for Movable Type のカスタマイズ

Search

Feeds

Return to page top