search

froala / angular-froala

Angular.js bindings for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
MIT License
306 stars 123 forks source link

element.froalaEditor is not a function #134

Closed bernardocs closed 7 years ago

bernardocs commented 7 years ago

Hey guys... 😄

I've searched in every corner for a solution for the element.froalaEditor is not a function problem... found a bunch of similar situations but most of then did not included webpack.

For context, we're using Angular + Webpack 2 with Babel. We used npm to install the package. Should we, I don't know, somehow include the froala-editor package before everything or something? Because that's the general solution that everyone gives when it comes to this error.

I'm getting this error while trying to use the directive and still didn't figured it out how to solve this without having to add a bunch of script tags, importing everything (that's why webpack is in the project). 😖

Any ideas, guys?! 🤔

stefanneculai commented 7 years ago

@bernardocs most likely you are not including the editor JS files.

kavare commented 6 years ago

@bernardocs This should be solved with the up-to-date version (v2.7.5) with the PR I've made. The caveat is this new line: if (jQuery) element = jQuery(element); (https://github.com/froala/angular-froala/blob/master/src/angular-froala.js#L33)

Before, angular-froala was assuming the user of the library will always have jQuery globally and it will auto-wrap the angular element in link function when jQuery was there. This might not be true when you have a non-trivial webpack config.

By explicitly wrap it with jQuery, we make sure this .froalaEditor object is accessible when it is needed.