使用tinymce在HTML預覽和純文本之間進行切換

Question

使用Wordpress的tinymce編輯器時，我注意到他們可以讓用戶在富文本模式下編輯，他們可以在其中查看所有格式，並切換回一個純文本模式，用戶可以編輯html/script/css或任何其他代碼。

我是一個新的tinymce，不太瞭解它。我能得到TinyMCE的使用默認的JavaScript的工作，這一點：

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

在谷歌上搜索的時候，我發現的第一件事情是這樣的：

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

這正顯示出我想要的東西，但沒有解釋如何在任何地方做到這一點。在這個例子中有很多選項和插件，我不知道發生了什麼。從源頭上看，僅靠源代碼甚至不能執行功能。有一個「這個例子的小提琴」（http://fiddle.tinymce.com/paaaab），但即使小提琴不起作用。

一些google搜索後，我能找到這個問題/答案：Plain and Rich text editor options in TinyMce editor

這個問題似乎是問同樣的事情，我問（把這個傢伙前6天，他張貼的問題），但是接受的答案現在已經過時，沒有多大意義。我嘗試了第二個答案，沒有任何改變的確切代碼，但它根本不起作用。

如果有人可以用這個工作小提琴，或告訴我爲什麼我的努力不工作，我會欣喜若狂！

Answer 1

您鏈接到的小提琴沒有工作，因爲它調用最新的TinyMCE JavaScript庫。我改成了使用TinyMCE的v.3.5.11：

http://fiddle.tinymce.com/Cnfaab

撥動格式現在的作品。

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

在TinyMCE4：

不知道這是正確的方式，但我相信這不會你想要做什麼： 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

這與TinyMCE的4.使用作品的設置配置參數

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

在單擊編輯器中它被觸發。 這裏是一個工作TinyMCE的小提琴：http://fiddle.tinymce.com/Fnfaab

Answer 3

如果你是專門尋找像WordPress的具有豐富的代碼編輯器代碼切換功能，那麼你可能想看看，我創建TinyMCE Ace code editor插件。它創建一個切換按鈕，可以放置在任何工具欄，並使用ACE編輯器（或文本區域作爲後備）