Question

我需要一个可以编辑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变量添加前缀，因此它们与刀片模板大致兼容。

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中使用一些更复杂的正则表达式，但这确实可以为你提供一个好的起点。

Answer 2

我能够找到一些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

WYSIWYG HTML编辑器，不会尝试修复错误的HTML

2 个答案: