5

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

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

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

但失败了。

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

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

4

6 回答 6

15

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

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

$('#form').validate({
   ignore: ":hidden:not(textarea)",     
   rules: {     
       WysiHtmlField: "required"
   },
   submitHandler: function(form) { ... }
});
于 2013-12-12T19:39:42.400 回答
2

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

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

于 2013-05-16T12:29:52.563 回答
1

您正在使用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
});
于 2013-09-11T14:55:25.277 回答
1

我想我找到了一个解决方案，通过 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，我只添加了可见性..

于 2013-12-14T11:21:02.633 回答
0

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

希望对你有帮助:)

于 2016-09-29T21:18:20.963 回答
0

对我来说，这段代码有效。
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>

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

$(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 验证代码，因为不需要。

于 2020-04-14T00:45:52.807 回答