CKeditor protectedSource handlebars

Question

I am attempting to use CKeditor with handlebar templates to allow users to customize messages in our app.

CKEditor does some weird stuff

It turns this:

<table>
  <thead>
    <tr>
      <td>Activity</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Amount</td>
    </tr>
  </thead>
  <tbody>
    {{line_items}}
  </tbody>
</table>

Into this:

{{line_items}}
<table>
  <thead>
    <tr>
      <td>Activity</td>
      <td>Quantity</td>
      <td>Rate</td>
      <td>Amount</td>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Then googling led me to use config.protectedSource to protect all handlebars.

CKEDITOR.replace('template_body', {
  //... other stuff

  protectedSource: [
    /{{[\s\S]*?}}/g
  ]
}

This setting does properly protect handlebar tags from being moved and removed, but then prevents them from being viewed/edited!

CKEditor hides the protected source while in editing mode, and shows it while in source mode! is that a bug? I can see {{}} while in source mode of the editor but not in regular mode?

Answer 1

Looking at the number for requests it looks like the author of this plugin did a great work, try it. You shall be able to edit protected source in wysiwyg mode with it.