TinyMCE formatting for contentEditable=false elements

index.js

// To resolve all quirks need to use custom elements
// Demo: http://fiddle.tinymce.com/7whaab

tinymce.init({
  selector: 'textarea',
  
  // custom html elements will force tinymce to wrap var-inline when formatting
  // and apply formatting inside of var-block (as it should be)
  custom_elements: "~var-inline,var-block",
  
  setup: (editor) => {
    // temporary remove content editable false before commands and apply back then
    editor.on("BeforeExecCommand", () => {
      editor.selection.editor
        .getBody()
        .querySelectorAll("[contenteditable=false]")
        .forEach((n) => {
          n.setAttribyte("noneditable", "true");
          n.removeAttribute("contenteditable");
        });
    });
    editor.on("ExecCommand", () => {
      editor
        .getBody()
        .querySelectorAll("[noneditable="true"]")
        .forEach((n) => {
          n.setAttribute("contenteditable", "false");
          n.removeAttribute("noneditable");
        });
    });
  },
});

tinymce.html

<textarea>
  <var-inline contenteditable="false">Some inline placeholder</var-inline>
  <var-block contenteditable="false">Some block placeholder (tables or images)</var-block>
</textarea>