make readonly/disable tinymce textarea

问题

I need to disable or make readonly a tinymce textarea at runtime.

回答1:

Use the configuration parameter readonly

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

Here is a link to a demo.

Update: What you can do to prevent users from editing content in your editor is to set the contenteditable attribute of the editors iframe body to false:

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

回答2:

From version 4.3.x on you can use code below for readonly mode

tinymce.activeEditor.setMode('readonly');

and for design mode:

tinymce.activeEditor.setMode('design');

回答3:

IF you only have one editor, this works:

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

If you have multiple editors, you have to select them by the id of the textarea:

tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);

回答4:

Thariama's solution will set all TinyMCE textareas on the page to readonly.

The best solution I've found was posted by Magnar Myrtveit which will set fields to readonly that have the readonly attribute. Here is the code:

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

回答5:

To disable you can call this command:

tinymce.EditorManager.execCommand('mceToggleEditor', true, tinymceId);

And to again enable the editor you can again call this command.

'mceToggleEditor' command toggles the WYSIWYG mode on or off by displaying or hiding the textarea and editor instance. This is not the same thing as mceAddControl or mceRemoveControl because the instance is still there and uninitialized, so this method is faster.

Link for above command: http://archive.tinymce.com/wiki.php/TinyMCE3x:Command_identifiers

回答6:

you can use

this.getBody().setAttribute('contenteditable', false);

take look at full solution,, my server side is Asp.net MVC

 setup: function (ed) {
        ed.on('init', function () {
            this.execCommand("fontSize", false, "17px");
            $("html,body").scrollTop(0);
            @if (ViewBag.desableEdit != null && ViewBag.desableEdit == true)
            {
                <text>
                    this.getBody().setAttribute('contenteditable', false);
                </text>
            }

        });

anather way to do it if you have server side condition which will be removed in the returned HTML

 tinymce.init({
    selector: ... ,
    ....
    @if (ViewBag.desableEditExseptExportNumber != null && ViewBag.desableEditExseptExportNumber == true)
    {
         <text>
              readonly: 1,
         </text>
    }
    language: 'ar',
    ....});

回答7:

Maybe this code line helps in others browsers using iframes.

tinymce.activeEditor.getBody().contenteditable = false

Regards!

回答8:

You can see this answer here by @rioted: https://stackoverflow.com/a/34764607/1827960.

I used it to come up with this solution:

tinymce.settings = $.extend(tinymce.settings, { readonly: 1 });
tinymce.EditorManager.editors.forEach(function (editor) {
    tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
    //tinymce.EditorManager.editors = [];
    tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
});

回答9:

That works for ASP.NET MVC Razor

readonly: @(Model.Readonly ? "true" : "false")

while initializing tinyMCE:

tinymce.init({/* put readonly setting here */});

回答10:

For the latest 5.x version, use

editor.mode.set('readonly')

and

editor.mode.set('design')

来源：https://stackoverflow.com/questions/13881812/make-readonly-disable-tinymce-textarea

标签

javascript

jquery

html

tinymce

wysiwyg