如何选择 wysihtml5 编辑器的 iframe？答案

【问题标题】：How can I select the iframe of the wysihtml5 editor?如何选择 wysihtml5 编辑器的 iframe？
【发布时间】：2013-11-25 15:49:32
【问题描述】：

我正在使用带有 bootstrap-wysihtml5 扩展的所见即所得编辑器 wysihtml5。

我正在构建一个字符计数器，并希望在达到最大长度时在编辑器区域放置一个红色边框。

但是我怎样才能在 javscript 中选择 textarea？在源代码中，它不是文本区域，而是 iframe，并且没有唯一 ID 或任何东西。我实际上是在同一个页面上创建多个编辑器，所以我需要区分我选择的是哪一个。

【问题讨论】：

标签： javascript jquery wysiwyg wysihtml5

【解决方案1】：

以下解决方案如何（使用数据）：

$($('.textarea').data("wysihtml5").editor

或者您可以通过事件中的this 引用访问编辑器对象：

$('.textarea').wysihtml5({
  events: {
    load: function() {
      var editor = this;
      $(editor.currentView.doc.body).on("keydown",function(event) {
        var l = event.currentTarget.innerText.length;
        if(l >= 50) {
          $(editor.currentView.iframe).addClass('redborder');
          $(editor.textareaElement).addClass('redborder');
        } else {
          $(editor.currentView.iframe).removeClass('redborder');
          $(editor.textareaElement).removeClass('redborder');
        }
      }); 
    }
  }
});

问题在于 onChange iframe 的内联样式会被覆盖，为此您必须使用一个重要的类：

.redborder {
  border: 1px solid red !important;
}

这个解决方案至少适用于我的 fork：https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/

您必须测试哪个对象属性包含准确的长度值，因为 innerText 不包含任何标记。

【讨论】：

老兄，我快疯了，谢谢你的回答