javascript - Validating TinyMCE for empty inputs

I use TinyMCE as a very effective WYSIWYG editor.

There are no problems with the editor functionally. The problem es 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?

I use TinyMCE as a very effective WYSIWYG editor.

There are no problems with the editor functionally. The problem es 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?

Share Improve this question edited May 23, 2017 at 12:01 CommunityBot 11 silver badge asked Jun 8, 2016 at 11:44 Master Yoda 4,41212 gold badges45 silver badges81 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 6

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./css/codepen.min.css" rel="stylesheet">
<script src="https://code.jquery./jquery-1.12.3.min.js"></script>
<script src="https://cdn.tinymce./4/tinymce.min.js"></script>
<script src="https://cdn.tinymce./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>

Finally solved it.

The problem was that I had used the FullPage plugin which automatically encodes the page as

<!DOCTYPE html>

and adds base html for a page.

https://www.tinymce./docs/plugins/fullpage/

The code given in the question actually works just fine as the editorContent string now returns empty or "" as expected

what if user enters the space !!??
Here is the plete solution with the RegEX -

var content = tinyMCE.get('tinyeditor').getContent(), patt;

            //Here goes the RegEx
            patt = /^<p>(&nbsp;\s)+(&nbsp;)+<\/p>$/g;

            if (content == '' || patt.test(content)) {
                $('.bgcolor').css("border", "1px solid Red")
            }
            else {
                $('.bgcolor').removeAttr("style")
                return true;
            }

Note: ('.bgcolor') is nothing but a div around the 'tinyeditor' to have the red border when validation occurs.

I found this worked for me:

var editorContent = '';
if(ed.getContent({format:'text'}).trim().length){
  editorContent = ed.getContent({format : 'raw'});
}

Following work for me with

tinymce.init({
    selector: '#editorHtml'
});


    function IsCreatePostValid() {
    
        tinyMCE.triggerSave();

        if ($('#editorHtml').val().trim().length <= 0) {
            return false;
        }    
        return true;
    }

check the description : MCE V4

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Validating TinyMCE for empty inputs - Stack Overflow

Problem

What I have tried

Code so far

Problem

What I have tried

Code so far

5 Answers 5

与本文相关的文章

评论列表(0)