所见即所得 HTML 编辑器不会尝试修复错误的 HTML

Question

我需要一个所见即所得的 HTML 编辑器，可以编辑PHP Blade和Handlebars * 模板。我尝试过TinyMCE、CKEditor和bootstrap wysihtml5但它们都“修复”了我无效的 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>

我发现的所有编辑器都删除了表格@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 中使用一些更复杂的正则表达式，但这确实可以为您提供一个很好的起点。