6

How would I set tinymce to automatically set the editor as readonly if the textarea already has the attr("readonly")

John Magnolia
  • 16,769
  • 36
  • 159
  • 270

5 Answers5

16

A more general solution might be

tinyMCE.init({
    ...
    setup: function(ed) {
        if($('#'+ed.id).attr('readonly'))
            ed.settings.readonly = true;
    }
});

This will work for all textareas without you having to specify any ids. In addition it will actually set the editor to readonly mode, and not only prevent editing.

Magnar Myrtveit
  • 2,432
  • 3
  • 30
  • 51
4

In case you have the following textarea

<textarea id="my_textarea_id" readonly="readonly">Some content here.</textarea>

you may save the knowledge of having a readonly attribute to a variable:

var readonly = $("textarea#my_textarea_id").attr("readonly") ? 1 : 0;

Now the tinymce init function. We choose mode none to init the editor later.

tinyMCE.init({
        theme : "advanced",
        mode: 'none',
        readonly : readonly,
        ...
});

Here, you can init your editor instance using the id of your textarea

tinyMCE.execCommand("mceAddControl", true, "my_textarea_id");

Your editor instance will be initialized as readonly.

Thariama
  • 50,002
  • 13
  • 138
  • 166
  • Dude you should write a book with all the modifications you know on tinymce, I would definitely buy it. Their documentation is hard to understand, well for me: e.g: http://www.tinymce.com/wiki.php/Command_identifiers and http://www.tinymce.com/wiki.php/API3:method.tinymce.execCommand and you search for: 'mceAddControl' returns nothing. I guess its easy to find, if you know exactly what you are looking for – John Magnolia Sep 25 '12 at 14:21
  • thanks, but my knowledge is far from letting me write a book about it :) Finding the right thing in the documentation can be tricky sometimes. You will find the hint to mceAddControl in the description of the configuration parameter mode: http://www.tinymce.com/wiki.php/Configuration:mode – Thariama Sep 25 '12 at 14:37
2

if do not wish to apply tinyMCE to the readonly fields use class="readonly" then

tinyMCE.init({
    ...
    editor_deselector: "readonly"
});

the textareas with readonly class will be ignored

SparK
  • 5,181
  • 2
  • 23
  • 32
  • 1
    The problem with this approach is that the HTML will be displayed if I use a standard textarea. I need tinymce to display this in a iframe – John Magnolia Sep 25 '12 at 14:12
0

if you what set readOnly mode of tinyMce you should use tinyMCE API. so you can set read only:

tinyMCE.init({
        ...
        theme : "advanced",
        readonly : 1
});

If you want to set only value "readonly" for textarea, so please note that tinyMce has own wrapper for this field, and native field(from html) - set as hidden field, so it is useless set any attribute for one

Anton Baksheiev
  • 2,211
  • 2
  • 14
  • 15
  • this would work. problem here is that he wants to make this setting dependant on the class of his textarea - see my solution for this – Thariama Sep 25 '12 at 13:52
0

I have several tiny mce's and some of them have class="nonEditableMCE" and some have class="editableMCE". If that is the case, you can have two inits and this is working. It is much simpler when Id's are dynamic to use class selector.

tinymce.init({
        selector: ".nonEditableMCE",
        height: 200,
        statusbar: false,
       readonly : 1

    });

    tinymce.init({
        selector: ".editableMCE",
        height: 200,
        statusbar: false,
        readonly: 0

    });
Vlada
  • 61
  • 7