I've implemented the Tipap text editor in my Nuxt project.
I'm facing an issue where when I update the data in another component (in pages/blogs/editor.vue) that was initially passed from a different component (in components/blogs/Editor.vue), the initial content does not get updated and keeps showing the same data.
Below is the code snippet:
in components/blogs/Editor.vue
<script>
// import the component and required 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>in 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>