CKEditor ShowProtected 移动车把代码答案

【问题标题】：CKEditor ShowProtected moves handlebars codeCKEditor ShowProtected 移动车把代码
【发布时间】：2019-01-10 17:43:30
【问题描述】：

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

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

这很好用，但在主 WYSIWYG 编辑器中隐藏了车把代码。

只要有把手代码，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;

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

【问题讨论】：

【解决方案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;

【讨论】：