使用 tinymce 在 HTML 预览和纯文本之间切换

Posted 2023-03-06

【中文标题】使用 tinymce 在 HTML 预览和纯文本之间切换

【英文标题】：Toggle between HTML preview and plain text with tinymce

【发布时间】：2016-04-20 12:00:29

【问题描述】：

在使用 Wordpress 的 tinymce 编辑器时，我注意到他们能够让用户在可以查看所有格式的富文本模式下进行编辑，以及切换回用户可以编辑的纯文本模式html/script/css 或任何其他代码。

我是 tinymce 的新手，不太了解。我能够使用默认的 javascript 来让 tinymce 工作，并且：

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

在谷歌搜索时，我发现的第一件事是：

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

这正是我想要的，但没有解释如何在任何地方做到这一点。该示例中有很多选项和插件，我不知道发生了什么。查看源代码，仅源代码本身甚至不具备功能。有一个“这个例子的小提琴”（http://fiddle.tinymce.com/paaaab）但即使是小提琴也不起作用。

经过一番谷歌搜索，我找到了这个问题/答案：Plain and Rich text editor options in TinyMce editor

这个问题似乎与我问的问题相同（这个人在他发布问题前 6 天问了这个问题）但是现在接受的答案已经过时并且没有多大意义。我尝试了第二个答案，没有任何改变的确切代码，但它根本不起作用。

如果有人可以对此进行调整，或者告诉我为什么我的努力没有奏效，我会欣喜若狂！

【参考方案1】：

您链接到的 Fiddle 不起作用，因为它正在调用最新的 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/[e-mail]"    />
      </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;

【讨论】：

最新的 TinyMCE 有没有办法做到这一点？

应该是可行的。我明天看看。似乎在 TinyMCE 4 中，大多数人使用"code" plugin。

【参考方案2】：

这适用于 Tinymce 4。使用 setup 配置参数

setup: function(ed)

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

在编辑器中单击它会切换。 这是一个有效的 tinymce 小提琴：http://fiddle.tinymce.com/Fnfaab

【讨论】：

这在技术上是我正在寻找的，但是我真的不喜欢它变成一种模式，而不是像上面答案中的示例那样仅仅更改为纯文本。在我选择答案之前，是否有可能拥有此功能并且文本区域不是弹出窗口？

【参考方案3】：

如果您专门寻找具有丰富代码编辑器的类似 WordPress 的代码切换功能，那么您可能需要查看我创建的 TinyMCE Ace code editor 插件。它创建一个可以放置在任何工具栏中的切换按钮，并使用 Ace 编辑器（如果可用）（或 textarea 作为后备）