editable_class

此选项允许您指定 TinyMCE 将使用的类名，用于确定哪些内容区域可编辑。这与 contenteditable=true 效果相同，强制元素变为可编辑。

注意，带有 mceItem 前缀的类在 TinyMCE 中是不可见的。

类型： String

默认值： 'mceEditable'

示例：使用 editable_class

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

editable_root

此选项设置 TinyMCE 实例根元素的初始可编辑状态。

将 editable_root 设置为 false 会将 TinyMCE 根元素设置为不可编辑（实际上是只读）。

设置为不可编辑的 TinyMCE 根元素可以包含设置了 contenteditable="true" 属性的子元素。即使设置了 editable_root: false，这些子元素仍保持可编辑状态。

类型： Boolean

默认值： true

可能的值： true，false

示例：使用 editable_root

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

HTML

<textarea id="editable-class">
  <h3>Everything in this page is `noneditiable` 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/tinymce/latest/_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>Need file uploads in your app？ Consider using <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> with TinyMCE for a fast， modern upload experience.</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>

JS

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',
});
访问 模板创建示例 查看多根元素编辑的实际示例。

allow_noneditable

此选项控制是否启用不可编辑内容功能。当设置为 false 时，不可编辑功能将被完全禁用，等同于在 TinyMCE 6 之前禁用 noneditable 插件。

类型： Boolean

默认值： true

示例：使用 allow_noneditable

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

noneditable_class

此选项允许您指定 TinyMCE 将使用的类名，用于确定哪些内容区域不可编辑。这与 contenteditable=false 效果相同。

注意，带有 mceItem 前缀的类在 TinyMCE 中是不可见的。

类型： String

默认值： 'mceNonEditable'

示例：使用 noneditable_class

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

HTML

<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/tinymce/latest/_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>Need file uploads in your app？ Consider using <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> with TinyMCE for a fast， modern upload experience.</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>

JS

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

此选项用于指定一个正则表达式或正则表达式数组，TinyMCE 将使用这些正则表达式来确定内容的哪些区域是不可编辑的。正则表达式需要是全局的，以便匹配文档中的所有实例。匹配到的文本内容将被包裹在 span 中，在编辑时隐藏其结构和样式。

如果元素被正则表达式匹配到，该元素将被替换为 span。对于元素，请使用 noneditable_class。

类型： String

示例：使用 noneditable_regexp

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配您的 HTML
  noneditable_regexp: /\d{3}-\d{3}-\d{3}/g // 匹配 123-456-789
});

HTML

<textarea id="noneditable-regexp">
  可编辑数字 div 示例
  <div class="myclass green">123456789</div>

  <hr>
  
  不可编辑数字 div 示例
  <div class="myclass red">123-456-789</div>

  <hr>
  
  不可编辑数字 div 示例
  <div class="myclass red">111-222-333</div>

  <hr>
  
  不可编辑 apikey div 示例
  <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/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2>发现 Bug？</h2>

  <p>如果您认为自己发现了一个 bug，请在 <a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a> 上创建 issue，以向开发者报告。</p>

  <h2>最后…</h2>

  <p>需要在你的应用中实现文件上传功能？考虑将 <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> 与 TinyMCE 结合使用，以获得快速、现代的上传体验。</p>
  <p>感谢你支持 TinyMCE。我们希望它能帮助你和你的用户创建出色的内容。</p>
  <p>来自 TinyMCE 团队的最诚挚问候。</p>
</textarea>

JS

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,
});