How to include plugins?

[gmoneh]

Hi, I'm trying to use the Vue plugin add-on for the Froala editor, but I can't figure out how to include Froala plugins into the instance. If I import the plugin files like so within my Vue component that is using the Froala editor: import "froala-editor/js/plugins/align.min.js"; import "froala-editor/js/plugins/char_counter.min.js"; import "froala-editor/js/plugins/font_family.min.js"; import "froala-editor/js/plugins/font_size.min.js" import "froala-editor/js/plugins/paragraph_style.min.js"; import "froala-editor/js/plugins/paragraph_format.min.js"; import "froala-editor/js/plugins/image.min.js"; The plugins don't show in the editor instance created. If I enter the same import statements in the vue-froala.js file within the vue-froala-wysiwyg package, right after the import FroalaEditor statement, then things do work. But that doesn't seem like a good solution, because it requires me to edit the package source code, which should be untouched. Am I missing something obvious? How can I enable the plugins with the Vue wrapper?

[kashirin-dm]

Hey. Take a look at this section: https://www.froala.com/wysiwyg-editor/examples/toolbar-buttons-2

How I did: in main.js

import 'froala-editor/css/froala_editor.pkgd.min.css' // all styles (also for buttons)
import 'froala-editor/js/plugins.pkgd.min' // all plugins (you can add plugins by one too)
require('froala-editor/js/languages/ru') // lang file for localization
import VueFroala from 'vue-froala-wysiwyg' // editor
Vue.use(VueFroala)

In .vue component:

<template>
    <froala id="edit" :tag="'textarea'" :config="config" v-model="model" />
</template>

data: () => ({
    config: {
      language: 'ru', // localization
      placeholderText: 'Hello world!',
      toolbarButtons: {
        // name for block of buttons 
        moreText: {
          // buttons you need on this block
          buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting'],
          align: 'left',
          buttonsVisible: 3
        },
        moreParagraph: {
          buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatUL', 'paragraphFormat', 'lineHeight', 'outdent', 'indent', 'quote'],
          align: 'left',
          buttonsVisible: 3
        },
        moreRich: {
          buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons'],
          align: 'left',
          buttonsVisible: 5
        }
      }
    }
})

[kellykels21]

So i'm having an issue adding the CodeMirror plugin to my Vue app. Here is my current setup (CodeView is already enabled but not mounting CodeMirror for styling):

Component.vue

import 'codemirror/lib/codemirror.css'
import CodeMirror from 'codemirror/lib/codemirror.js'
import 'codemirror/mode/xml/xml'

data() {
		return {
			selectedColorTheme: 'gravity',
			codeMirror: CodeMirror
}

<froala id="edit" :tag="'textarea'" :config="config" v-model="value" :codeMirror="codeMirror"></froala>

main.js

// Import and use Vue Froala lib.
import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)

Am i mounting codemirror the correct way? I saw a similar post in the React SDK (https://github.com/froala/react-froala-wysiwyg/issues/117), but wondering if there is a Vue equivalent?

[kellykels21]

Fixed this by including codeMirror in the config:

data() {
		return {
			selectedColorTheme: 'gravity',
			config: {
                               codeMirror: CodeMirror
                          }
}