Non-editable content

editable_class

This option allows you to specify the class name that TinyMCE will use to determine which areas of content are editable. This would be the same as contenteditable=true, forcing an element to be editable.

Note that classes with the mceItem prefix are invisible within TinyMCE.

Type: String

Default value: 'mceEditable'

Example: using editable_class

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  editable_class: 'mceEditable'
});

editable_root

This option sets the initial editable state of a TinyMCE instance’s root.

Setting editable_root to false sets the TinyMCE root to non-editable (in effect, read-only).

a TinyMCE root set as not-editable can contain child elements with the contenteditable="true" attribute set. And these child elements remain editable even when editable_root: false is set.

Type: Boolean

Default value: true

Example: using editable_root

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  editable_root: false
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="editable-class">
  <h3>Everything in this page is `noneditable` except elements with the "editable" class:</h3>
  <div class="myclass editable">You can edit me :)</div>

  <hr>
  
  <div class="myclass editable">You can edit me too</div>

  <hr>

  <div class="myclass">This information must not be changed...</div>

  &nbsp;
  
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2>Found a bug?</h2>

  <p>If you believe you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally…</h2>

  <p>Don’t forget to check out <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
  <p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
  <p>All the best from the TinyMCE team.</p>
</textarea>
tinymce.init({
  selector: 'textarea#editable-class',
  height: 500,
  content_style: `
  body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
  .editable { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
  `,
  editable_root: false,
  editable_class: 'editable',
});
Visit Template creation example for a practical example of multi-root editing.

noneditable_class

This option allows you to specify the class name that TinyMCE will use to determine which areas of content are non-editable. This would be the same as contenteditable=false.

Note that classes with the mceItem prefix are invisible within TinyMCE.

Type: String

Default value: 'mceNonEditable'

Example: using noneditable_class

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  noneditable_class: 'mceNonEditable'
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="noneditable-class">
  Editable div example
  <div class="myclass">You can edit me :)</div>

  <hr>
  
  Non-editable div example
  <div class="myclass non-editable">You can NOT edit me!</div>

  <hr>

  &nbsp;
  
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2>Found a bug?</h2>

  <p>If you believe you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally…</h2>

  <p>Don’t forget to check out <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
  <p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
  <p>All the best from the TinyMCE team.</p>
</textarea>
tinymce.init({
  selector: 'textarea#noneditable-class',
  height: 500,
  content_style: `
  body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
  .myclass { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
  .non-editable { border-color: red; }
  `,
  noneditable_class: 'non-editable',
});

noneditable_regexp

This option is used to specify a regular expression or array of regular expressions that TinyMCE will use to determine which areas of content are non-editable. The regular expressions needs to be global so that all instances within the document are matched. The text content of the matches will be wrapped in spans, hiding the structure and styling while editing.

If elements are matched by the regular expression, the elements will be replaced with spans. Use noneditable_class for elements.

Type: String

Example: using noneditable_regexp

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  noneditable_regexp: /\d{3}-\d{3}-\d{3}/g // matches 123-456-789
});

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="noneditable-regexp">
  Editable numbers div example
  <div class="myclass green">123456789</div>

  <hr>
  
  Non-editable numbers div example
  <div class="myclass red">123-456-789</div>

  <hr>
  
  Non-editable numbers div example
  <div class="myclass red">111-222-333</div>

  <hr>
  
  Non-editable apikey div example
  <div class="myclass red">sometext apikeyyyy</div>

  <hr>

  &nbsp;
  
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2>Found a bug?</h2>

  <p>If you believe you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally…</h2>

  <p>Don’t forget to check out <a href="http://www.plupload.com" target="_blank">Plupload</a>, the upload solution featuring HTML5 upload support.</p>
  <p>Thanks for supporting TinyMCE. We hope it helps you and your users create great content.</p>
  <p>All the best from the TinyMCE team.</p>
</textarea>
tinymce.init({
  selector: 'textarea#noneditable-regexp',
  height: 500,
  content_style: `
  body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
  .green { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
  .red * { border: 0.1rem solid red; border-radius: 0.8rem; padding: 0.2rem; }
  `,
  noneditable_regexp: /apikey|\d{3}-\d{3}-\d{3}/g,
});