强悍！基于Vue的⽆渲染的富⽂本编辑器——tiptap！
介绍
tiptap编辑器基于Prosemirror，完全可扩展且⽆渲染。可以轻松地将⾃定义节点添加为Vue组件。
Github
为什么使⽤tiptap？
市⾯上有不少富⽂本编辑器，但⼤多数可能并不能满⾜你的需求。编辑器应该易于扩展，并且不应基于asp富文本编辑器
旧的依赖项（例如jQuery）。对于React，已经有⼀个名为Slate.js的出⾊编辑器，其模块化给⼈留下深刻的印象。tiptap是基于Prosemirror进⾏扩展开发的没有很多公司在Prosemirror（富⽂本⼯具包）基础上进⾏开发。
⽆渲染要如何理解？
使⽤⽆渲染组件（函数式组件），你将（⼏乎）完全控制标记和样式。菜单的外观或在DOM中的显⽰位置。这完全取决于使⽤者。
安装和使⽤
安装
npm install tiptap
#或者
yarn add tiptap
使⽤
<template>
<editor-content :editor="editor" />
</template>
<script>
// Import the editor
import { Editor, EditorContent } from 'tiptap'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: '<p>This is just a boring paragraph</p>',    })
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
Demo截图
下⾯是来⾃官⽅⽹站的⼀组Demo截图：
基本使⽤
菜单⽓泡
浮动菜单
添加链接
图⽚
可隐藏菜单栏点击可隐藏菜单栏
待办事项清单
表格table
搜索和替换
输⼊建议
快捷⽀持Markdown

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。