Toggle between HTML preview and plain text with tinymce

Question

When working with Wordpress's tinymce editor, I noticed they are able to let the user edit in a rich-text mode where they can see all the formatting, as well as switch back over to a plain text mode where the user can edit the html/script/css or any other code.

I an new to tinymce and don't know it very well. I was able to get tinymce working using the default javascript and this:

tinymce.init({ selector:'#id_content' });

When googling around, the first thing I found was this:

http://archive.tinymce.com/tryit/3_x/toggle_editor.php

That is showing exactly what I want, but doesn't explain how to do it anywhere. There are so many options and plugins in that example that I don't know what is going on. Looking at the source, the source alone doesn't even do the functionality. There's a "fiddle with this example" ( http://fiddle.tinymce.com/paaaab ) but even the fiddle doesn't work.

After some more googling, I was able to find this question/answer: Plain and Rich text editor options in TinyMce editor

The question seems to be asking the same thing as I am asking (took this guy 6 days before he posted the question) However the accepted answer is now out of date and doesn't make much sense. I tried the second answer, the exact code with nothing changed, and yet it didn't work at all.

If someone can make a working fiddle with this, or tell me why my efforts are not working, I will be ecstatic!

Answer 1

The Fiddle you linked to didn't work because it was calling the latest TinyMCE javascript library. I changed it to use TinyMCE v.3.5.11:

http://fiddle.tinymce.com/Cnfaab

The toggle format works now.

<a class="btn" href="javascript:;" onclick="tinymce.execCommand('mceToggleEditor',false,'content');"><span>Toggle TinyMCE</span></a>

In TinyMCE4:

Not sure if this is the proper way, but I believe this does what you're trying to do: http://codepen.io/anon/pen/ZQXLBo

JS:

  tinymce.init({
  selector: 'textarea',
  height: 500,
  toolbar: 'mybutton',
  menubar: false,
  setup: function(editor) {
    editor.addButton('mybutton', {
      text: 'My button',
      icon: false,
      onclick: function(e) {
        var $ = tinymce.dom.DomQuery;
        var myTextarea = $('textarea');
        var myIframe = $(editor.iframeElement);
        myTextarea.value = editor.getContent({
          source_view: true
        });
        myIframe.toggleClass("hidden");
        myTextarea.toggleClass("visible");
        if ($('iframe.hidden').length > 0) {
          myTextarea.prependTo(".mce-edit-area");
        } else {
          myIframe.value = myTextarea.value;
          myTextarea.appendTo('body');
        }
      }
    });
  },
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
});

HTML:

<textarea>
      <p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
      </p>
      <h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1>
      <p>Select a menu item from the listbox above and it will insert contents into the editor at the caret position.</p>

      <h2>Got questions or need help?</h2>
      <ul>
        <li>Our <a href="http://www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
        <li>Have a specific question? Visit the <a href="http://community.tinymce.com/forum/">Community Forum</a>.</li>
        <li>We also offer enterprise grade support as part of <a href="http://www.tinymce.com/pricing">TinyMCE Enterprise</a>.</li>
      </ul>

      <h2>Found a bug?</h2>
      <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

      <h2>Finally ...</h2>
      <p>Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>
      <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.
        <br>All the best from the TinyMCE team.</p>
    </textarea>

CSS:

    textarea {
  height: 500px !important;
  width: 100% !important;
  position: absolute;
  z-index: 100;
}

.hidden {
  visibility: hidden !important;
  display: none !important;
}

.visible {
  visibility: visible !important;
  display: block !important;
}

Answer 2

This works with Tinymce 4. Use the setup configuration parameter

setup: function(ed)
{
  ed.on('click', function(e){
    tinymce.execCommand('mceToggleEditor', false, 'your editor_id');
  });
}

On click in the editor it gets toggled. Here is a working tinymce fiddle: http://fiddle.tinymce.com/Fnfaab

Answer 3

If you are specifically looking for WordPress like code toggle functionality with a rich code editor, then you may want to look at TinyMCE Ace code editor plugin that I created. It creates a toggle button that can be placed in any toolbar and uses Ace editor if available (or textarea as a fallback)