Vue 3 和 TipTap Editor 在全局范围内传递

Question

我在 VueJS 3 中工作，刚刚添加了 TipTap 编辑器。我只想在用户单击内容并触发焦点事件时显示编辑器菜单。然后在模糊菜单需要被隐藏。所以我在菜单组件中添加了一个 ref="myMenu" 并使用 opFocus nad onBlur 事件处理程序初始化编辑器。

问题，“this”引用了编辑器的范围，而不是知道 $refs 的“this”。问题，如何传入全局属性？

我的模板

        <div v-if="editor">
            <menu-bar class="editor__header" :editor="editor" ref="editMenu" />
            <editor-content :editor="editor" />
        </div>

我的vue代码

    mounted(){
    // this.store.methods.TextAreaAdjust(this.$refs.itemParagraph);
       
    this.editor = new Editor( {
        extensions: [ 
          StarterKit.configure({
           history:true,
          }),
          Highlight,
       ],
        content: this.modelValue.itemData.paragraph,
        onUpdate: () => {
          this.modelValue.itemData.paragraph=this.editor.getHTML()
        },

        onFocus(){
            console.log('focus fired')
            console.log(this) // editor scope
            this.$refs.editMenu.style.display="flex" // $refs undefined error
        },
        onBlur(){
            console.log('blur fired')
            this.$refs.editMenu.style.display="none"
        }

    })
},

Answer 1

尝试用箭头函数定义 on 函数：

onUpdate: () => {}
ononFocus: () => {}
onBlur: () => {}

这应该保持 this 范围。

否则，在创建编辑器实例之前，您可能需要将 this 存储在单独的常量中，然后在处理程序中使用 thisComponent：

const thisComponent = this;

Vue 3 和 TipTap Editor 在全局范围内传递

Vue 3 and TipTap Editor pass in global scope

javascript

vuejs3

tiptap