CODEWITHSUNDEEP
angulartinymceangular4-forms
Nimit Joshi
Nimit Joshi

Reputation: 1046

Set tinymce editor content as readonly in angular 4

I have two editors in my form. I am using angular 4. I have applied the following code to set the editor as readonly:

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
tinymce.activeEditor.getBody().style.backgroundColor = '#ecf0f5';

But from the above code, only one editor content set as readonly. How to perform this on all editors?

Upvotes: 1

Views: 2212

Answers (4)

Robouste
Robouste

Reputation: 3680

You can simply disable the editor:

<editor [disabled]="someCondition" />

Upvotes: 3

Ketchup201
Ketchup201

Reputation: 156

Seems like others have success disabling the control. When I tried, it wouldn't allow any keyboard or mouse interaction. So instead, I used this approach, which worked well for me, which allows ctrl/a, ctrl/c and mouse selection, but prevents the user from editing the text.

tinyInitROI: any = {
base_url: '/hvbi/tinymce',
suffix: '.min',
resize: true,
plugins: "autoresize fullscreen print preview",
autoresize_bottom_margin: 10,
menubar: false,
toolbar: 'selectall copy print fullscreen',
fullscreen_native: true,

setup: function (editor) {
  editor.on('keydown', function (e, evt) {
    if (e.ctrlKey && (e.key == 'a' || e.key == 'c' || e.key == 'Control')) {
      return;
    } else {
      e.preventDefault();
    }
  }),
  editor.on('contextmenu', function (e, evt) {
    e.preventDefault();
  });
}

}

Upvotes: 0

Nimit Joshi
Nimit Joshi

Reputation: 1046

I got the idea from @Michel's answer and wrote the following code:

var result = tinymce.editors;
      result.forEach(element => {
        tinymce.get(element.id).getBody().setAttribute('contenteditable', false);
        tinymce.get(element.id).getBody().style.backgroundColor = '#ecf0f5';
      });

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13746

You can get an array of all the editors on the page with 

tinymce.editors

This returns an array with references to each editor. You can then iterate over the array and perform those commands on each editor instance.

Upvotes: 1

Related Questions