7

私は TinyMCE プラグインに取り組んでいます。私がやりたいことの 1 つは、カスタム フォーマットを切り替えるコマンド/ボタンを登録することです。

たとえば、TinyMCE で太字のボタンをクリックすると、太字のテキストで強調表示された太字のボタンが表示されます。ソース コードを掘り下げると、tinymce.EditorCommands.addCommands を介してこれが発生することがわかります。TinyMCE のドキュメントもひどいものです =(

そのため、customFormat を指定すると、プラグインでボタンをセットアップして、customFormat が適用されると、太字、斜体、およびその他のボタンがツールバーに表示されるように表示されるようにしたいと考えています。customFormat をクリックすると、そのフォーマットのオン/オフが切り替わります。「addCommand」と「addButton」を使用して簡単にトゥーグルを実行できますが、Bold や他の人のように状態を追跡する機能はありません。

現在動作していない試行を表示しています (このコードは、プラグインの create メソッドの 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'});

addCommands の「ドキュメント」へのリンクは次のとおりです: http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

いろいろ調べた結果、これは完璧だと思いました: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

しかし、コードを実装すると、ボタンの状態は変わりません:

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

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

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

3 に答える 3

10

誰かが「プラグイン」の方法でそれをしたくない場合のために、ここに のガイドがありTinyMCE 4.xます。

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

formats: {
   custom_format: {inline: 'span', styles: {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() {
    var ctrl = this;                
    editor.on('NodeChange', function(e) {
        ctrl.active(e.element.className == "some_css_class")
    });
}

関数tinymce.initは次のようになります。

tinymce.init({
    selector: "textarea",
    formats: {
       // Other formats...
       custom_format: {inline: 'span', styles: {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() {
                var ctrl = this;                
                editor.on('NodeChange', function(e) {
                    ctrl.active(e.element.className == "some_css_class")
                });
            }
        });
    }

classカスタム形式に追加した属性に注意してください。このアプローチにより、別のスタイルシート ファイルでカスタム スタイルを定義し、マークアップを可能な限りドライに保つことができました (インライン スタイルは不要です!)。オプションcontent_cssをスタイルシートに指定すると、準備完了です。しかし、Rails をバックエンドとして使用し、BatmanJS をフロントエンドとして使用しているため (後者についてはかなり初心者です)、アセットのルーティングがどのように機能するのか理解できず、最終的にカスタムを追加することになりました。 tinyMCE スキン自体のデフォルト コンテンツ スタイルシート ファイル ( にあります) へのスタイルskins/SKIN_NAME/content.min.css。

于 2014-07-23T18:52:58.687 に答える
5

より深く掘り下げて、最終的にこれを行う方法を理解することを可能にした洞察を提供してくれた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);
})();
于 2013-02-12T01:04:39.427 に答える
1

次に例を示します。

ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever
于 2013-02-11T14:43:16.037 に答える