介绍
tiptap编辑器基于Prosemirror,完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。
![7df71da61e046ff3d36bc6c570b0efb0.png](https://i-blog.csdnimg.cn/blog_migrate/b5c6d3d34f24f2afce0834532456735d.jpeg)
Github
https://github.com/scrumpy/tiptap
为什么使用tiptap?
市面上有不少富文本编辑器,但大多数可能并不能满足你的需求。编辑器应该易于扩展,并且不应基于旧的依赖项(例如jQuery)。对于React,已经有一个名为Slate.js的出色编辑器,其模块化给人留下深刻的印象。tiptap是基于Prosemirror进行扩展开发的没有很多公司在Prosemirror(富文本工具包)基础上进行开发。
无渲染要如何理解?
使用无渲染组件(函数式组件),你将(几乎)完全控制标记和样式。菜单的外观或在DOM中的显示位置。这完全取决于使用者。
安装和使用
- 安装
npm install tiptap#或者yarn add tiptap
- 使用
Demo截图
下面是来自官方网站的一组Demo截图:
- 基本使用
![713d72c421b6ce44696d780f5fe3dba5.png](https://i-blog.csdnimg.cn/blog_migrate/ef57c5856b415a5fedc90610aa65e800.jpeg)
- 菜单气泡
![527e4d16a66ee86f23c03f2033393af8.png](https://i-blog.csdnimg.cn/blog_migrate/88b8227f90e247b891697840c18d65c5.jpeg)
- 浮动菜单
![eee5f7d5327d3cac3a8c498b6af9941f.png](https://i-blog.csdnimg.cn/blog_migrate/2d83f70a4912d795669f4f0fb665b32e.jpeg)
- 添加链接
![b776dc87e41ed15680677bccf72b316f.png](https://i-blog.csdnimg.cn/blog_migrate/08a137c69406902c9775be1c1a6c93f9.jpeg)
- 图片
![00c21955ed38ec0932e12e3379acfd30.png](https://i-blog.csdnimg.cn/blog_migrate/e7e6546da141be82dfc8f8b44f4c5afc.jpeg)
- 可隐藏菜单栏
点击可隐藏菜单栏
![60f61b210926f7f224deb69fdc630fd8.png](https://i-blog.csdnimg.cn/blog_migrate/6d5dc2197191a194da5868f61db036c2.jpeg)
- 待办事项清单
![67c2aec3577a680ab91ea8956623438e.png](https://i-blog.csdnimg.cn/blog_migrate/340179deb3abae385a8129ba2b65e488.jpeg)
- 表格table
![279c057aa767ca5e747c441102a25d0a.png](https://i-blog.csdnimg.cn/blog_migrate/726aa427b9fc7269a491dccf726d7b92.jpeg)
- 搜索和替换
![7f79855e47277497e149ea79c65700b1.png](https://i-blog.csdnimg.cn/blog_migrate/c5627360a820eefe6105601e0c1dd465.jpeg)
- 输入建议
![c48dbe754b13c69997e33dc790ff79b2.png](https://i-blog.csdnimg.cn/blog_migrate/3dc41f093c32693605e1384de6902f20.jpeg)
- 快捷支持Markdown
![c544700a4f434ef92c08e096ae077433.png](https://i-blog.csdnimg.cn/blog_migrate/7da6a2803de9944a860bb073081c7189.jpeg)
- 代码突出高亮显示
![132a13baededd8f7f37dc0c34b9ac524.png](https://i-blog.csdnimg.cn/blog_migrate/cb709fe5150c7019f417788e3b71d5da.jpeg)
- 历史记录
![9c2ad1e7dafe0aec247dfdad1cf61674.png](https://i-blog.csdnimg.cn/blog_migrate/cd4096c818d7e6cc277e0ddc0fadb5a5.jpeg)
- 只读
![514b4c95940c8cb75e93fce6fe9ecc45.png](https://i-blog.csdnimg.cn/blog_migrate/31b07a960166b7ab1622cb3f66fef938.jpeg)
- 嵌入
![6b1824447193ea19b7fee584f03de041.png](https://i-blog.csdnimg.cn/blog_migrate/c8c924b297fa4fbd87d0653c7335e9f9.jpeg)
- 占位符
![d806e2c2e9c29e187203d7ce19a90746.png](https://i-blog.csdnimg.cn/blog_migrate/961994a36d5ac72fd058a039d1a65240.jpeg)
- 焦点
![0e0cd55ef59ea99465b1032ec9ce2b6a.png](https://i-blog.csdnimg.cn/blog_migrate/a5bb0229534029535f5b4d8937019c93.jpeg)
- 可通过前后端搭配实现协同编辑
![7597b0b5a7e3dd3cac8e8e078ca419f0.png](https://i-blog.csdnimg.cn/blog_migrate/815a1012506176a16423e3c99822e0ca.jpeg)
- 标题
![08a005a9ad90069f6b1d0f026bcfeec5.png](https://i-blog.csdnimg.cn/blog_migrate/2105ddd4d0226ea85704e444508259f1.jpeg)
- 末尾段落
可理解为对图片等的解释说明等等,可灵活使用
![f033cd369e6f2ff700ba150b49a36093.png](https://i-blog.csdnimg.cn/blog_migrate/84a83395531925cfe369b3364f394488.jpeg)
- 导出html和json
![05fe0a7fb566f71a24ee4eaa5f32520d.png](https://i-blog.csdnimg.cn/blog_migrate/a797695ed167a55d264b77336d435ad5.jpeg)
ProseMirror简介
ProseMirror 用于在网络应用程序上构建富文本编辑器的工具包,视图解决Markdown和经典WYSIWYG(所见即所得)编辑器。它通过实现WYSIWYG样式的编辑界面来实现此目的,以使文档比纯HTML更加受约束和结构化。可以自定义编辑器创建的文档的形状和结构,并根据应用程序的需要对其进行定制。
![39f62249f71a39216bc701a6ad39dbc4.png](https://i-blog.csdnimg.cn/blog_migrate/571c434b3d474259ddd10662f408c346.jpeg)
https://github.com/prosemirror
总结
tiptap是一个相当不错的富文本编辑器,其无渲染特性以及可实现的协同编辑让其扩展更加方便!enjoy it!