强悍！基于Vue的无渲染的富文本编辑器——tiptap！

Hotice888

于 2020-04-09 13:29:24 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： UI

本文链接：https://blog.csdn.net/Hotice888/article/details/105408661

tiptap是一个基于Prosemirror的富文本编辑器，允许完全扩展并采用无渲染设计。它提供易于扩展的特性，避免了对旧依赖的使用，如jQuery。无渲染意味着用户可以完全控制标记和样式。编辑器支持多种功能，如菜单自定义、协同编辑、代码高亮等，适合需要高度定制的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

tiptap编辑器基于Prosemirror，完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。

强悍！基于Vue的无渲染的富文本编辑器——tiptap！

Github

https://github.com/scrumpy/tiptap

为什么使用tiptap？

市面上有不少富文本编辑器，但大多数可能并不能满足你的需求。编辑器应该易于扩展，并且不应基于旧的依赖项（例如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: {
    EditorCont