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 驗證代碼，因為不需要。