How to use TinyMCE functions on text without actually selecting that text?

Question

I have various

s on my page, which, when clicked, convert into TinyMCE editor sections. So the user can just double click on the div and then edit t

相关标签:

Answer 1

It is not a big problem to select all editor content after tinymce got initialized.This can be done easily using the setup configuration parameter

tinyMCE.init({
   ...
   setup : function(ed) {
        ed.onInit.add(function(ed, evt) {

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

            var range = ed.selection.dom.createRng();

            range.setStartBefore(ed.getBody().firstChild);
            range.setEndAfter(ed.getBody().lastChild);
            ed.selection.setRng(range);
        });
   }
});

Here is a tinymce fiddle for this.

Update:

What you are looking for is something like $(ed.getBody()).attr('contenteditable','false'); This way a user won't be able to select or even edit the editor content, but the tinymce buttons are still usable (with all consequences). You could create an own toolbar element with the desired functionality.

Answer 2

The answer for me was to use a combination of @Thariama's setup code:

tinyMCE.init({ ....
    setup : function(ed) {  
    ed.onInit.add(function(ed, evt) {

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

        var range = ed.selection.dom.createRng();

        range.setStartBefore(ed.getBody().firstChild);
        range.setEndAfter(ed.getBody().lastChild);
        ed.selection.setRng(range);
    });
}
});

With a way to disable keypresses in the textarea, i.e. if my textarea has an ID of TAID, then I added this code:

$('#TAID_ifr').contents().find('html').bind('keypress', function(e){return false;});