javascript - 如何将 Tiptap-vuetify HTML 源代码从一个组件传递到另一个组件？

Question

我在我的Nuxt 项目中使用Tipap文本编辑器。我可以将初始内容 (in ) 传递给另一个组件 (in )，但是当数据更新时，正在传递的初始内容不会更新。它不断获得相同的数据。components/blogs/Editor.vuepages/blogs/editor.vue

这是我的代码：

在components/blogs/Editor.vue

<script>
// import the component and the necessary extensions
import {
  TiptapVuetify,
  Heading,
  Bold,
  Italic,
  Strike,
  Underline,
  Code,
  Paragraph,
  BulletList,
  OrderedList,
  ListItem,
  Link,
  Blockquote,
  HardBreak,
  HorizontalRule,
  History
} from "tiptap-vuetify";
export default {
  // specify TiptapVuetify component in "components"
  components: { TiptapVuetify },
  data() {
    return {
      localHTML: "",
      localJSON: "",
      post_content:'',
      // declare extensions you want to use
      extensions: [
        History,
        Blockquote,
        Link,
        Underline,
        Strike,
        Italic,
        ListItem,
        BulletList,
        OrderedList,
        [
          Heading,
          {
            options: {
              levels: [1, 2, 3]
            }
          }
        ],
        Bold,
        Link,
        Code,
        HorizontalRule,
        Paragraph,
        HardBreak
      ],
      // starting editor's content
      content: `
      <h1>Yay Headlines!</h1>
      <p>All these fwer <strong>cool tags</strong> are working now.</p>
    `
    };
  },
  mounted() {
    this.$emit("content", this.content);
  }
};
</script>

<template>
  <div>
    <ClientOnly>
      <!-- Use the component in the right place of the template -->
      <tiptap-vuetify
        v-model="content"
        :extensions="extensions"
        :toolbar-attributes="{ color: 'black', dark: true }"
      />
      <div class="export">
        <h3>HTML</h3>
        <pre><code>{{ content }}</code></pre>
        <h2>post</h2>
        <!-- <p>{{post_content}}</p> -->
        <!-- <p>{{localHTML}}</p> -->
        <v-divider />
      </div>
      <template #placeholder>
        Loading...
      </template>
    </ClientOnly>
  </div>
</template>

在pages/blogs/editor.vue

<script>
import Editor from "../../components/blogs/Editor.vue";
import axios from "axios";
export default {
  data() {
    return {
      post_title: "",
      short_description: "",
      content_image_url: "",
      content: "",
      post_content: ""
    };
  },
  methods: {
    getContent(e) {
      this.content = e;
      this.post_content=content;
    },
    submitForm() {
      let data = {
        post_title: this.post_title,
        short_description: this.short_description,
        content_image_url: this.content_image_url,
        post_content:this.content
      };
      axios
        .post("http://localhost:8000/api/posts/add", data, {
          headers: {
            Accept: "application/json"
          }
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => console.log(err));
    }
  },
  components: {
    Editor
  }
};
</script>

<template>
  <v-app>
    <v-container>
      <section>
        <h1 class="display-1">
          Tiptap Vuetify
        </h1>
        <Editor v-on:content="getContent($event)" />
        <h2>getContent</h2>
        <p>{{ content }}</p>
        <v-layout justify-center>
          <v-btn to="/blogs" outlined color="info">Back</v-btn>
          <v-divider />
          <v-btn color="info" form="post-form" type="submit">Publish</v-btn>
        </v-layout>
      </section>
    </v-container>
  </v-app>
</template>

Answer 1

我找到了解决方案。只需参考 Tiptap-vuetify 文档，有一个事件来处理按键使用keydown

当编辑器收到 keydown 事件时调用。

<tiptap-vuetify
  @keydown="onKeyDown"
/>
methods: {
  onkeydown (event, view) {
    console.log('event', event.key)
  }
}