CODEWITHSUNDEEP
javascripttwitter-bootstrap-3wysihtml5
bigzhu
bigzhu

Reputation: 101

bootstrap3-wysiwyg editor object aways undefined

I use this rich text: https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg

It works fine, but I need get the wysihtml5 editor object for run some commands

The doc said I can get wysihtml5 editor object use this code:

var wysihtml5Editor = $('#some-textarea').data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");

But wysihtml5Editor is aways undefined

log the $('#some-textarea').data("wysihtml5") print this:

Wysihtml5 {el: n.fn.init[1], toolbar: n.fn.init[1], editor:undefined}

How to get the editor object?

Upvotes: 0

Views: 1438

Answers (2)

MNorup
MNorup

Reputation: 135

For anyone else coming across this (and to expand a bit on previous answers), I found it a bit frustrating to navigate the various forks of wysihtml5 editor out there.

It also seems there's a lot of questions floating around that's more or less related to the op'ers issue ("editor returns undefined"-kind of questions).

So for starters, this question seems related to this specific fork:

https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg

As to the issue of getting the wysihtml5 editor object using the "wysihtml5" data selector, the documentation states:

You can access the wysihtml5 editor object like this:

var wysihtml5Editor = $('#some-textarea').data("wysihtml5").editor;
wysihtml5Editor.composer.commands.exec("bold");

In order for that to work, you need to make sure that the file you're referencing (be it bootstrap3-wysihtml5.min.js or bootstrap3-wysihtml5.all.min.js) contains this specific commit:

https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/commit/aee1fee7886b34d01e8f238d64d2e6fd9388608c

As Daemedeor notes: https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/issues/131 - that commit isn't merged to the distribution, only the source.

Anyways, changing this:

this.initializeEditor(this.el[0], options);

to this

return this.initializeEditor(this.el[0], options);

might help you out (certainly did for me).

Upvotes: 0

bigzhu
bigzhu

Reputation: 101

I found the answer by myself, but anyway thanks Daemedeor and DA.!

in bootstrap3-wysihtml5.js the createEditor method not return , so

this.editor =  this.createEditor(toolbarOpts);

this.editor is undefined

I add the return like this

  createEditor: function(options) {
    options = options || {};

    // Add the toolbar to a clone of the options object so multiple instances
    // of the WYISYWG don't break because 'toolbar' is already defined
    options = $.extend(true, {}, options);
    options.toolbar = this.toolbar[0];

    return this.initializeEditor(this.el[0], options);
  }

everything is ok!

Upvotes: 3

Related Questions