Tinymce只作为文本编辑器，没有编辑html

Question

I have a complex layout and dont want the client to be able to mess this up and end up breaking it. So I would like to restrict tinymce so that they can only edit/change the text.

• No changes would be allowed to the layouts
• No adding/removing anything apart from text
• Literally all they can do is change the text.

Is this possible?

Answer 1

I would say: "Yes, this is possible, depending on what you think which kind of actions a user may do."

I assume your layout exists as html code and is to be found in the editor. Now when a user starts selecting and deleting - that's a point where you will have to step in. You can write an own plugin (or a suitable setup config param with an onKeyUp handler) that checks if any of your valuable layout elements is gone. If thats the case you will need to fix it. You can also check for the keycodes (ctrl+x, DELTE, Backspace, aso.). Copying into the editor would need to be restricted to text too (there are several SO questions regarding this problem).

Answer 2

TinyMce has a plugin for it. It is called noneditable : https://www.tinymce.com/docs/plugins/noneditable/

You can initiate tinymce like this:

tinymce.init({
    selector: 'texteditor',  // change this value according to your HTML
    toolbar: 'undo redo', // disable most of the plugins ...
    context_menu: false,
    menubar: false,        // ... to allow text edit only
    noneditable_editable_class: "editable", // class allowed to edit
    noneditable_noneditable_class: "non_editable" // the parent (everything else)

});

You have to define both attributes - I tried only with noneditable_editable_class counting on it will take the rest as not editable - without success.

The other solution (without tinyMce) would be placing contenteditable attribute on the page elements you wish to be allowed to edit:

$('.editable').attr('contenteditable','true');