Vue3 单页组件里如何触发 action？ #726

Congb19 · 2022-09-16T07:19:11Z

Congb19
Sep 16, 2022

Vue3 单页组件里如何触发 action？总是提示editor.action is not a function🤔

https://codesandbox.io/embed/objective-mclaren-95c0iy?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMilkdown.vue&theme=dark

<template>
  <VueEditor :editor="editor" />
  <button @click="save">save</button>
</template>

<script>
import { defineComponent } from "vue";
import {
  Editor,
  rootCtx,
  defaultValueCtx,
  editorViewCtx,
  serializerCtx,
} from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { VueEditor, useEditor } from "@milkdown/vue";
import { commonmark } from "@milkdown/preset-commonmark";
import { emoji } from "@milkdown/plugin-emoji";

export default defineComponent({
  name: "Milkdown",
  components: {
    VueEditor,
  },
  setup: () => {
    const editor = useEditor((root) =>
      Editor.make()
        .config((ctx) => {
          ctx.set(rootCtx, root);
          ctx.set(defaultValueCtx, "# Milkdown 💖 Vue");
        })
        .use(nord)
        .use(emoji)
        .use(commonmark)
    );
    const getMarkdown = () =>
      editor.action((ctx) => {
        const editorView = ctx.get(editorViewCtx);
        const serializer = ctx.get(serializerCtx);
        return serializer(editorView.state.doc);
      });
    const save = () => {
      let str = getMarkdown();
      console.log(str);
    };
    return {
      save,
      editor,
    };
  },
});
</script>
<style>
</style>