Validating TinyMCE for empty inputs

Master Yoda Published at Dev

Master Yoda

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.

Problem

I need to validate the input of the TinyMCE textarea to ensure that something has been entered before I submit the form.

What I have tried

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

Code so far

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?

gaetanoM

Because tinyMCE uses an IFRAME you may always get the inner text with:

$('#tinyeditor_ifr').contents().find('body')[0].innerHTML

$('#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%">
  &lt;p&gt;This is &lt;strong&gt;my text&lt;/strong&gt; that I &lt;strong&gt;use&lt;/strong&gt; for my example.&lt;/p&gt;
</textarea>
<button id="btn" class="myButton">Get TinyMCE Texr</button>

Collected from the Internet

Please contact [email protected] to delete if infringement.