サーバーを移転しました!
Mediumがどうも使いにくいので、データベースを使用しないフラットCMSimple_XHで再スタート
TinyMCE4のaddButtonパラメータのstateSelectorまたはdisabledStateSelectorプロパティ
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' の部分は、CSS3の記述に対応してるようで
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/