javascript - 如何以 php 形式存储tiptap 编辑器数据？

Question

我想在 php 表单中使用 TipTap 编辑器作为 textarea 字段。我创建了一个 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>

然后你将content在 laravel 中获得带有数据的密钥