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.
1. Drag Custom HTML below Rich Text Editor.
1. Use JavaScript to retrieve value.
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:
<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>
The sample app for this article: APP_RTE_sampleApp-1-20240108152510.jwa