我正在使用带有bootstrap-wysihtml5扩展名的wysiwyg编辑器wysihtml5。
我正在构建一个字符计数器,并希望在达到最大长度时在编辑器区域上放置一个红色边框。
但是我怎样才能在javscript中选择textarea?在源代码中,它不是textarea,它是iframe,它没有唯一的ID或任何东西。我实际上是在同一页面上创建了几个编辑器,所以我需要区分我选择哪一个。
答案 0 :(得分:2)
以下解决方案(使用数据)如何:
$($('.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;
}
此解决方案至少适用于我的分支:https://github.com/Waxolunist/bootstrap3-wysihtml5-bower/
您必须测试哪个对象属性包含准确的长度值,因为innerText不包含任何标记。