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

Question

我需要关于TinyMCE文本编辑器的帮助。

是否可以在编辑器内部打开或查看编辑器代码，而不必打开模态框？

类似这样：

- Jonathan Brizio

Answer 1

TinyMCE自带的代码插件将HTML代码放置在单独的窗口中，没有配置选项可以使代码直接出现在编辑器的主窗口中。

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

https://community.tinymce.com/communityIdeasHome

如果您在这里发布了一些内容，他们可能会在未来的编辑器版本中添加这样的功能。当您在此处发布您的想法时，请确保解释为什么当前的代码对话框不足以满足您的使用情况。

- Michael Fromin

Answer 2

你应该看一下TinyMCE在WordPress中的实现方式。代码可以在文本标签页中进行编辑。

- Greg

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));
        }
    };

不是打开新窗口，而是改变编辑器的 css（背景、颜色、字体），并设置一个数据属性（启用初始视图和 code 视图之间的切换）。然后使用 p.DOM.encode(e) 可以显示 HTML 标签。

我在 JavaScript 方面经验不是很丰富，但目前它运行良好。无论如何，欢迎纠正/改进事情。

- manu