Why the config advanced not load some plugin properly?

before i got this bug, there is no problem with config advanced that i set for my web. I got the giphy, emoticon, colors, and font family. like on this image:

2019-10-10

but since i wanna set the plugin highlight. Giphy, emticon and so on the plugin that i set not appears anymore like this:

2019-10-10 (2) there is no errors but the plugin didnt appears.

heres my code:

AddPost.vue

<template>
  <div>
    <trumbowyg v-model="content" :config="config.advanced" class="form-control" name="content"></trumbowyg>
  </div>
</template>

<script>
// plugin
import "trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.css";
import "trumbowyg/dist/plugins/colors/trumbowyg.colors.min.js";

import "trumbowyg/dist/plugins/emoji/ui/trumbowyg.emoji.css";
import "trumbowyg/dist/plugins/emoji/trumbowyg.emoji.min.js";

import "trumbowyg/dist/plugins/fontfamily/trumbowyg.fontfamily.min.js";

import "trumbowyg/dist/plugins/giphy/ui/trumbowyg.giphy.css";
import "trumbowyg/dist/plugins/giphy/trumbowyg.giphy.min.js";

export default {
  data() {
    return {
      content: null,
      config: {
        advanced: {
          autogrow: true,
          changeActiveDropdownIcon: true,
          removeformatPasted: true,
          imageWidthModalEdit: true,
          urlProtocol: true,
          btnsDef: {
            align: {
              dropdown: [
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull"
              ],
              ico: "justifyLeft"
            }
          },
          btnsAdd: ["foreColor", "backColor"],
          btns: [
            ["viewHTML"],
            ["undo", "redo"],
            ["formatting"],
            ["fontfamily"],
            ["strong", "em", "del"],
            ["superscript", "subscript"],
            ["link"],
            ["insertImage"],
            ["align"],
            ["foreColor", "backColor"],
            ["unorderedList", "orderedList"],
            ["horizontalRule"],
            ["removeformat"],
            ["emoji"],
            ["giphy"],
            ["fullscreen"]
          ],
          plugins: {
            giphy: {
              apiKey: "FKtEG2nROoOCxIruF7KYPNhwCW31kcbn"
            }
          }
        }
      }
    };
  }
};
</script>

<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'

import router from './routes'
import store from './Store/store'

import BootstrapVue from "bootstrap-vue"
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import vuelidate from 'vuelidate'

import feather from 'vue-icon'

import Buttons from './components/UI/Buttons.vue'

import VueTrumbowyg from 'vue-trumbowyg'
import 'trumbowyg/dist/ui/trumbowyg.css'

// Material Design
Vue.use(feather, 'v-icon')
Vue.use(BootstrapVue)
Vue.component('app-button', Buttons)

// MISC
Vue.use(vuelidate)
Vue.use(VueTrumbowyg)

// Resource
Vue.use(VueResource)
Vue.http.options.root = ''

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

vue.config.js

var webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jquery: 'jquery',
                'window.jQuery': 'jquery',
                jQuery: 'jquery'
            })
        ]
    }
}

ankurk91 / vue-trumbowyg

Why the config advanced not load some plugin properly? #29