2

我正在为 Windows 窗体设计一个 HTML 编辑器。为此，我使用Geckofx 60.64和TinyMCE 5.2.0。当一切顺利时，这将是一个用户控件。这是屏幕截图： 在此处输入图像描述 而且我不希望在此用户控件中弹出任何弹出窗口。但是，TinyMCE 的代码插件会作为弹出窗口打开。 在此处输入图像描述 就像在 Wordpress 中的 TinyMCE 编辑器中一样，我希望 HTML 代码的内容在您单击代码图标时显示在编辑器中，并在您再次单击代码图标时返回它。但我不知道我该怎么做。为了更好地解释我想要什么，我还在 Photoshop 中设计了一个简单的图像。 在此处输入图像描述

4

2 回答 2

0

WordPress 中的代码视图实际上并没有使用 TinyMCE 代码视图插件。相反，它会提取编辑器内容，将其加载到文本区域中，允许您进行编辑，然后重新调用 TinyMCE 并重新加载更新的 HTML。

如果您想要与 WordPress 类似的体验，则必须自己创建代码视图行为。

如果你想使用 TinyMCE 提供的代码查看器，它可以作为一个对话框工作。

于 2020-04-10T14:38:59.817 回答
0

我有一个类似的请求（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方面不是很有经验，但到目前为止效果很好。无论如何，请随时纠正/改进事情。

于 2021-04-13T12:40:13.417 回答