TinyMCEトグルスタイルを追加する

Question

私はTinyMCEプラグインで作業しています。私がしたいのは、カスタムフォーマットを切り替えるコマンド/ボタンを登録することです。

たとえば、TinyMCEの太字ボタンをクリックすると太字のテキストが強調表示されます。ソースコードを掘り下げてみると、tinymce.EditorCommands.addCommandsはそれを複製する方法を見つけることができないと考えました。 TinyMCEのドキュメントはちょうど恐ろしいです=（

私は、カスタムフォームを適用したときにボールド体、イタリック体などのように表示されるプラグインによってボタン設定をしたいと思っています。ボタンはツールバー上で行いますが、私のcustomFormatをクリックするとon/offが切り替わります。私は "addCommand"と "addButton"で簡単に達成できますが、太字のような状態の追跡はありません。私の現在の動作していない試みを表示しています（このコードはプラグイン作成メソッドのinit内にあります）。

tinymce.EditorCommands.call('addCommands', { 
    'MyFormat' : function(name) { 
     ed.formatter.toggle("customFormat"); 
    } 
},'exec'); 

tinymce.EditorCommands.call('addCommands', { 
    'MyFormat' : function(name) { 
     return ed.formatter.match('customFormat'); 
    } 
},'state'); 

ed.addButton('customformat', {cmd : 'MyFormat'}); 

完璧のようだ、私はこれを見つけた多くのより多くの周りを探した後 http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

：0そして、ここではaddCommandsの「ドキュメント」へのリンクである http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

しかし、私はそれはdoesnのコードを実装するときTボタンの状態を変更します。ここでは

ed.addCommand('MyFormat', function(ui, v) { 
    ed.formatter.toggle("thoughtFormat"); 
    }); 

    ed.addQueryStateHandler('MyFormat', function() { 
     return ed.formatter.match('thoughtFormat'); 
    }); 

    ed.addButton('myformat', {cmd : 'MyFormat'}); 

Answer 1

場合は、ここでTinyMCE 4.xのためのガイドです。

まず第一に、カスタムフォーマットを定義する必要があります。

formats: { 
    custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}} 
} 

を次に、あなたのツールバーにボタンを追加する必要があります：

toolbar: "mybutton", 

次は、セットアップあなたに必要ボタンを押して、フォーマットを切り替えます。

setup: function(editor) { 
     editor.addButton('mybutton', { 
      text: 'My button', 
      icon: false, 
      onclick: function() { 
       tinymce.activeEditor.formatter.toggle('custom_format') 
      } 
     }); 
} 

また、エディタでボタンの状態を設定する場合は、現在のノードの形式を示すために、自動的に、setup機能にこれを追加します。

onPostRender: function() { 
    ctrl = this,     
    editor.on('NodeChange', function(e) { 
     ctrl.active(e.element.className == "some_css_class") 
    }); 
} 

あなたtinymce.init関数は次のようになります。class属性私は私のカスタム・フォーマットに追加

tinymce.init({ 
    selector: "textarea", 
    formats: { 
     // Other formats... 
     custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}} 
    } 
    // Other default toolbars 
    toolbar_n: "mybutton", 

    // Finally, setup your button 
    setup: function(editor) { 
     editor.addButton('mybutton', { 
      text: 'My Button', 
      icon: false, 
      onclick: function() { 
       tinymce.activeEditor.formatter.toggle('custom_format') 
      }, 
      onPostRender: function() { 
       ctrl = this,     
       editor.on('NodeChange', function(e) { 
        ctrl.active(e.element.className == "dynamic-field") 
       }); 
      } 
     }); 
    } 

注こと。この手法では、私のカスタムスタイルを別のスタイルシートファイルで定義し、マークアップを可能な限り乾燥した状態に保つことができました（インラインスタイリングなし！）。 Style content_cssオプションを使用してスタイルシートを作成してください。 しかし、バックエンドとBatmanJSとしてフロントエンドとしてRailsを使用しているので（実際には私は後者にかなり新しい）、私は資産ルーティングの仕組みを理解できず、カスタムスタイルをtinyMCEスキン自体のデフォルトのコンテンツスタイルシートファイルに置き換えます（skins/SKIN_NAME/content.min.cssにあります）。

Answer 2

は一例です：

ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever 

Answer 3

洞察力のためのThariamaに感謝し、最終的にこれをどうやって行うかを深く掘り下げて調べることができました。私はその "正しい方法"を確信していませんが、私はTinyMCEが想像できる最悪の文書を持っていると言いました。

私にとっての鍵は、setActiveトリックを使用してonNodeChangeイベントをフックすることでした。カーソルがあるところはどこでもその形式が存在する場合にアクティブにカスタムボタンとの完全な例プラグイン：誰かがそれを「プラグイン」の方法を行うにはしたくありません

(function() { 
    tinymce.create('tinymce.plugins.CoolPlugin', { 
    init : function(ed, url) { 

     ed.addCommand('MyFormat', function(ui, v) { 
     ed.formatter.toggle("myFormat"); 
     }); 

     ed.addButton("coolformat", { 
     title : 'MyFormat Tooltip', 
     cmd : 'MyFormat', 
     image: url + '/coolformat.png', 
     }); 

     ed.onNodeChange.add(function(ed, cm, n) { 
     active = ed.formatter.match('myFormat'); 
     control = ed.controlManager.get('coolformat').setActive(active); 
     }); 

     ed.onInit.add(function(ed, e) { 
     ed.formatter.register('myFormat', 
      {inline: 'span', classes : ['cool'] }); 
     }); 
    } 
    }); 

    // Register plugin 
    tinymce.PluginManager.add('cool', tinymce.plugins.CoolPlugin); 
})();