CODEWITHSUNDEEP
jquerybootstrap-wysihtml5bootstrap-wysiwyg
HaleyBuggs
HaleyBuggs

Reputation: 915

bootstrap-wysiwyg get instance is undefined

I'm following their guide in Github on how to grab the wysihtml5 instance based on the textarea ID or class you put it on. This JSFiddle shows the error I'm running into:

http://jsfiddle.net/ez3ajvaf/2/

This is my HTML:

<span class="footer-btn quote" rel=".text-editor" data-text="body-1"><span class="icon"><i class="fa fa-quote-left"></i></span> Quote</span>

<textarea name="body" class="text-editor text-countdown" placeholder="Please allow up to 2,000 characters" maxlength="2000" data-rel="countdown" id="body" required></textarea>

<div class="countdown-wrapper">
    <span id="countdown" class="countdown"></span>
</div>

This is my Javascript:

$('.text-editor').wysihtml5({
    toolbar: {
        "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
        "emphasis": true, //Italics, bold, etc. Default true
        "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
        "html": false, //Button which allows you to edit the generated HTML. Default false
        "link": true, //Button to insert a link. Default true
        "image": true, //Button to insert an image. Default true,
        "color": false, //Button to change color of font  
        "blockquote": true, //Blockquote
    }
});

 $('.quote').on('click', function() {

     console.log('clicked');

     var textarea = $(this).attr('rel');

     console.log($(textarea).data("wysihtml5").editor);

     $(textarea).data("wysihtml5").editor.html('hello');

 });

The error I'm receiving is

Uncaught TypeError: Cannot read property 'html' of undefined

Under their github https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg if you scroll down to "You can access the wysihtml5 editor object like this:", it shows this exact code based on their textarea ID they initiated wysihtml5 on. My text editor loads fine and it works great, but I can't seem to grab the instance. data-wysihtml5 doesn't appear to be added on as an attribute when I initiate the code to begin with.

I'm trying to get when you click "Quote" it will quote the post (which I can add in later to grab that context) into the text editor. Thank you for any help or guidance!

Upvotes: 0

Views: 1646

Answers (2)

estani
estani

Reputation: 26527

The fiddle is not working anymore, probably some dependencies issues. The problem might have been in how the contents of textarea, or missing dependencies, who knows.

In any case this works:

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

see: http://jsfiddle.net/estani/pfm2bx6j/1/

Upvotes: 0

Kolman Robert
Kolman Robert

Reputation: 344

I had the same problem with update wysihtml5 editor and resolved it with this:

$('.wysihtml5-sandbox').contents().find('body').html('<b>New text</a>');

I know, it's not best solution, but only this works for me. If you have better solution, please let me know.

Upvotes: 0

Related Questions