Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Abstract illustration with text: "getContent" and "setContent".

How to get content and set content in TinyMCE

Ben Long

February 25th, 2020

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

Tagged

Some of the most common questions we are asked by developers, when they’re integrating TinyMCE with their apps for the first time, are about how to get content and set content in the editor.

So here’s a brief guide on the relevant TinyMCE API methods, as well as some of the other commonly asked questions, like how to set content on initialization, and how to get the content without any HTML tags.

Animated gif of Kermit the Frog typing frantically on a typewriter.

The TinyMCE getContent and setContent methods

getContent()

Once a user has entered content in the editor, you will probably want to save the content to a database somewhere, in which case you’ll need to get the content first. 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().

var myContent = tinymce.get('#myTextarea').getContent();

This will return the content in the editor marked up as HTML.

Or, instead of accessing the editor by id, you can access the active editor.

var myContent = tinymce.activeEditor.getContent();

setContent()

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.

For example:

tinymce.get('#myTextarea').setContent('<p>Hello world!</p>');

Or, where it’s the active editor:

tinymce.activeEditor.setContent('<p>Hello world!</p>');

See an example

Check out our previous article where we save to and load from our rich text editor using JavaScript and localStorage. 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.

How to set TinyMCE content on initialization

Often you will want the editor populated with content as soon as it’s initialized. In this case, you can use the setup option in the editor config.

For example:

<script>
  tinymce.init({
    selector: '#myTextarea',
    setup: function (editor) {
      editor.on('init', function (e) {
        editor.setContent('<p>Hello world!</p>');
      });
    }
  });
</script>

Again, check out our JavaScript localStorage example, towards the end, where we remove the load button and add the content on initialization.

How to get content in TinyMCE without any HTML tags

Depending on your use case, sometimes you might want to get the TinyMCE content without the HTML markup. In this case, when calling getContent, you can pass in a parameter to indicate that, instead of returning HTML, you want the result in plaintext.

For example:

var myContent = tinymce.get('#myTextarea').getContent({format: 'text'});

What next?

Is there anything else you’d like to see here in this article? Contact me on Twitter and let me know.

While we’re talking about getting and setting TinyMCE content, you might also be interested to know...

  • Tiny provides clean copy/paste of content from Word, Excel, and other popular content tools. Check out the PowerPaste plugin.
  • There’s an Autosave plugin that comes free with TinyMCE to save your users the frustration of losing their work based on connectivity or other issues outside their control.

Not already using TinyMCE on the cloud? Get a free API Key and try it out. It’s super easy to set up. You also get a 30 day trial of the full suite of premium plugins.

TinyMCE
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Neon sign of speech ballon with text: 'hello'.
    Tips & How-Tos

    Neon fonts and glowing text: get started in two steps

    by Ben Long in Tips & How-Tos

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor