$('.class').trumbowyg('html') method returning "false" even when content is in the editor

First of all, thanks for Trumbowyg. It’s great. I think I may have found a bug but I don’t want to do a pull request until I understand what’s happening. We have a form with trumbowyg instances and the validation is a standard if (content) { $.post() } else { alert(“No content”); } A user submitted a bug report that they were getting the no content message even when they had content in the editor.

So, I went to the trumbowyg.js code (which is very clean and readable and I thank you for that) and did some debugging. It turned out, the ‘html’ method was never firing because on line 72, it fails this test

if(this.length === 1){

I didn’t have two textareas in my HTML code so I added console.log(this) to debug. Turns out, this had 2 textareas, the orginal textarea and a hidden one created by trumbowyg. If I just removed the 2nd element like this:

if (this.length === 2) {
  this.splice(1,1)
}

everything worked. The working version is here. Normally, I would do a pull request and add that as a bug fix but just splicing the 2nd element off the array doesn’t address why it has a 2nd element in the first place.

[Keybladerhuy]

I can’t reproduce the bug. I think you don’t use a clean selector (by id). For example, if you do something like that : $('textarea').trumbowyg('html'); you can get multiple target. That’s because you need to use an id.

In case of this “solution” doesn’t match your problem, reopen this issue. But at this time I don’t consider it as a bug.

For anyone who is struggling with this, this was my solution in my own case. My mistake was: $('.trumbowyg').trumbowyg('html'); This class is already used in the Trumbowyg plugin, so I inadvertently selected multiple targets, which is why it was returning false.

[CavalcanteLeo]

$('#answerFaq').trumbowyg({
      btns: [
         'btnGrp-semantic',
         ['link'],
         'btnGrp-justify',
         'btnGrp-lists',
      ],
      autogrow:true
});

var faqQuestion = {
         title:  $(el).find('.faq-question').html(),
         answer: $(el).find('.faq-description').html(),
         id:     $(el).data('faq-question-id')
};

$('#answerFaq').trumbowyg('html', faqQuestion.answer);

console.log('shoud be: ' + faqQuestion.answer);
console.log(" $('#answerFaq').trumbowyg('html') ---> " + $('#answerFaq').trumbowyg('html') );

<div class="col-sm-12">
    <div class="form-group">
        <label for="answerFaq">Resposta</label>
        <textarea id="answerFaq" class="form-control"></textarea>

        <div class="help-block with-errors"></div>
    </div>
</div>