Bootstrap wysiwyg5 编辑器中的验证

Question

我使用 Bootstrap wysiwyg5 编辑器作为表单的一部分。

此文本区域恰好是必填字段（不应为空）。 我想验证用户是否在此字段中输入了任何值。 我看到 Bootstrap 所见即所得使用 Iframe 来显示内容。 我尝试通过执行以下操作访问 jQuery 中 iframe 正文的内容：

$('.textarea.wysihtml5-editor').html()

但失败了。

我的问题是：如何检查用户是否在此 Bootstrap wysiwyg textarea输入了一些文本。 请帮帮我。

PS：我看到了这个问题，但不是很有帮助。

Answer 1

我知道这个问题很老，但也许可以帮助寻找这个的人..

要使 JQuery 验证与 WysiHtml5 一起使用，只需将插件设置为不忽略隐藏的文本区域：

$('#form').validate({
   ignore: ":hidden:not(textarea)",     
   rules: {     
       WysiHtmlField: "required"
   },
   submitHandler: function(form) { ... }
});

Answer 2

您需要监听 blur 事件，然后检查编辑器的 editor.textareaElement 以获取底层 textarea。

var editor = new wysihtml5.Editor("wysihtml5-editor");

editor.on('blur', function() {
    if( this.textareaElement.value.length === 0 ) { alert('no blank entries!'); }
});

大部分信息都在他们的维基上： https : //github.com/xing/wysihtml5/wiki

Answer 3

您正在使用bootstrap- wysihtml5，而 rlemon 用常规非 bootstrap 主题 WYSIHTML5 的代码回答了您。

您的

var editor = new wysihtml5.Editor("wysihtml5-editor");

代码实际上在 bootstrap-wysihtml5-0.0.2.js （或您使用的任何版本）中

但是，此包装器将编辑器对象定义为 window.editor，因此您可以在启动 wysihtml5 元素后创建像这样的模糊功能。

window.editor.on('blur', function() {
 // do whatever you want to do on blur
});

Answer 4

我想我找到了一个解决方案，通过 jquery，我们正在向 wysihtml5 添加 nicehide 类，现在我们可以验证它，我隐藏了可见性隐藏它，也许你的代码可以没有它，其他解决方案可以将 iframe 类和 nicehide 放在相同的位置...

jQuery('.wysihtml5').wysihtml5({
"events":      {
"load": function () {
jQuery('.wysihtml5').addClass('nicehide');
}
}
});


.nicehide {
resize: none;
display: block !important;
width: 0;
height: 0;
margin: -200px 0 0 0;
float: left;
visibility:hidden;
}

感谢https://github.com/jhollingworth/bootstrap-wysihtml5/issues/275 ，我只添加了可见性..

Answer 5

html5 验证（例如 required="required"）不起作用。 发生这种情况是因为原始字段被隐藏。

如果根据您的问题在 bootstrap wysiwyg5 编辑器中进行验证，请尝试以下操作：

jQuery('.wysihtml5').wysihtml5({
   "events":      {
       "load": function () {
           jQuery('.wysihtml5').addClass('nicehide');
       }
   }
});

它是用于 css 的：

.nicehide {
    resize: none;
    display: block !important;
    width: 0;
    height: 0;
    margin: 0 0 0 -15px;
    float: left;
    border: none;
}

希望对你有帮助:)

Answer 6

对我来说，这段代码有效。
HTML

<input type='text' name='title' />
<textarea name='content' class="textarea" placeholder="Enter text ..." 
style="width: 100%; height: 200px; font-size: 14px; line-height: 18px;"></textarea>
<span id='after'></span>

CSS

.textnothide {
    display: block !important;
    position: absolute;
    z-index: -1;
}

JS

<script>
  $('.textarea').wysihtml5(
      events: {
        load: function () {
            $('.textarea').addClass('textnothide');
        }
    }
  );
<script>

此代码可防止隐藏 textarea。 但不幸的是错误信息出现在文本区域之前。 这也可以防止。

$(document).on('DOMNodeInserted', function (e) {
    if ($(e.target).hasClass('error-help-block')) {
        var id = $(e.target).attr('id');
        if (id == 'content-error') {
            $(e.target).insertBefore($('.after'));
        }
    }
});

此代码捕获 jquery 验证插件创建的错误消息并将其添加到不同的位置。 并删除了 jquery 验证代码，因为不需要。