bootstrap-wysiwyg 获取实例未定义

Question

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!

Answer 1

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.

Answer 2

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/