1

我的 tinyMCE 编辑器上有 2 个工具栏（2 行），我想在第一个工具栏上添加一个按钮，显示/隐藏第二个工具栏。

基本上是一个展开/折叠按钮。默认情况下，第二个工具栏仅在单击按钮时才可见。然后该按钮应更改图标（类似于从 chevron-down 到 chevron-up），再次单击时应隐藏第二个工具栏。

它也可以是一个静态按钮，显示类似于显示/隐藏第二个工具栏的高级选项。

我没有找到任何可以实现这一点的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. 使用 jQuery，您可以使用该toggle()方法轻松显示/隐藏该 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 回答
0

我在init函数中有一些代码：

tinyMCE.init({
    selector: '.selector',
    branding: false,
    plugins: 'print preview paste searchreplace autolink directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
    toolbar: 'bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist | removeformat | mybutton',
    setup: function (editor) {
        editor.addButton('mybutton', {
            icon: "mce-ico mce-i-preview",
            onclick: function () {
                $(editor.editorContainer).find(".mce-container.mce-menubar.mce-toolbar.mce-first").toggle();
            }
        })
    },
    init_instance_callback: function (editor) {
        $(editor.editorContainer).find(".mce-container.mce-menubar.mce-toolbar.mce-first").toggle();
    }
});

这对我来说很好用！

于 2018-06-19T10:19:03.437 回答