Redactor

Question

我正在尝试检查是否验证更改事件的提交按钮。我已经尝试了正常的 jquery 更改功能，如下所示，还有 Redactor 回调方法，也在下面，但没有任何效果。 None 我的 console.logs 正在开火。

编辑器 100% 正常工作，没有错误，但我也添加了已编译的 HTML 以防万一。

JS 方法

$('#compose-message .redactor-editor').on('change', function(){
  var messageLength = $('#compose-message .redactor-editor').text().length;
  var formtagLength = $('.compose-wrap .available-friends-wrap').find('.fa-check').length;

  console.log('messageLength = ' + messageLength);
  console.log('formtagLength = ' + formtagLength);

  if ( messageLength > 1 && formtagLength > 0) {
    // enable button
    $('#compose-message .action-btn').removeClass('disabled').attr('disabled', false);
  } else{
    // disable button
    $('#compose-message .action-btn').addClass('disabled').attr('disabled', true);
  }
});

编辑器方法

$('#message-body-field').redactor({
callbacks: {
    change: function()
    {
      var messageLength = $('#compose-message .redactor-editor').text().length;
      var formtagLength = $('.compose-wrap .available-friends-wrap').find('.fa-check').length;

      console.log('messageLength = ' + messageLength);
      console.log('formtagLength = ' + formtagLength);

      if ( messageLength > 1 && formtagLength > 0) {
        // enable button
        $('#compose-message .action-btn').removeClass('disabled').attr('disabled', false);
      } else{
        // disable button
        $('#compose-message .action-btn').addClass('disabled').attr('disabled', true);
      }
    }
}   
});

HTML - 编辑器已经初始化，例如从浏览器源代码复制

<form id="compose-message">
  <div class="form-group choose-recipients">
    <label for="message-recipient-field pull-left">Send to:</label>
    <div class="available-friends-wrap overflow-x">
      <span class="form-tag">Csanad Novak <i class="fa fa-plus"></i></span> <span class="form-tag">Tony Stark  <i class="fa fa-plus"></i></span> <span class="form-tag">Yan Lin <i class="fa fa-plus"></i></span> <span class="form-tag">Sean Xu <i class="fa fa-plus"></i></span> <span class="form-tag">AJ Hunt <i class="fa fa-plus"></i></span> <span class="form-tag">Alley Express <i class="fa fa-plus"></i></span>
    </div>
  </div>
  <div class="form-group">
    <label for="message-body-field">Add your message</label>
    <div class="redactor-box" role="application"><ul class="redactor-toolbar" id="redactor-toolbar-0" role="toolbar" style="position: relative; width: auto; top: 0px; left: 0px; visibility: visible;"><li><a href="#" class="re-icon re-html" rel="html" role="button" aria-label="HTML" tabindex="-1"></a></li><li><a href="#" class="re-icon re-formatting redactor-toolbar-link-dropdown" rel="formatting" role="button" aria-label="Formatting" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-bold" rel="bold" role="button" aria-label="Bold" tabindex="-1"></a></li><li><a href="#" class="re-icon re-italic" rel="italic" role="button" aria-label="Italic" tabindex="-1"></a></li><li><a href="#" class="re-icon re-deleted" rel="deleted" role="button" aria-label="Deleted" tabindex="-1"></a></li><li><a href="#" class="re-icon re-unorderedlist" rel="unorderedlist" role="button" aria-label="&amp;bull; Unordered List" tabindex="-1"></a></li><li><a href="#" class="re-icon re-orderedlist" rel="orderedlist" role="button" aria-label="1. Ordered List" tabindex="-1"></a></li><li><a href="#" class="re-icon re-outdent" rel="outdent" role="button" aria-label="< Outdent" tabindex="-1"></a></li><li><a href="#" class="re-icon re-indent" rel="indent" role="button" aria-label="> Indent" tabindex="-1"></a></li><li><a href="#" class="re-icon re-link redactor-toolbar-link-dropdown" rel="link" role="button" aria-label="Link" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-alignment redactor-toolbar-link-dropdown" rel="alignment" role="button" aria-label="Alignment" tabindex="-1" aria-haspopup="true"></a></li><li><a href="#" class="re-icon re-horizontalrule" rel="horizontalrule" role="button" aria-label="Insert Horizontal Rule" tabindex="-1"></a></li></ul><div class="redactor-editor" contenteditable="true" dir="ltr"><p>&#8203;</p></div><textarea class="form-control" id="message-body-field" rows="3" required="" dir="ltr" style="display: none;"></textarea></div>
    <div class="help-block with-errors"></div>
  </div>
  <div class="text-right">
    <button type="submit" class="btn action-btn disabled" disabled="">Submit</button>
  </div>
</form>

Answer 1

解决此问题的一种方法是将 "change" 事件更改为 "keyup" 事件。虽然它仍然没有解释为什么 Redactor 更改事件不起作用。如果有人有任何想法，请告诉我。

Answer 2

$("#message-body-field").redactor({
    changeCallback: function () {
        // some code
    }
});

Answer 3

已在 Redactor 3 中更新 API：

$R('#content', {
    callbacks: {
        changed: function(html)
        {
            // ...
        }
    }
});

Redactor - 对更改事件执行某些操作无效

Redactor - do something on change event not working

jquery

onchange

redactor.js