1

tinyMCE エディターに 2 つのツールバー (2 行) があり、最初のツールバーに 2 番目のツールバーを表示/非表示にするボタンを追加したいと考えています。

基本的に展開/折りたたみボタン。デフォルトでは、2 番目のツールバーは、ボタンがクリックされたときにのみ非表示になります。ボタンはアイコンを変更し (シェブロンダウンからシェブロンアップのようなもの)、もう一度クリックすると 2 番目のツールバーを非表示にする必要があります。

また、2 番目のツールバーを表示/非表示にする高度なオプションのようなものを示す静的なボタンの場合もあります。

これを実現する tinymce プラグインは見つかりませんでした。これを実装する方法、またはすでにこれを行っている（またはそれに近い）プラグインを知っている人はいますか？

4

2 に答える 2

3

TinyMCE にはこれを行うための API はありませんが、TinyMCE が各ツールバーを含む DIV に配置するクラスに基づいて行うことができます。

TinyMCE がツールバーをレンダリングするために使用する DIV を見ると、次のように表示されます。

<div id="mceu_41" class="mce-container mce-toolbar mce-stack-layout-item 
mce-first" role="toolbar"></div>
<div id="mceu_49" class="mce-container mce-toolbar mce-stack-layout-item 
mce-last" role="toolbar"></div>

(これらの DIV のそれぞれで大量の HTML を省略しています)

ツールバーの最後の行には、クラスmce-toolbarとmce-last. toggle()jQuery を使用すると、メソッドでその DIV を簡単に表示/非表示にすることができます。ツールバー ボタンを作成し、それをツールバー ボタンの最初の行に追加するだけです。

editor.addButton('hidetoolbar2', {
    text: 'Hide Toolbar 2',
    onclick: function () { 
        $('div.mce-toolbar.mce-last').toggle();
    }
});

...と...

tinymce.init({
  selector: 'textarea',
  ...
  toolbar: [
    "hidetoolbar2 | insertfile...",
    "removeformat | fontsizeselect..."
  ],
  ...
}
于 2016-06-07T01:03:37.797 に答える