如何将 Mustache 模板集成到 TinyMCE 中，而无需在 Mustache 代码周围放置 HTML 包装器

Question

我们使用 TinyMCE (6) 作为所见即所得编辑器，以便我们的用户可以将 HTML 内容输入到我们稍后将使用的模板中。 我们使用 Mustache 模板库注入某些变量，然后由我们的后端替换。 我们发现，当 TinyMCE 加载到编辑器中或从代码插件保存时，一些 Mustache 变量正在被 TinyMCE 重写。我们怎样才能阻止这种情况发生，会产生什么后果？

以下代码块就是一个示例：

    <p>
    <strong>Scope of Services</strong>
    </p>
    <ul>
    {{#jobs}}
    <li>{{short_description}}</li>
    {{/jobs}}
    {{^jobs}}
    <li><em style="color: red;">NO SERVICES HAVE BEEN ADDED TO THIS ENGAGEMENT</em></li>
    {{/jobs}}
    </ul>

这将循环访问名为 Jobs 的 Mustache 变量，并在 UL 中为每个存在的作业创建一个行项目。

但是 Mustache 接受了这段代码，并将其变成了这样：

    <p><strong>Scope of Services</strong></p>
    <ul>
    <li>{{#jobs}}</li>
    <li>{{short_description}}</li>
    <li>{{/jobs}} {{^jobs}}</li>
    <li><em style="color: red;">NO SERVICES HAVE BEEN ADDED TO THIS ENGAGEMENT</em></li>
    <li>{{/jobs}}</li>
    </ul>

注意它如何将 Mustache 变量包装到 LI 元素中。

我们怎样才能让它不这样做，并忽略双大括号或三大括号中的内容，例如 {{variable}} 和 {{{variable}}}

Answer 1

TinyMCE 的主要重点是编辑富文本。因此，它会努力生成有效的 HTML，该 HTML 不应包含 Mustache 标签。特别是，

<ul>

只能在

<li>

子元素内包含文本。此外，浏览器也可能会尝试标准化 HTML 代码。

我的第一个猜测和你的一样：尝试使用代码插件来规避这个问题。可惜的是，该插件的目的是让用户更好地控制最终的 HTML，但不能启用其他语言（例如 Mustache）的文本输入。

我可以想到三种可能的解决方法，但它们似乎都不理想：

1. 使用另一个富文本编辑器试试运气。我自己没有使用过其中任何一个，但根据维基百科，CKEditor 可能是一个可能的替代方案。该解决方案无助于解决浏览器也可能干扰的事实，因此它可能会不稳定。
2. 切换到用户不太友好的纯文本编辑器。我知道原始的

   <textarea>

   将允许您编辑 Mustache 代码，因为我构建了 Wontache 游乐场。不过，我想这可能太粗糙了。
3. 为 Mustache 标签切换到不同的分隔符，HTML 将其解释为注释。我建议

   <!--{

   和

   }-->

   。这样，您仍然可以通过省略花括号来进行常规 HTML 注释。使用与目标语言一致的分隔符通常并不理想，但在这种情况下，它可能是最可行的解决方案。