WYSIWYG HTML editor that doesn't try and fix bad HTML

Question

I need a WYSIWYG HTML editor that can edit PHP Blade and Handlebars* templates. I've tried TinyMCE, CKEditor and bootstrap wysihtml5 but they all "fix" my invalid HTML. Can anyone suggest an alternative?

I need to be able to toggle between WYSIWYG and Source mode without the following being altered.

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

All the editors I have found remove the @foreach and sometimes break the table too. I don't care too much if the "visual" mode is broken but I need the HTML to remain untouched.

*I prefix Handlebars variables with $ so they're broadly compatible with blade templates.

Boom

Answer 1

You can use CKEditor for that, however you will have to define which parts of the code you DON'T want the editor to fix.

CKEditor have the protectedSource feature which you can use to define the parts of the source that the editor should not touch, even if they are not valid HTML.

I've created an example that will work with your @foreach loop and the variables in your example. You can take it and enhance it to fit your needs:

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

Here is a working fiddle you can check: 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>

If you want to support more complex templates you will need some more complex regular expressions inside the protectedSource, however this can really give you a good place to start.

Statesman

Unfortunately CKEditor5 no longer has protectedSource – Conformal

Answer 2

There were some WYSIWYG editors for React, that I was able to find.

• https://github.com/Pagedraw/pagedraw
• https://github.com/c8r/lab

Demo of Pagedraw on YouTube.com, https://www.youtube.com/watch?v=NjH3koR1E6w

I read about the idea about WYSIWYG editing of components in https://medium.com/@vlascik/ember-in-the-middle-of-2019-the-good-the-bad-the-ugly-hopefully-d641cc73d6d1:

• https://pinegrow.com
• https://grapesjs.com/

Pinegrow explicitly disavows this in the documentation, https://pinegrow.com/docs/pages/pages.html#formats

I saw an attempt to get Handlebars working with GrapesJS, but it ended up inconclusively, https://github.com/artf/grapesjs/issues/1162

Ulm