6

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

4

2 回答 2

5

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

于 2016-07-07T02:46:49.170 回答
0

我能找到一些用于 React 的 WYSIWYG 编辑器。

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中阅读了有关 WYSIWYG 组件编辑的想法：

Pinegrow 在文档中明确否认这一点，https: //pinegrow.com/docs/pages/pages.html#formats

我看到有人尝试让 Handlebars 与 GrapesJS 一起工作，但最终没有定论，https://github.com/artf/grapesjs/issues/1162

于 2020-03-28T11:38:53.910 回答