ニュース

 

はじめに

サーバーを移転しました！

Mediumがどうも使いにくいので、データベースを使用しないフラットCMSimple_XHで再スタート

http://www.cmsimple-xh.org/wiki/doku.php
 
一覧を表示

TinyMCE４のボタンをアクティブ＆ディセイブル状態

2017/12/11 . カテゴリ TinyMCE. コメントはありません

 TinyMCE3 は  onNodeChangeイベントがcontrolManagerオブジェクトへの参照を渡され、現在選択されているノードに基づいてツールバーボタンまたはメニューオプションの状態を簡単に有効または無効してたのですが、 TinyMCE4では、変わってたので覚書

 

TinyMCE4のaddButtonパラメータのstateSelectorまたはdisabledStateSelectorプロパティ

stateSelectorが簡単だが....

TinyMCE3の場合

editor.onNodeChange.add(function(editor, controlManager, node) {
    controlManager.setActive('mylinkplugin',
            editor.selection.getNode().nodeName != 'A');
});

または

editor.onNodeChange.add(function(editor, controlManager, node) {
    controlManager.setActive('mylinkplugin', node.nodeName != 'A');
});

これが　TinyMCE4の場合　addButtonパラメータ　に　stateSelector　

tinymce.PluginManager.add('mylinkplugin', function(editor, url) {
       editor.addButton('btn', {
          text: 'My button',
          stateSelector: 'a'
      });
});

'a' の部分は、CSS３の記述に対応してるようで　

    stateSelector: ':not(a)'

も可能。　これが手っ取り早い 。
が、stateSelectorは、TinyMCE4のボタンオプションに書かれてなく　3.xから移行するのControl states　に記載されるだけで、情報量がとても少ない

公式には　onPostRender　を使うのが無難かも知れない。でその場合

tinymce.PluginManager.add('mylinkplugin', function(editor, url) {
	editor.addButton('btn', {
		text: 'My button',
		onPostRender: function() {
			var ctrl = this;
			editor.on('NodeChange', function(e){
				ctrl.active(e.element.nodeName == 'A');
			});
		}
	});
});

知らなかったのですが　チェックBOXのボタンも出来るようでその場合

editor.addButton('chk1', {
    text: 'checkbox',
    type: 'checkbox',
    icon: false,
    onPostRender: function () {
        var ctrl = this;
        editor.on('NodeChange', function (e) {
            ctrl.checked(e.element.nodeName == 'A');
        });
    }
});

 

disabledStateSelector も同様で

disabledStateSelector : 'a',

と、

ctrl.disabled(e.element.nodeName != 'A');
or
ctrl.disabled(!(e.element.nodeName != 'A'));

参考
https://www.tinymce.com/docs/advanced/migration-guide-from-3.x/#controlstates　

http://www.devsumo.com/technotes/2014/08/tinymce-4-enabling-and-disabling-toolbar-buttons/

 

 

 

一覧を表示

 

ニュース