How to get access to the editor instance using Vue

[rolfo85]

Hi,

When using the regular Froala plugin, I can get its instance in this way:

$('#froala-editor').froalaEditor('html.get');

But how can I get it when using vue Froala? I know I could type something like

$('textarea').froalaEditor('html.get');

But maybe there is a better way

[AdrienPoupa]

For v2, just combine the readme and https://wysiwyg-editor.froala.help/hc/en-us/articles/360000363629-How-can-I-get-the-editor-instance-

Add an initialized event where you store the editor instance in an attribute:

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

<script>
import VueFroala from 'vue-froala-wysiwyg';

export default {
  name: 'app',
  data () {
    return {
      editor: null,
      config: {
        events: {
          'froalaEditor.initialized': function (e, editorInstance) {
            editor = editorInstance;
            console.log('initialized')
          }
        }
      },
      model: 'Edit Your Content Here!'
    }
  }
}
</script>

You can access the editor with this.editor

[rolfo85]

Thanks,

So if I wanted to have a button that triggers a method, how could I call the editor inside a vue method?

something like:

<div v-on:click="saveContent"></div>

...

saveContent() {

    here I want to use the Froala method `html.get` but I'm not inside the `config` object

}

So How can I call Froala inside the saveContent() Vue method?

[nckg]

This is the way I did it, If any of you still wonder how to get access to the editor instance (using version 3.1.1)

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

<script>
import VueFroala from 'vue-froala-wysiwyg';

export default {
  name: 'app',

  data () {
    // You can use self as a reference to the component (this).
    const self = this;

    return {
      // The editor instance
      editorInstance: null,
      config: {
        events: {
          initialized: function() {
            // Set the instance, so we can use it as this.editorInstance later
            self.editorInstance = this;
          },
        },
      },
      model: 'Edit Your Content Here!'
    }
  }
}
</script>

[t0milee]

I've used a much simple approach using ref

<froala :tag="'textarea'" ref="editor" :config="textEditorConfig" v-model="text" />

and just did this in .js

let editor = this.$refs.editor.getEditor();
editor.doWhatever();

[omarsumadi]

@t0milee this should be the answer