Add Show/Hide TinyMCE Feature To

Question

Overview

I have just downloaded TinyMCE and added it to my website. I came across this when I noticed that a website I use on a day to day basis uses it, however their theming and layout is different and have a nice show/hide toggle as seen below.

As I am working on a website related to the website which uses this plugin, I have duplicated their styling and my version looks pretty much the same, I just wish to implement this feature.

TinyMCE Not Shown

TinyMCE Shown

My Current Code

/** 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>

Questions

Upon clicking on the A button, the TinyMCE toolbar and bottom bar both slide at the same time to either show or hide. How would I be able to achieve this for my website --s this a built in feature?

Update - Got it working!

<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

That should be relatively easy to achieve by using the Tinymce selector in Jquery. This is an example you can apply.

Click on 'Toogle toolbar'

//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>

Check these posts for related issue:

TinyMCE Hide the bar

TinyMCE 4 toggle toolbar button state

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

I hope it helps.