CKEditor ShowProtected перемещает код руля

Question

Если вы используете 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;

но это не помогает. Есть идеи?

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;