如何在TinyMCE中隐藏带有按钮的工具栏？

Question

我想隐藏tinymce中的按钮工具栏。

如何做到这一点？

Answer 1

使用tinyMCE 4，您可以在tinymce init中设置以下内容：

toolbar: false

如果您想要一个没有选项的干净编辑器，这里是一个完整的 init 示例：

<script type="text/javascript">
    tinymce.init({
        menubar: false,
        statusbar: false,
        toolbar: false
    });
</script>

Answer 2

有一个插件可以通过编辑器外部的链接或工具栏本身来执行此操作。

http://www.neele.name/pdw_toggle_toolbars/

下载并解压到您的 /tiny_mce/plugins/ 文件夹

然后添加：

 $('textarea.tinymce').tinymce({
    plugins : "pdw,your other plugins ... "
    // All of your other configurations
    theme_advanced_buttons1 : "pdw_toggle,bold,italic,underline and the rest...
    // Add PDW
    pdw_toggle_on : 1,
    pdw_toggle_toolbars : "2,3,4"
 }

Answer 3

如果

ed

是对您的tinymce编辑器实例的引用，您可以使用以下jQuery片段来隐藏工具栏：

$('#'+ed.id+'_toolbargroup').parent().css('display','none');

使用

$('#'+ed.id+'_toolbargroup').parent().css('display','block')

把它拿回来；

Answer 4

一个快速但肮脏的解决方法是简单地通过 CSS 隐藏它

#my_textarea_id_tbl tr.mceFirst { display:none; }

如果只是出于视觉原因，这可能就足够了。

Answer 5

在tinymce4，内联模式下，我简单地使用：

tinymce.EditorManager.activeEditor.getElement().blur();

Answer 6

$(".mceToolbar:eq(1)").hide();

将为您工作

将 eq(1) 替换为按钮容器工具栏，例如eq(2),eq(3),eq(4)..

Answer 7

如果你对树 DOM 进行检查，你会发现：

<a id="tinyelement_external_close" href="javascript:;" class="mceExternalClose"></a>

因此添加 Jquery 指令以具有如下内部 HTML

$('a#tinyelement_external_close').html('Close')

您将拥有：

<a id="tinyelement_external_close" href="javascript:;" class="mceExternalClose">Close</a>

刷新页面，您会在工具栏右上角找到

close

链接。 点击它 。工具栏变得隐藏。

Answer 8

简单，使用 主题：“高级”， theme_advanced_statusbar_location : '无',

Answer 9

我们可以在菜单中隐藏剪切、复制、粘贴：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: {title: 'File', items: 'newdocument'},
    edit: {title: 'Edit', items: 'undo redo | selectall'}, // | cut copy paste pastetext we can remove it because it won't work
    insert: {title: 'Insert', items: 'link media | template hr'},
    view: {title: 'View', items: 'visualaid'},
    format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
    table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
    tools: {title: 'Tools', items: 'spellchecker code'}
  }
});

Answer 10

如文档中所述，您可以隐藏不同的东西。在你的情况下，它会是这样的。

tinymce.init({
        selector: '#selector',
        menubar: false,
        statusbar: false,
        toolbar: false,
    });