Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to programatically select all text inside a TinyMCE editor

I'm looking for a way to programatically select all the content inside a TinyMCE editor instance.

The reason I need this is that I'd like it if all the text inside the editor was selected, as soon as someone clicks on it (I'm using TinyMCE in conjunction with JEditable, by the way).

Thanks,
Edan

like image 465
Edan Maor Avatar asked Apr 27 '10 16:04

Edan Maor


People also ask

How do you get text from TinyMCE editor?

The TinyMCE getContent and setContent methods You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.

How do you replace content in TinyMCE?

Here is the code that will replace your editor content. But you will need to do this action at the correct time. var editor = tinyMCE. get('my_editor_id'); also works.

How do you refresh TinyMCE editor?

Re: How refresh editor after setContent Well, both exec mceInsertContent and your workaround (do a selection. setContent then another editor. setContent) basically do the same thing. tinymce.

How do I get the content of a textarea using TinyMCE?

You can do this using the getContent () method from the TinyMCE API. Let’s say you have initialized the editor on a textarea with id=”myTextarea”. First access the editor using that same id, then call getContent ().

When is the TinyMCE editor populated with content?

After the TinyMCE editor is added to the initial example, the save and load functions are updated to access the editor content using these methods. Often you will want the editor populated with content as soon as it’s initialized.

How to write JavaScript code in TinyMCE?

Create setdata.html file inside the tinymce project folder. Create setdata.js file inside the js folder. This file will contain the javascript code that we are going to write. Now the project folder will look like the following...

How do I access the active editor from the TinyMCE API?

Or, instead of accessing the editor by id, you can access the active editor. When you’re using TinyMCE in your apps for users to edit content previously stored somewhere else, like in a CMS, you’ll need a way to populate the editor with that content. You can do this using the setContent () method from the TinyMCE API.


2 Answers

Assuming you have your TinyMCE editor instance stored in a variable called ed:

ed.selection.select(ed.getBody(), true);
like image 88
Tim Down Avatar answered Oct 25 '22 07:10

Tim Down


For tinyMCE 4 I'm using the Range Object for selection:

function selectAll(editor) {
    range = editor.dom.createRng();
    range.selectNodeContents(editor.getBody());
    editor.selection.setRng(range);
}

selectAll(tinyMCE.focusedEditor);
like image 29
Alex Avatar answered Oct 25 '22 06:10

Alex