Table of Contents
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:
- Drag Custom HTML below Rich Text Editor.
...
...
- (See Figure 1)
Figure 1: Custom HTML for Rich Text EditorFigure 1 - Use JavaScript to retrieve value.
- TinyMCE rich
...
- text value can be retrieved using:
| Code Block | ||
|---|---|---|
| ||
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:
| Code Block | ||
|---|---|---|
| ||
<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
| View file | ||||
|---|---|---|---|---|
|