Menu
I use TinyMCE as a very effective WYSIWYG editor.
There are no problems with the editor functionally. The problem comes when trying to determine if its empty.
I need to validate the input of the TinyMCE textarea to ensure that something has been entered before I submit the form.
I have discovered on this question that users have had success with this using the following statement
var editorContent = tinyMCE.get('tinyeditor').getContent();
if (editorContent == '')
{
// Editor empty
}
For me there is a problem with this because instead of returning an empty string, the string returned looks like this (While empty):
"<!DOCTYPE html>↵<html>↵<head>↵</head>↵<body>↵↵</body>↵</html>"
I even tried evaluating the string like this
if (editorContent == "<!DOCTYPE html>↵<html>↵<head>↵</head>↵<body>↵↵</body>↵</html>")
{
// Editor empty
}
But it doesnt pick it up
function validateForm()
{
var editorContent = tinyMCE.get('editor').getContent();
if (editorContent == "" || editorContent == null)
{
// Add error message if not already present
if (!$('#editor-error-message').length)
{
$('<span id="editor-error-message">Editor empty</span>').insertAfter($(tinyMCE.get('editor').getContainer()));
}
}
else
{
// Remove error message
if ($('#editor-error-message'))
$('#editor-error-message').remove();
document.getElementById('submit').submit();
}
}
Has something changed in TinyMCE? What am i missing?
978
Because tinyMCE uses an IFRAME you may always get the inner text with:
$('#tinyeditor_ifr').contents().find('body')[0].innerHTML
or
$('#tinyeditor_ifr').contents().find('body').text()
So to check if the content is null you may check if:
$('#tinyeditor_ifr').contents().find('body').text().trim().length == 0
In the following the code I used to test:
$(function () {
tinyMCE.init({
selector: 'textarea',
mode: "textareas",
plugins: "fullpage"
});
$('#btn').on('click', function (e) {
console.log($('#tinyeditor_ifr').contents().find('body')[0].innerHTML);
// this will output: "<p>This is <strong>my text</strong> that I <strong>use</strong> for my example.</p>↵"
console.log(tinyMCE.get('tinyeditor').getContent());
// this will output: "<!DOCTYPE html>↵<html>↵<head>↵</head>↵<body>↵<p>This is <strong>my text</strong> that I <strong>use</strong> for my example.</p>↵</body>↵</html>"
})
});
.textarea {
height: 100px;
width: 100%;
}
.myButton {
border-radius: 4px;
border: 1px solid black;
display: inline-block;
cursor: pointer;
color: black;
font-family: Arial;
font-size: 15px;
padding: 6px 15px;
text-decoration: none;
}
<link href="https://www.tinymce.com/css/codepen.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<script src="https://cdn.tinymce.com/4/plugins/fullpage/plugin.js"></script>
<textarea id="tinyeditor" name="content" style="width:100%">
<p>This is <strong>my text</strong> that I <strong>use</strong> for my example.</p>
</textarea>
<button id="btn" class="myButton">Get TinyMCE Texr</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
