CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componenttiptap
connorhansen
connorhansen

Reputation: 191

Vue set data property inside tiptap editor constructor

Having trouble setting the value of editorView inside of the onInit method when creating a new Editor instance. Because the call is nested two methods deep, I'm not sure how to access the Vue instance to properly set the editorView.

data: function() {
    return {
        editor: new Editor({
            onInit: ({ state, view }) => {
                this.editorView = view
            },
        }),
        editorView: null,
    }
},

Upvotes: 1

Views: 943

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

I come to discover this library called tiptap and according to its events you could do that as follows :

data: function() {
    return {
        editor: new Editor(),
        editorView: null,
    }
},
mounted(){
 this.editor.on('init', ({ state, view }) => {
   this.editorView = view
})
}

Or

data: function() {
    return {
        editor: null,
        editorView: null,
    }
},
mounted(){
 let that=this;
 this.editor=new Editor({
            onInit: ({ state, view }) => {
                that.editorView = view
            },
        })
}

Since this refers to the Editor instance not to Vue one

Upvotes: 1

connorhansen
connorhansen

Reputation: 191

Though not ideal, a temporary fix is to pull the initialization inside of mounted and store the Vue instance to a temp var. If anyone has a way to access the Vue instance from the init callback inside the original constructor I would appreciate it. Thanks!

    mounted: function() {
        this.initializeEditor() 
    },
    methods: {
        initializeEditor() {
            var self = this
            this.editor = new Editor({
                onInit: ({ state, view }) => {
                    console.log('Editor Initialized.')
                    console.log('Editor view: ')
                    self.editorView = view
                },
            })
        },
    }

Upvotes: 1

Related Questions