为空输入验证 TinyMCE

Question

我使用 TinyMCE 作为一个非常有效的所见即所得编辑器。

编辑器在功能上没有问题。尝试确定它是否为空时出现问题。

问题

我需要验证 TinyMCE 文本区域的输入以确保在我提交表单之前已经输入了一些内容。

我试过的

我在 this 问题上发现，用户使用以下语句已成功解决此问题

var editorContent = tinyMCE.get('tinyeditor').getContent();
if (editorContent == '')
{
    // Editor empty
}

对我来说这有一个问题，因为返回的字符串不是返回空字符串，而是如下所示（虽然为空）：

"<!DOCTYPE html>↵<html>↵<head>↵</head>↵<body>↵↵</body>↵</html>"

我什至试过像这样评估字符串

if (editorContent == "<!DOCTYPE html>↵<html>↵<head>↵</head>↵<body>↵↵</body>↵</html>")
{
    // Editor empty
}

但它不接收

到目前为止的代码

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();
    }
}

TinyMCE 有什么变化吗？我错过了什么？

Answer 1

终于解决了。

问题是我使用了自动将页面编码为

的 FullPage 插件

<!DOCTYPE html>

并为页面添加基础 html。

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

问题中给出的代码实际上与 editorContent 字符串一样正常工作 returns 为空或预期为“”

Answer 2

因为 tinyMCE 使用 IFRAME，所以您总是可以通过以下方式获取内部文本：

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

或

$('#tinyeditor_ifr').contents().find('body').text()

所以要检查内容是否为空，您可以检查是否：

$('#tinyeditor_ifr').contents().find('body').text().trim().length == 0

下面是我用来测试的代码：

$(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>

Answer 3

如果用户输入 space 会怎样！！??
这是使用 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;
            }

注意： ('.bgcolor') 只不过是 'tinyeditor' 周围的 div，以便在验证时显示红色边框。

Answer 4

我发现这对我有用：

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

Answer 5

以下为我工作

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


    function IsCreatePostValid() {
    
        tinyMCE.triggerSave();

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

check the description : MCE V4

为空输入验证 TinyMCE

Validating TinyMCE for empty inputs

javascript

jquery

tinymce

问题

我试过的

到目前为止的代码