Introduction

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

Get Started

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

  1. Drag Custom HTML below Rich Text Editor. (See Figure 1)


    Figure 1: Custom HTML for Rich Text EditorFigure 1

  2. Use JavaScript to retrieve value.
    1. TinyMCE rich text value can be retrieved using
tinymce.activeEditor.getContent();


The line of code above are used to get the content of the current active editor. ".activeEditor" can be replaced with ".get(<dom selector>) " to target specific tinyMCE editor if multiple editors exists in the same page. Sample code below can be used inside the custom HTML.

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>

Sample App

APP_kb_dx8_retrieveRTEValue.jwa


  • No labels