I implemented wysiwyg editor with a library named tiptap.
Although I am almost a beginner in Nuxt.js, it was really easy to create the component.
FYI, the sample code uses buefy though I skip about installing and the detail of it.
Add tiptap to a project
The official website shows how to add it.
In my case, using yarn.
$ yarn add @tiptap/vue-2 @tiptap/starter-kit Implement a wysiwyg component
Create Tiptap.vue and write the following code as a component.
<template> <div class="editor"> <div v-if="editor" class="menu"> <b-tooltip label="bold" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('bold') }" icon-left="format-bold" type="is-text" size="small" @click="editor.chain().focus().toggleBold().run()" /> </b-tooltip> <b-tooltip label="italic" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('italic') }" icon-left="format-italic" type="is-text" size="small" @click="editor.chain().focus().toggleItalic().run()" /> </b-tooltip> <b-tooltip label="strike" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('strike') }" icon-left="format-strikethrough" type="is-text" size="small" @click="editor.chain().focus().toggleStrike().run()" /> </b-tooltip> <b-tooltip label="code" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('code') }" icon-left="code-tags" type="is-text" size="small" @click="editor.chain().focus().toggleCode().run()" /> </b-tooltip> <b-tooltip label="paragraph" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('paragraph') }" icon-left="format-paragraph" type="is-text" size="small" @click="editor.chain().focus().setParagraph().run()" /> </b-tooltip> <b-tooltip label="header1" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" icon-left="format-header-1" type="is-text" size="small" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" /> </b-tooltip> <b-tooltip label="header2" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" icon-left="format-header-2" type="is-text" size="small" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" /> </b-tooltip> <b-tooltip label="header3" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }" icon-left="format-header-3" type="is-text" size="small" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" /> </b-tooltip> <b-tooltip label="bulleted list" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('bulletList') }" icon-left="format-list-bulleted" type="is-text" size="small" @click="editor.chain().focus().toggleBulletList().run()" /> </b-tooltip> <b-tooltip label="ordered list" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('orderedList') }" icon-left="format-list-numbered" type="is-text" size="small" @click="editor.chain().focus().toggleOrderedList().run()" /> </b-tooltip> <b-tooltip label="undo" type="is-dark"> <b-button icon-left="undo" type="is-text" size="small" @click="editor.chain().focus().undo().run()" /> </b-tooltip> <b-tooltip label="redo" type="is-dark"> <b-button icon-left="redo" type="is-text" size="small" @click="editor.chain().focus().redo().run()" /> </b-tooltip> </div> <div class="input-field"> <editor-content :editor="editor" /> </div> </div> </template> <script> import { Editor, EditorContent } from '@tiptap/vue-2'; import StarterKit from '@tiptap/starter-kit'; export default { components: { EditorContent, }, props: { value: { type: String, default: '', }, }, data() { return { editor: null, }; }, watch: { value(value) { // HTML const isSame = this.editor.getHTML() === value; // JSON // const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value) if (isSame) { return; } this.editor.commands.setContent(value, false); }, }, mounted() { this.editor = new Editor({ content: this.value, extensions: [StarterKit], onUpdate: () => { // HTML this.$emit('input', this.editor.getHTML()); // JSON // this.$emit('input', this.editor.getJSON()) }, }); }, beforeDestroy() { this.editor.destroy(); }, }; </script> <style lang="scss" scoped> .editor { border: 1px solid lightgray; border-radius: 5px; margin-top: 10px; margin-bottom: 10px; } .menu { border-bottom: 1px solid lightgray; padding: 10px; } .input-field { padding: 10px; } </style> The block below represents one of the menu button.
I use Material icons so you can find the icons like format-bold on the website.
<b-tooltip label="bold" type="is-dark"> <b-button :class="{ 'is-active': editor.isActive('bold') }" icon-left="format-bold" type="is-text" size="small" @click="editor.chain().focus().toggleBold().run()" /> </b-tooltip> When you call the component on any other component, you should pass a value like this.
<tiptap value="something"> something must belong to like data().
And when you modify the text on the wysiwyg editor, something property is going to be changed.
Top comments (0)