CODEWITHSUNDEEP
tinymcetinymce-4
cyrat
cyrat

Reputation: 636

How to make readonly in tinyMCE 4.x work?

I saw a lot of posts here but each one of them is too old and its not connected with tinyMCE 4.x I am searching the web from days and I can't find an option to set tinyMCE 4.x in readonly mode.

At this moment I just hide toolbars and menubars but I still can delete text and so on...

Upvotes: 5

Views: 6705

Answers (3)

Michael Nwuzor
Michael Nwuzor

Reputation: 103

As stated in the TinyMCE docs as seen via this link https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@readonly/, the readonly attribute should be set to '1' not to 'true'.

// Move focus to specific element
tinyMCE.init({
  theme : "advanced",
  readonly : 1
});

Hope this helps

Upvotes: 1

Envil
Envil

Reputation: 2727

This take me some time to research how to make tinymce in readonly mode.

The key point here is set readonly to 1 or 0, not true or false. For example here is my init code:

tinymce.init({
            selector: "#html-textarea",
            menubar: false,
            statusbar: false,
            resize: "both",
            plugins: [
                "textcolor image link preview code table media noneditable"
            ],
            readonly: status, // **status hold value 0 or 1, NOT true or false**
            toolbar: 'preview | undo redo | removeformat | cut copy paste | formatselect fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | link unlink image media | code table | bullist numlist | outdent indent blockquote'
        });

Upvotes: 0

xdarsie
xdarsie

Reputation: 111

This is how I make it read-only.

tinymce.init({
  selector: "#id",
  readonly: true,
  toolbar: false,
  menubar: false,
  statusbar: false
  // more inits...
});

You may need to tweak your styles to fix the editor borders.

Upvotes: 5

Related Questions