问题

我需要验证TinyMCE textarea的输入，以确保在我提交表单之前输入了一些内容。

我尝试了什么

我在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

因为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 2

如果用户进入空间怎么办!! ??这是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 3

终于解决了。

问题是我使用了FullPage插件，它自动将页面编码为

<!DOCTYPE html>

并为页面添加基本html。

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

问题中给出的代码实际上工作正常，因为editorContent字符串现在返回空或“”按预期

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是否为空输入

问题

我尝试了什么

到目前为止的代码

5 个答案: