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

Question

我需要一个可以编辑 PHP Blade and Handlebars* templates. I've tried TinyMCE, CKEditor and bootstrap wysihtml5 的所见即所得 HTML 编辑器，但它们都 "fix" 我无效 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，有时也会破坏 table。我不太在意 "visual" 模式是否损坏，但我需要 HTML 保持不变。

*我在 Handlebars 变量前加上 $ 以便它们与 blade 模板广泛兼容。

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 );
}

这是一个有效的 fiddle 您可以查看：https://jsfiddle.net/0tw75xt3/

Note that I changed the

<tr> <tr>Column 1</tr> <tr>Column 2</tr> </tr>

since it's not a valid HTML and I guessed it wasn't supposed to be <tr><tr>

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