如何在tinymce中使模板内容不可编辑答案

【问题标题】：How to make a template content non editable in tinymce如何在tinymce中使模板内容不可编辑
【发布时间】：2012-11-14 14:16:12
【问题描述】：

我已经创建了 html 模板文件，我在该模板中放置了一些不可编辑的元素。

template.html 包含

<body>
<div>This is a sample template </div>
<div contenteditable="false" style="color:red">Read Only Text</div>
</body>

在将此模板文件插入到 textarea 时，第二个 div 是可编辑的，在检查该 div 时，我发现属性 contenteditable="false" 在插入时不存在，但它存在在插入模板之前的预览中。

感谢您的帮助！

【问题讨论】：

你试过不把 contenteditable 放在第二个 div 上吗？
@Kyokasuigetsu 是的，我已经尝试过了，并且 tinymce 插件不可编辑的第二个 div 内容具有红色，但插入时该属性不在其中
您提到了不可编辑的插件，所以我假设您已经访问过此页面：tinymce.com/tryit/noneditable_content.php，并且我假设您已仔细按照说明进行操作。页面中的示例似乎运行良好，您确定您已按照有关如何仔细使用插件的说明进行操作吗？
我已经尝试过该插件，但还有一些其他问题，我有一个名为 addheader 的选择框，它在选择时将不可编辑的内容插入到 textarea 中。如果我使用插件并选择 addheader 整行变得不可编辑

标签： javascript jquery html tinymce

【解决方案1】：

从此页面：http://www.tinymce.com/tryit/noneditable_content.php

它使用文本区域：

  <textarea name="content" style="width:100%">
    &lt;p&gt;Text with a &lt;span class="mceNonEditable"&gt;[non editable]&lt;/span&gt; inline element.&lt;/p&gt;
    &lt;p class="mceNonEditable"&gt;Noneditable text block with &lt;span class="mceEditable"&gt;[editable]&lt;/span&gt; items within.&lt;/p&gt;
    &lt;p&gt;Text with tokens that isn't [[editable]] since they match the noneditabe_regexp.&lt;/p&gt;
  </textarea>

这里的关键是在你的元素中加入一个 mceNonEditable 类：

span class="mceNonEditable"

然后，无论您拥有什么不可编辑的内容，都将其包装为大于和小于：

&gt;You cannot edit me&lt;

然后最后关闭元素：

/span

我认为你也可以在初始化 tinymce 时更改模式（在示例中他们使用的是 textareas，所以我猜你也可以使用 div 或 spans）：

tinyMCE.init({
        mode : "textareas",
        noneditable_regexp: /\[\[[^\]]+\]\]/g
});

还有 noneditable_regexp 可让您指定不可编辑内容的正则表达式。我认为这比使用 html 实体更容易。

我实际上并没有尝试过，但这就是我解释页面中示例的方式。

【讨论】：

如果我使用这个正则表达式 /(<(div|DIV)\s+class\s*?=('|")\s*?replace('|")\s*?>)(\s*?&lt;)(.*?)(&gt;\s*?)(<\/(div|DIV)\s*?>)/g 那么包含类替换的 div 应该是不可编辑的权利，但是不能在 html 内容上使用正则表达式