blocks|key|334978|text|使用tinyMCE+4，您可以在tinymce初始化中设置以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|334979|toolbar:+false|code-block|syntax|javascript|334980|如果你想要一个干净的没有选项的编辑器，下面是一个完整的init示例：|334981|<script+type="text/javascript">
++++tinymce.init({
++++++++menubar:+false,
++++++++statusbar:+false,
++++++++toolbar:+false
++++});
</script>|334982|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Using tinyMCE 4 you can set the following in the tinymce init:

<pre><code>toolbar: false
</code></pre>

Here is a full blown example of the init if you want a clean editor with no options:

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

blocks|key|3038892|text|有一个插件可以通过编辑器外部的链接或工具栏本身来实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3038893|http://www.neele.name/pdw_toggle_toolbars/|offset|length|3038894|下载并解压缩到/tiny_mce/plugins/文件夹|3038895|然后添加：|3038896|+$('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"
+}|code-block|syntax|javascript|3038897|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|16|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

There is a plugin that will do this either from a link outside of the editor or from the toolbar itself. 

<a href="http://www.neele.name/pdw_toggle_toolbars/" rel="noreferrer">http://www.neele.name/pdw_toggle_toolbars/</a>

Download and extract to your /tiny_mce/plugins/ folder

Then add:

<pre><code> $('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"
 }
</code></pre>

blocks|key|1079197|text|如果ed是对tinymce编辑器实例的引用，则可以使用以下jQuery代码段来隐藏工具栏：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1079198|$('#'%2Bed.id%2B'_toolbargroup').parent().css('display','none');|code-block|syntax|javascript|1079199|使用|1079200|$('#'%2Bed.id%2B'_toolbargroup').parent().css('display','block')|1079201|去找回它；|1079202|entityMap^0|2|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

If <code>ed</code> is a reference to your tinymce editor instance, you may use the following jQuery snippet to hide the toolbar:

<pre><code>$('#'+ed.id+'_toolbargroup').parent().css('display','none');
</code></pre>

use 

<pre><code>$('#'+ed.id+'_toolbargroup').parent().css('display','block')
</code></pre>

to get it back;

blocks|key|1082875|text|一个又快又脏的修复方法是通过CSS简单地隐藏它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1082876|#my_textarea_id_tbl+tr.mceFirst+{+display:none;+}|code-block|syntax|javascript|1082877|如果只是出于视觉上的原因，这可能就足够了。|1082878|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A quick and dirty fix would be to simply hide it through CSS

<pre><code>#my_textarea_id_tbl tr.mceFirst { display:none; }
</code></pre>

If its just for visual reasons this might be enough.

blocks|key|1630643|text|在tinymce4的内联模式中，我简单地使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1630644|tinymce.EditorManager.activeEditor.getElement().blur();|code-block|syntax|javascript|1630645|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In tinymce4, inline mode, I use simply:

<pre><code>tinymce.EditorManager.activeEditor.getElement().blur();
</code></pre>

blocks|key|3039143|text|简单，使用主题：'advanced'，theme_advanced_statusbar_location：'none'，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3039144|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

simple, use 
 theme: 'advanced',
 theme_advanced_statusbar_location : 'none',

blocks|key|334063|text|$(".mceToolbar:eq(1)").hide();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|334064|将为您工作|unstyled|334065|将eq(1)替换为按钮容器工具栏，例如eq(2)、eq(3)、eq(4)。|334066|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$(".mceToolbar:eq(1)").hide();
</code></pre>

will work for you

replace eq(1) with your button container toolbar e.g. eq(2),eq(3),eq(4)..

blocks|key|1630516|text|如果你检查一下你的DOM树，你会发现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1630517|<a+id="tinyelement_external_close"+href="javascript:;"+class="mceExternalClose"></a>|code-block|syntax|javascript|1630518|所以添加Jquery指令来拥有内部HTML如下所示|1630519|$('a#tinyelement_external_close').html('Close')|1630520|您将拥有：|1630521|<a+id="tinyelement_external_close"+href="javascript:;"+class="mceExternalClose">Close</a>|1630522|刷新你的页面，你会在工具栏的右上角找到close链接。单击它。工具栏将隐藏。|offset|length|style|CODE|1630523|entityMap^0|0|0|0|0|0|0|J|5|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@$Q|13|R|14|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

if you do an inspection on you tree DOM , you will find :

<pre><code>&lt;a id="tinyelement_external_close" href="javascript:;" class="mceExternalClose"&gt;&lt;/a&gt;
</code></pre>

So add Jquery instruction to have inner HTML as following 

<pre><code>$('a#tinyelement_external_close').html('Close')
</code></pre>

You will have : 

<pre><code>&lt;a id="tinyelement_external_close" href="javascript:;" class="mceExternalClose"&gt;Close&lt;/a&gt;
</code></pre>

Refresh you page you find <code>close</code> link at top-right of toolbar.
Click on it . Toolbar become hidden .

blocks|key|3039196|text|我们可以在菜单中隐藏剪切、复制、粘贴：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3039197|tinymce.init({
++selector:+'textarea',++//+change+this+value+according+to+your+HTML
++menu:+{
++++file:+{title:+'File',+items:+'newdocument'},
++++edit:+{title:+'Edit',+items:+'undo+redo+%7C+selectall'},+//+%7C+cut+copy+paste+pastetext+we+can+remove+it+because+it+won't+work
++++insert:+{title:+'Insert',+items:+'link+media+%7C+template+hr'},
++++view:+{title:+'View',+items:+'visualaid'},
++++format:+{title:+'Format',+items:+'bold+italic+underline+strikethrough+superscript+subscript+%7C+formats+%7C+removeformat'},
++++table:+{title:+'Table',+items:+'inserttable+tableprops+deletetable+%7C+cell+row+column'},
++++tools:+{title:+'Tools',+items:+'spellchecker+code'}
++}
});|code-block|syntax|javascript|3039198|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

we can hide the cut , copy , paste in menu :

<pre><code>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'}
 }
});
</code></pre>

I use tinymce and i want to hide the button toolbar. Is there a way to do that?

TinyMCE Hide the bar

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用tinymce并且我想隐藏按钮工具栏。有没有办法做到这一点？

问TinyMCE隐藏栏
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TinyMCE隐藏栏EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TinyMCE隐藏栏
EN