this._$element.froalaEditor is not a function"

[dmitryrn]

I made all from example, but there are 2 errors: (I use laravel as backend and buid app.js with laravel-mix; ProjectRepo) 1:

[Vue warn]: Error in mounted hook: "TypeError: this._$element.froalaEditor is not a function"

found in

---> <Froala>
       <EditPost> at resources/assets/js/components/EditPost.vue
         <Root>

2:

TypeError: this._$element.froalaEditor is not a function
    at VueComponent.createEditor (app.js:sourcemap:51491)
    at VueComponent.boundFn [as createEditor] (app.js:sourcemap:786)
    at VueComponent.mounted (app.js:sourcemap:51434)
    at callHook (app.js:sourcemap:3307)
    at Object.insert (app.js:sourcemap:4194)
    at invokeInsertHook (app.js:sourcemap:6147)
    at Vue$3.patch [as __patch__] (app.js:sourcemap:6350)
    at Vue$3.Vue._update (app.js:sourcemap:3066)
    at Vue$3.updateComponent (app.js:sourcemap:3180)
    at Watcher.get (app.js:sourcemap:3523)

My files: bootstrap.js:

window._ = require('lodash')

try {
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  })

  window.Popper = require('popper.js').default
  require('bootstrap')
} catch (e) { }

window.axios = require('axios')
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

require('froala-editor/js/froala_editor.pkgd.min')

App.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import router from './router'
import store from './store'
import VueFroala from 'vue-froala-wysiwyg'

require('./bootstrap')
require('./main')

Vue.component('index', require('./components/IndexView.vue'))
Vue.component('posts-list', require('./components/PostsList.vue'))
Vue.component('post', require('./components/Post.vue'))
Vue.component('editPost', require('./components/EditPost.vue'))
Vue.component('user', require('./components/UserView.vue'))
Vue.component('single-post', require('./components/SinglePostView.vue'))
Vue.component('login', require('./components/LoginView.vue'))
Vue.component('register', require('./components/RegisterView.vue'))
Vue.component('logout', require('./components/Logout.vue'))
Vue.component('header-comp', require('./components/Header.vue'))

Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(VueFroala)

new Vue({
  router,
  store,
  data () {
    return {
      // ...
    }
  },
  mounted () {
    // ...
  }
}).$mount('#app')

EditPost.vue:

<template>
  <form>
    <div class="form-group">
      <label for="edit">Example textarea</label>
      <froala :tag="'textarea'" :config="config" v-model="model"></froala>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          events: {
            'froalaEditor.initialized': function () {
              console.log('initialized')
            }
          }
        },
        model: 'Edit Your Content Here!'
      }
    },
    mounted() {
      // ...
    }
  }
</script>

[stefanneculai]

@Dimanius851 from the errors you're getting it looks like jQuery is not defined globally: https://github.com/froala/vue-froala-wysiwyg#2-make-sure-you-have-the-right-webpack-settings-for-loading-the-css-files-font-awesome-and-jquery.

[briankoech]

Import froala-editor inside App.js after the vue-froala-wyswsyg i.e.

import VueFroala from 'vue-froala-wysiwyg'
import 'froala-editor/js/froala_editor.pkgd.min'
...

[Mboulianne]

@stefanneculai would it be possible to come into 2018 and realize people don't use jquery as a global variable anymore? This need to be fixed ASAP

Same as https://github.com/froala/wysiwyg-editor/issues/1668

[stefanneculai]

It is on our roadmap to remove jQuery. However, for now, the editor still requires jQuery and it has to be defined globally in order to work correctly.