I'm looking to integrate the TipTap editor into a PHP form as a textarea field. I've set up a Vue component and passed it to the blade view.
Blade view:
<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 Component:
<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>
Any ideas on how to accomplish this? Thank you in advance.
Here is the console.log output:
Editor {…}
activeMarks: (...)
activeNodes: (...)
commands: (...)
defaultOptions: (...)
element: (...)
options: Object
autoFocus: (...)
content: "<p>Lorem ipsum dolor sit amet...</p>"
Some random text for demonstration purposes