Retrieving TinyMCE rich text value with JavaScript

Introduction

This article demonstrates how to utilize Custom HTML to retrieve TinyMCE rich text content using JavaScript, providing users with the option to manipulate the data based on the user's use case.

How does it work?

After configuring TinyMCE Rich Text Editor. Here are the steps to implement JavaScript into the editor: 

1. Drag and drop a Custom HTML component below the Rich Text Editor in your form or page.
   
2. Use JavaScript to retrieve the value from the TinyMCE editor.
   The key function for this is tinymce.activeEditor.getContent();

The line of code above is used to get the content of the current active editor .activeEditor can be replaced with .get(<dom selector>) to target specific tinyMCE editors if multiple editors exist on the same page.

Here’s how you can implement this in your Custom HTML component:

Sample Code:

<div class="btn btn-primary" id="get-text">get text</div>
 
<script>
$(document).ready( function(){
    $("#submit").click(function() {
         
        var description=FormUtil.getField('description');
        let content = FormUtil.getValue('description');
         
        console.log("content",content);
        setTimeout(function(){
            $.unblockUI();
        },500)
        return false;
         
        location.reload();
    });
     
    $('#get-text').on('click', function(){
        content = FormUtil.getField('description');
        text = tinymce.activeEditor.getContent({format: "text"});   //specify format = text so that it returns text-only, not htmls
        console.log(text);
    })
})
</script>

Download sample app