验证 TinyMCE 的空输入
[英]Validating TinyMCE for empty inputs
问题描述
I use TinyMCE as a very effective WYSIWYG editor.
我使用 TinyMCE 作为非常有效的 WYSIWYG 编辑器。
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.我需要验证 TinyMCE textarea 的输入，以确保在提交表单之前输入了一些内容。
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? TinyMCE 有什么变化吗？ What am i missing?我错过了什么？
5 个解决方案
解决方案1
5 已采纳 2016-06-08 18:56:33
Because tinyMCE uses an IFRAME you may always get the inner text with:由于 tinyMCE 使用 IFRAME，您可能总是使用以下内容获得内部文本：
$('#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>
解决方案2
2 2016-06-08 13:56:25
Finally solved it.终于解决了。
The problem was that I had used the FullPage plugin which automatically encodes the page as问题是我使用了 FullPage 插件，它会自动将页面编码为
<!DOCTYPE html>
and adds base html for a page.并为页面添加基本 html。
https://www.tinymce.com/docs/plugins/fullpage/ https://www.tinymce.com/docs/plugins/fullpage/
The code given in the question actually works just fine as the editorContent string now returns empty or "" as expected问题中给出的代码实际上工作得很好，因为 editorContent 字符串现在按预期返回空或 ""
解决方案3
1 2016-12-14 14:21:01
what if user enters the space !!??如果用户进入空间怎么办？？？？
Here is the complete solution with the RegEX -这是 RegEX 的完整解决方案 -
var content = tinyMCE.get('tinyeditor').getContent(), patt;
//Here goes the RegEx
patt = /^<p>( \s)+( )+<\/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.注意： ('.bgcolor') 只不过是围绕 'tinyeditor' 的一个 div，在验证发生时具有红色边框。
解决方案4
1 2018-09-20 08:12:06
I found this worked for me:我发现这对我有用：
var editorContent = '';
if(ed.getContent({format:'text'}).trim().length){
editorContent = ed.getContent({format : 'raw'});
}
解决方案5
0 2021-07-16 13:38:47
Following work for me with以下为我工作
tinymce.init({
selector: '#editorHtml'
});
function IsCreatePostValid() {
tinyMCE.triggerSave();
if ($('#editorHtml').val().trim().length <= 0) {
return false;
}
return true;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.