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:
<div>
.<div>
activates a TinyMCE session on itself.How can this be implemented, and how easy is it?
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).
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.
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;});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With