在Vue3中 使用tiptap富文本编辑器

tiptap 官方地址   https://tiptap.dev/
vue3 安装tiptap  https://tiptap.dev/docs/editor/getting-started/install/vue3

1.tiptap基本功能使用

<script setup>
import { ref, onMounted } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Image from './image'
const editor  = useEditor({
    content: "I'm running Tiptap with Vue.js. 🎉</div>",
    extensions: [StarterKit, Image],
}) 
const getEditor = () => {
    console.log(editor.value.getHTM
### Vue3 Tiptap 使用指南 #### 安装与初始化 为了在 Vue3 项目中使用 Tiptap 编辑器,可以采用 NPM 进行安装。对于希望快速集成的开发者来说,仅需一条命令便能完成安装过程[^3]。 ```bash npm install @tiptap/vue-3 @tiptap/starter-kit ``` 接着,在项目的入口文件 `main.js` 或者相应的模块内引入必要的组件: ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; // 导入 tiptap 及其扩展包 import { Editor, EditorContent } from &#39;@tiptap/vue-3&#39; import StarterKit from &#39;@tiptap/starter-kit&#39; const app = createApp(App) app.component(&#39;editor-content&#39;, EditorContent) app.mount(&#39;#app&#39;) ``` #### 创建编辑器实例 创建一个新的 `.vue` 文件用于定义编辑器组件,并在此处设置初始配置项。这里展示了如何构建一个基本的富文本编辑器实例[^4]。 ```html <template> <div> <!-- 显示编辑区域 --> <editor-content :editor="editor" /> </div> </template> <script> import { ref, onMounted, onUnmounted } from &#39;vue&#39; import { Editor, EditorContent } from &#39;@tiptap/vue-3&#39; import StarterKit from &#39;@tiptap/starter-kit&#39; export default { components: { EditorContent, }, setup() { const editor = ref(null) onMounted(() => { editor.value = new Editor({ extensions: [ StarterKit.configure({ history: false, }), ], content: &#39;<p>Hello World!</p>&#39;, }) }) onUnmounted(() => { editor.value.destroy() }) return { editor } }, } </script> ``` 此段代码实现了基于 Vue3 的简单版 Tiptap 编辑器,其中包含了默认工具栏选项和一些基础样式调整[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值