Vue.js 2 的富文本编辑器 tiptap 集成指南
引言
本指南将指导您如何在基于 Vue CLI 的项目中整合 Tiptap。
需要条件
1. 创建项目(可选)
如果您已经有一个现有项目,那么跳过此步骤,直接进入下一步。为了演示,我们将从名为 my-tiptap-project
的新 Vue 项目开始。Vue CLI 会为我们设置好基础环境,选择默认的 Vue 2 模板即可。
# 创建项目
vue create my-tiptap-project
# 更改目录
cd my-tiptap-project
2. 安装依赖
好了,现在我们来安装所需的库。首先需要 @tiptap/vue-2
包,以及 @tiptap/pm
(ProseMirror 库)和 @tiptap/starter-kit
,它包含了快速入门时常用的扩展。
npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit
如果你按照步骤 1 和 2 完成,现在可以通过 npm run dev
启动项目,并在浏览器中访问 http://localhost:8080。如果使用的是现有项目,地址可能会有所不同。
3. 创建新组件
要使用 Tiptap,我们需要在应用中添加一个新的组件。让我们将其命名为 Tiptap
,并将以下示例代码放入 components/Tiptap.vue
文件中。
这是在 Vue 中快速启动 Tiptap 的最快方法,它会提供一个基础版本的编辑器,没有按钮。别担心,很快就能添加更多功能。
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from "@tiptap/vue-2";
import StarterKit from "@tiptap/starter-kit";
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
};
},
mounted() {
this.editor = new Editor({
content: "<p>我正在使用 Vue.js 运行 Tiptap。🎉</p>",
extensions: [StarterKit],
});
},
beforeDestroy() {
this.editor.destroy();
},
};
</script>
4. 将组件添加到应用
现在,让我们将 src/App.vue
的内容替换为以下示例,以便在应用中使用我们的 Tiptap
组件。
<template>
<div id="app">
<tiptap />
</div>
</template>
<script>
import Tiptap from "./components/Tiptap.vue";
export default {
name: "App",
components: {
Tiptap,
},
};
</script>
现在你应该能在浏览器中看到 Tiptap 了!给自己点个赞吧!🎉
5. 使用 v-model(可选)
您可能习惯于在表单中使用 v-model
绑定数据,与 Tiptap 也一样。这是一个可以集成到项目的示例组件:
<template>
<editor-content :editor="editor" />
</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>
这将允许您通过 v-model
监听和更新编辑器的内容。