Редактор HTML WYSIWYG, который не пытается и не исправляет плохой HTML

Question

Мне нужен редактор HTML WYSIWYG, который может редактировать PHP Blade и Handlebars * шаблоны. Я пробовал TinyMCE, CKEditor и bootstrap wysihtml5, но все они «исправили» мой недействительный HTML. Может ли кто-нибудь предложить альтернативу?

Мне нужно иметь возможность переключаться между режимами WYSIWYG и Source без изменения.

<table> 
    <thead> 
    <tr> 
     <tr>Column 1</tr> 
     <tr>Column 2</tr> 
    </tr> 
    </thead> 
    <tbody> 
    @foreach ($data as $datum) 
    <tr> 
     <td>{{ $datum->col1 }}</td> 
     <td>{{ $datum->col2 }}</td> 
    </tr> 
    @endforeach 
    </tbody> 
</table> 

Все редакторы я нашел удалить @foreach, а иногда сломать стол тоже. Меня не волнует, если «визуальный» режим нарушен, но мне нужен HTML, чтобы он оставался нетронутым.

* I prefix Переменные Handlebars с $, поэтому они широко совместимы с шаблонами клинков.

Answer 1

Вы можете использовать CKEditor для этого, однако вам нужно будет определить, какие части кода вы НЕ хотите, чтобы редактор исправлял.

CKEditor имеет функцию protectedSource, которую вы можете использовать для определения частей источника, которые редактор не должен касаться, даже если они не являются допустимыми HTML.

Я создал пример, который будет работать с вашим циклом @foreach и переменными в вашем примере. Вы можете взять его и укрепить его в соответствии с вашими потребностями:

CKEDITOR.editorConfig = function(config) { 
    .... 
    .... 
    config.protectedSource.push(/@foreach.*/g); 
    config.protectedSource.push(/@endforeach.*/g); 
    config.protectedSource.push(/{{.*}}/g); 
} 

Вот рабочая скрипку вы можете проверить: https://jsfiddle.net/0tw75xt3/

Обратите внимание, что я изменил

<tr> <tr>Column 1</tr> <tr>Column 2</tr> </tr>

так это недействительный HTML, и я догадался, что он не должен быть <tr><tr>

Если вы хотите поддерживать более сложные шаблоны, вам понадобятся более сложные регулярные выражения внутри protectedSource, однако это действительно может дать вам хорошее место для начала.