如何以php形式存储Tiptap编辑器数据？

问题描述

我想以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>

我该怎么做？预先谢谢你。

这是控制台。日志输出：

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

一些lorem ipsum文本要发布

解决方法

尝试使用此绑定:value="editor"

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

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