TinyMCE 代码插件 - 不想在模态对话框中打开代码视图

Question

我需要 TinyMCE Text Editor 方面的帮助。

是否可以在不打开模态的情况下在编辑器中打开或查看编辑器的代码？

像这样：

Answer 1

TinyMCE 附带的代码插件将 HTML 代码单独放置 window - 没有允许代码直接出现在编辑器主界面的配置选项 window.

TinyMCE 有一个地方可以提出这样的功能请求：

https://community.tinymce.com/communityIdeasHome

...因此，如果您 post 那里有一些东西，他们可能会在编辑器的未来版本中添加这样的功能。当您 post 有您的想法时，请务必解释为什么当前代码对话框不适合您的用例。

Answer 2

您应该看看 TinyMCE 在 WordPress 中是如何实现的。代码可在文本选项卡中编辑。

Answer 3

我有一个类似的请求（在编辑器中显示 html 源代码）并通过修改初始（开源）code 插件实现了一个非常简单且（对我来说）足够的解决方案：

var e = tinymce.util.Tools.resolve("tinymce.PluginManager"),
    p = tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),
    o = function (o) {
        var e = o.getContent({source_view: !0});
        var b = o.getBody();
        if (b.getAttribute("code") === "true") {
            b.setAttribute("code", "false");
            b.style.backgroundColor = "white";
            b.style.color = "black";
            b.style.fontFamily = "Helvetica";
            o.setContent(p.DOM.decode(e));
        } else {
            b.setAttribute("code", "true");
            b.style.backgroundColor = "black";
            b.style.color = "white";
            b.style.fontFamily = "Monaco";
            o.setContent(p.DOM.encode(e));
        }
    };

它不会打开一个新的 window，它只是更改编辑器的 css（背景、颜色、字体）并设置一个数据属性（允许在初始视图和code 查看）。 p.DOM.encode(e) 然后允许显示 html 标签。

我在 javascript 方面不是很有经验，但到目前为止效果很好。无论如何，请随时纠正/改进。

TinyMCE 代码插件 - 不想在模态对话框中打开代码视图

TinyMCE Code Plugin - don't want to open code view in a modal dialog

javascript

tinymce

tinymce-4