如何从 Vue 3 中的脚本标签执行 TipTap 命令？

Question

我有以下组件：

<button @click="$refs.image.click(); editor.chain().focus().setImage({ src: state.image }).run()"></button>

<input type="file" ref="image" style="display: none" @change="getImageUrl">

该button使用file input来访问其上传图像 ui。 问题是getImageUrl是一个async函数，并且：

editor.chain().focus().setImage({ src: state.image }).run()

在设置state.image之前执行，导致未定义的img src 。

我的方法是：

editor.chain().focus().setImage({ src: state.image }).run()

在它自己的async function中，但是如何从vue 3's script tag中调用链命令？ 文档似乎没有解释如何从vue directives之外调用它。

getImageUrl ：

const getImageUrl = (event) => {
    const files = event.target.files;
    if (!files.length)
        return;
    const reader = new FileReader();
    reader.onload = (event) => {
        state.image = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

Answer 1

这就是它的工作原理。 在 DOM 元素中执行以下操作：

<button @click="customCommand(editor)">push me</button>

并在script setup中：

const customCommand = (editor) => {
    editor.commands.toggleBold()
}