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

时间:2016-07-01 16:30:26

标签: ckeditor tinymce wysiwyg blade bootstrap-wysiwyg

我需要一个可以编辑PHP BladeHandlebars *模板的WYSIWYG HTML编辑器。我尝试了TinyMCECKEditorbootstrap 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变量添加前缀,因此它们与刀片模板大致兼容。

2 个答案:

答案 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