我需要一个可以编辑PHP Blade和Handlebars *模板的WYSIWYG HTML编辑器。我尝试了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不受影响。
*我使用$为Handlebars变量添加前缀,因此它们与刀片模板大致兼容。
答案 0 :(得分: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中使用一些更复杂的正则表达式,但这确实可以为你提供一个好的起点。
答案 1 :(得分:0)
我能够找到一些React的所见即所得编辑器。
YouTube.com上Pagedraw的演示,https://www.youtube.com/watch?v=NjH3koR1E6w
我在https://medium.com/@vlascik/ember-in-the-middle-of-2019-the-good-the-bad-the-ugly-hopefully-d641cc73d6d1中了解了有关所见即所得组件编辑的想法:
Pinegrow在文档https://pinegrow.com/docs/pages/pages.html#formats
中明确拒绝了这一点。我看到尝试使Handlebars与GrapesJS一起使用的尝试,但最终没有结论,https://github.com/artf/grapesjs/issues/1162