CODEWITHSUNDEEP
javascriptjqueryhtmltinymce
super
super

Reputation: 2328

How to make a template content non editable in tinymce

I've crated html template file, I put some elements inside that template are non editable.

template.html contains

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

on inserting this template file into the textarea the second div is editable, while inspecting over that div I've seen that the attribute contenteditable="false" is not there on insert, but its there on the preview before the insert of template.

Any help gratefully received!

Upvotes: 3

Views: 5887

Answers (1)

Wern Ancheta
Wern Ancheta

Reputation: 23297

From this page: http://www.tinymce.com/tryit/noneditable_content.php

Its using a textarea:

  <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>

The key here is putting a class of mceNonEditable in your element:

span class="mceNonEditable"

Then whatever non-editable content you have, wrap it in greater than and less than:

&gt;You cannot edit me&lt;

Then finally close the element:

/span

I think you can also change the mode (in the example they're using textareas, so I guess you can also use divs or spans) when initializing tinymce:

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

There's also noneditable_regexp which lets you specify a regular expression of non-editable contents. I think this is easier than using html entities.

I haven't actually tried it but that's the way I interpret the example in the page.

Upvotes: 2

Related Questions