question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Keybladerhuycommented, Dec 26, 2018

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.

0reactions
CavalcanteLeocommented, Feb 1, 2017
$('#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>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation | Trumbowyg: A lightweight WYSIWYG editor
If you do not want SVG icons, you can set this option to false. Then, you can add your custom icons by CSS...
Read more >
vue component - trumbowyg editor with vuejs
I am using the trumbowyg editor control in my vuejs spa. From the documentation I know that I can use the following code...
Read more >
Trumbowyg
Maximize HTML Editor; Minimize HTML Editor; Fold All; Unfold All. xxxxxxxxxx. 1. 1. <textarea class="js--trumbowyg">Words by deafult</textarea>.
Read more >
Need to change btn options in trumbowyg editor
php, looked in trunbowyg demo site source code … etc…. still can't figure out what to use on the trumbowyg JQuery as a...
Read more >
Documentation of Trumbowyg : a lightweight WYSIWYG editor
If your problem is not solved by these tips, check the SVG icons section. General. Prefix. You can change prefix of all class...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found