CKEditor ShowProtected移动把手代码

Question

如果您将CKEditor与车把代码一起使用，则可以使用来标记车把代码为受保护的

config.protectedSource.push(/{{[/|#][\s\S]*?}}/g);

这很好用，但是在“所见即所得”主编辑器中隐藏了车把代码。

只要有把手代码，即可使用showprotected插件（https://ckeditor.com/cke4/addon/showprotected）显示图标。

但是，如果您有类似的代码

<ul>
  {{#each Books}}
    <li>{{Title}}</li>
  {{/each}}
</ul>

CKEditor将HTML更改为此：

{{#each Books}}{{/each}}
<ul>
    <li>{{Title}}</li>
</ul>

我已经设置

config.allowedContent = true;

但这无济于事。有什么想法吗？

Answer 1

问题是CKEditor DTD，它控制如何嵌套HTML元素。

当CKEditor以WYSIWYG模式显示时，showprotected插件将显示一个小图标，而不是车把代码。有效地创建以下html：

<ul>
  <img class='cke_protected'..../>
    <li>{{Title}}</li>
  <img class='cke_protected'..../>
</ul>

不允许将图像直接放置在UL标签内，因此CKEditor会将其重新排列为

<img class='cke_protected'..../><img class='cke_protected'..../>
<ul>
    <li>{{Title}}</li>
</ul>

您可以通过告诉DTD在UL标签内允许使用图像标签来解决此问题

CKEDITOR.dtd['ul']['img'] = true;