Ckeditor WYSIWYG HTML编辑器，不使用'；不要试图修复坏的HTML

我需要一个所见即所得的HTML编辑器，可以编辑和*模板。我试过了，但他们都“修复”了我的无效HTML。有人能提出一个替代方案吗

我需要能够在所见即所得和源模式之间切换，而无需更改以下内容

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

第1栏
第2栏
@foreach（$数据作为$数据）
{{$datum->col1}
{{$datum->col2}
@endforeach

我找到的所有编辑器都会删除

@foreach

，有时还会破坏表。我不太在乎“视觉”模式是否被打破，但我需要HTML保持不变

---

*我在handlebar变量前面加了$前缀，这样它们就可以与刀片模板广泛兼容。

您可以使用CKEditor，但是您必须定义不希望编辑器修复的代码部分

CKEditor具有一个特性，您可以使用该特性定义编辑器不应触及的源代码部分，即使它们不是有效的HTML

我创建了一个示例，该示例将使用

@foreach

循环和示例中的变量。您可以使用它并对其进行增强以满足您的需要：

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

这是一把你可以检查的小提琴：

请注意，我更改了

第1栏
第2栏

因为它不是有效的HTML，我猜它不应该是

---

如果您想支持更复杂的模板，那么在protectedSource中需要一些更复杂的正则表达式，但是这确实可以为您提供一个良好的起点。

我找到了一些React的WYSIWYG编辑器

YouTube.com上的Pagedraw演示

我在以下网站上了解到关于组件所见即所得编辑的想法：

Pinegrow在文档中明确否认了这一点

我看到有人试图让把手与GrapesJS配合使用，但最终没有结果