如何在php表单中存储tiptap编辑器数据？

Question

我想在php表单中使用TipTap编辑器作为文本区字段。我已经创建了一个Vue组件并将其传递给了刀片视图。

刀片视图：

<form method="post" action="{{ route('dashboard.edit.postInfo', $garage) }}">
     @method('PATCH')
     @csrf

     <div id="app">
        <editor content='{{ $garage->description }}'></editor>
     </div>

     <button type="submit">Save</button>
</form>

我的Vue组件：

<template>
<div class="editor">

    <div class="card p-2 mt-1">
        <editor-content :editor="editor" />
    </div>
    
    </div>
</template>

<script>
import { Editor, EditorContent } from 'tiptap'


export default {
    name: "editor",
    components: {
        EditorContent,
        
    },
    props: [
        'content'
    ],
    data() {
        return {
            
            editor: null,
    
        }
    },
    mounted() {
        this.editor = new Editor({
            content: this.content
        })
    },
    beforeDestroy() {
        // Always destroy your editor instance when it's no longer needed
        this.editor.destroy()
    },
}
</script>

我该怎么做呢？提前谢谢你。

这是console.Log的输出：

Editor {…}
   activeMarks: (...)
   activeNodes: (...)
   commands: (...)
   defaultOptions: (...)
   element: (...)
   options: Object
      autoFocus: (...)
      content: "<p>KFZ Meisterwerkstatt...</p>"

一些用于发布的lorem ipsum文本

Answer 1

尝试此绑定:value="editor"

<div class="card p-2 mt-1">
    <editor-content :editor="editor" />
    <input type="hidden" name="content" :value="editor">
</div>

然后你将会在有数据的laravel中得到content密钥