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.

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.