将显示/隐藏TinyMCE功能添加到<textarea> </textarea>

Question

概述

我刚刚下载了TinyMCE并将其添加到我的网站上。当我注意到我日常使用的网站使用它时，我遇到了这个，但是它们的主题和布局不同，并且有一个很好的显示/隐藏切换，如下所示。

当我在与使用此插件的网站相关的网站上工作时，我复制了他们的样式，我的版本看起来几乎相同，我只想实现此功能。

未显示TinyMCE

显示TinyMCE

我的当前代码

/** My HTML **/
<textarea></textarea>

/** My Javascript **/
<script type="text/javascript" src="Assets/Plugins/tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector: 'textarea',
        height: "200",
        theme: "modern",
        plugins: [
            'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons template paste textcolor colorpicker textpattern imagetools codesample'
        ],
        toolbar1: 'insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | fullscreen | link image | bullist numlist outdent indent | emoticons | forecolor backcolor',
        image_advtab: true,
        templates: [{
            title: 'Test template 1',
            content: 'Test 1'
        }, {
            title: 'Test template 2',
            content: 'Test 2'
        }],
        content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css'
        ],
        menu: {
            file: {
                title: 'File',
                items: 'newdocument print'
            },
            edit: {
                title: 'Edit',
                items: 'undo redo | cut copy paste pastetext | selectall | replace'
            },
            insert: {
                title: 'Insert',
                items: ' media image link | charmap hr anchor pagebreak | insertdatetime nonbreaking template'
            },
            view: {
                title: 'View',
                items: 'visualaid visualchars visualblocks | preview fullscreen'
            },
            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'
            }
        }
    });
</script>

问题

点击A按钮后，TinyMCE工具栏和底栏都会同时滑动显示或隐藏。我如何能够为我的网站实现这一目标 - 这是一个内置功能吗？

更新 - 搞定了！

<script type="text/javascript">
    $(document).ready(function(e) {
        $('#TinyMCE_Toggle').click(function(e) {
            $('.mce-menubar').slideToggle();
            $('.mce-toolbar-grp').slideToggle();
            $('.mce-statusbar').slideToggle();
        });
    })
</script>

Answer 1

通过在Jquery中使用Tinymce选择器，这应该相对容易实现。 这是您可以应用的示例。

点击“Toogle工具栏”

//using jQuery 2.1.1
//Please note that the selector #mceu_19, #mceu_27, #mceu_28 are the ids for the toolbar rows in tinymce editor which you want to toggle on click of an element.

$('.toolbar').click(function(){
$('#mceu_19, #mceu_27, #mceu_28').slideToggle('slow');//ordinary 'toggle' will do. Depends on your choice.
});

#mceu_19, #mceu_27, #mceu_28{
display: none; /*Hide the toolbars by default */

  /* The following is for testing purpose and should not be included in the tinymce stylesheet. 
Please, it is not a good idea to include them in your stylesheet. If you do. It will modify the tinymce appearance.
  */
height: 30px;
background: orangered;
font-size: 2em;
padding: 10px;
margin: 10px;
}

/* The following is necessary if you want the class 'toolbar' and the h4 element (with the content 'Enter Article Short Description') to be on the same line */

h4{
  display: inline-block;
}
.toolbar{
  float: right;
  background: #ddd;
  padding: 5px;
  cursor: pointer;
  border-radius: 2px;
  display: inline-block;
}

/* you should add this to your custom stylesheet and it should be the last CSS you'll include in the head section of your HTML file */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Click on 'toggle toolbar' -->
<!-- This is on your website already -->
<h4> Enter Article Short Description </h4>

<!-- Add this to your HTML after h4 element above and be aware that you can change the element. It can be a button element, or span or any other element you wish. The content which is 'Toggle Toolbar' can be changed to the 'A' or any other content -->

<h5 class="toolbar"> Toggle Toolbar</h5>

<!-- This is just a sample toolbar row in tinymce editor and they represent the toolbars you want to toggle in your case. So you don't have to add this to your HTML file -->
<div id="mceu_19">
  Toolbar row 1
 
</div>


<div id="mceu_27">

  Toolbar row 2

</div>

<div id="mceu_28">

  Toolbar row 3
</div>

查看这些帖子的相关问题：

TinyMCE Hide the bar

TinyMCE 4 toggle toolbar button state

TINYMCE V3 or V4 Show/Hide ToolBar on focus/blur

我希望它有所帮助。