tinymceエディタを拡張する。line-heightのボタンを追加

メモ。

環境

cakephpで作成中の入力画面

コード

tinymce.init({
            selector: "textarea",
            element_format: "xhtml",
            schema: "html5",
            plugins: ["link"],
            //force_br_newlines : true,
            force_p_newlines : true,
            //forced_root_block : '',
            toolbar1: "undo redo | bold italic | link | outdent bullist indent",
            toolbar2: "fontsizeselect | alignleft aligncenter alignright alignjustify | ad_lineheight | align-justify reset-justify",
            setup: function(editor) {
                editor.addButton('ad_lineheight', {
                    type: 'listbox',
                    text: 'line-height',
                    icon: false,
                    values: [
                        {text: '1', value: '1'},
                        {text: '1.5', value: '1.5'},
                        {text: '2', value: '2'},
                        {text: '2.5', value: '2.5'},
                        {text: '3', value: '3'}
                    ],
                    onselect: function(e) {
                        var selected    =   tinyMCE.activeEditor.selection.getContent();
                        var content     =   '<p style="line-height: '+this.value()+';">' + (selected != '' ? selected : '') + '</p>';
                        editor.insertContent(content);
                    }
                });
            }
        });

tinymce.initの中のsetup内にeditor.addButtonを記述していきます。
第一引数が、キーで、toolbarに記述することで呼び出されます。
第二引数で設定していきます。
type: 'listbox'はのリストタイプ
何も指定しなければこのボタンタイプになります。
listboxのタイプはvaluesに配列でtextとvalueを記述してアイテム登録します。
onselectで変化させます。
ボタンタイプはonclickとなります。
基本的にgetContentして、文字を入力取得->pなり、spanなりで囲んでvaluesのvalueの値でstyleセットして、editor.insertContentする流れです。