时间戳

首页 > 解决方案 > CKEditor ShowProtected 移动车把代码

ckeditor - CKEditor ShowProtected 移动车把代码

问题描述

如果您将 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;

但这无济于事。有任何想法吗？

标签： ckeditorhandlebars.jsckeditor4.x

解决方案

问题在于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;

推荐阅读