Angular froala integration

[yunus89]

Hi @jadjoubran ,

i tried to integrate WYSIWYG (Froala) from this repo -- https://github.com/froala/angular-froala in this starter but with no success. Is there anything out of the ordinary i need to do? It will be nice if you lay down some kind of how to...

[jadjoubran]

Hi @yunus89 You need to install it using bower with the --save argument as mentioned here and then add froala in index.modules.js

If this still doesn't work, let me know what error you're getting and I'll try to help

[jadjoubran]

@yunus89 any updates?

[yunus89]

Yeah, it didn't work. Got following error

TypeError: element.froalaEditor is not a function
at Object.ctrl.createEditor (http://localhost:8000/js/vendor.js:92019:50)
at Object.ctrl.init (http://localhost:8000/js/vendor.js:91986:26)
at link (http://localhost:8000/js/vendor.js:92079:18)
at http://localhost:8000/js/vendor.js:9519:44
at invokeLinkFn (http://localhost:8000/js/vendor.js:9525:9)
at nodeLinkFn (http://localhost:8000/js/vendor.js:8932:11)
at compositeLinkFn (http://localhost:8000/js/vendor.js:8260:13)
at nodeLinkFn (http://localhost:8000/js/vendor.js:8927:24)
at http://localhost:8000/js/vendor.js:9264:13
at processQueue (http://localhost:8000/js/vendor.js:15627:28) <textarea froala="" ng-      model="myHtml" class="ng-pristine ng-untouched ng-valid ng-isolate-scope" id="froala-0">(anonymous function) @ vendor.js:13294
    https://ghbtns.com/github-btn.html?user=jadjoubran&repo=laravel5-angular-material-starter&type=star&count=true&size=large Failed to load resource: net::ERR_NAME_NOT_RESOLVED

[jadjoubran]

Go to view page source, then vendor.js and check if you see any occurrences for froala

[yunus89]

Yes.

/*!
 * froala_editor v2.2.1 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2016 Froala Labs
 */

[jadjoubran]

Have you added the froala module to your index.module.js? And did you run gulp? (or you can just have `gulp watch running from the beginning)

[yunus89]

    angular.module('app.components', [
    'ui.router', 'ngMaterial', 'ngStorage',
    'restangular', 'angular-loading-bar', 'froala'
   ]);

Just gulp && gulp watch again, no changes

[jadjoubran]

The issue should be posted on froala/angular-froala

I can try one more thing though Show me your controller and view code

[yunus89]

Just create component normal way. In the component .html added <textarea froala ng-model="myHtml"></textarea>

Next call component in a page.

[jadjoubran]

@yunus89 I'd suggest you try setting up froala in a fresh Angular installation (not this starter package) and see if it works and then do the same using this repo

[tot-ra]

had similar issue, fixed by adding froala-wysiwyg-editor/js/ to grunt too

[jadjoubran]

Thanks for contributing @tot-ra! 😄