Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have various <div>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 the text within it using TinyMCE.

My question is - is it possible to run the TinyMCE functions on a <div> without actually having the text inside selected? What I mean is, I want to implement the following use case:

  1. User clicks on a <div>.
  2. <div> activates a TinyMCE session on itself.
  3. User can now use the buttons on the TinyMCE toolbar to edit all the text in the div, without having to actually select the text manually using the cursor. Otherwise the usual case is that the user has to select some of the text, and only this selected text will be edited by the TinyMCE tools.

How can this be implemented, and how easy is it?

Edit

Clarification: I do not mean only that all text should automatically be selected by TinyMCE editor for changes, but I mean that without selecting at all, can it be formatted? My objective is to allow users to be able to edit only the formatting of a <div> using TinyMCE, but not to be able to change the text itself. I actually don't want the user to be able to select any text, just click on the <div>, which should automatically allow the contained text to be formatted by TinyMCE, without its text actually being changed. But the textarea should not be "selectable" for the user, if you know what I mean. It can select itself if needed (as per @Thariama's solution below), but just not by the user. Is this possible? Sort of like enabling just the TinyMCE toolbar buttons but disabling the text editing capabilities. As far as I've understood, I can't use the readonly configuration of TinyMCE it also disables the toolbar with all the formatting options (like text highlight, bold, italics etc).

like image 448
user961627 Avatar asked Oct 21 '22 21:10

user961627


2 Answers

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.

like image 137
Thariama Avatar answered Nov 01 '22 16:11

Thariama


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;});

like image 29
user961627 Avatar answered Nov 01 '22 17:11

user961627