tiptap–基于Vue的无渲染的富文本编辑器

介绍

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: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = new Editor({
      content: \'

This is just a boring paragraph

\',
    })
  },
  beforeDestroy() {
    this.editor.destroy()
  },
}
script>

Demo截图

下面是来自官方网站的一组Demo截图:

  • 基本使用
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 菜单气泡
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 浮动菜单
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 添加链接
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 图片
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 可隐藏菜单栏

点击可隐藏菜单栏

强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 待办事项清单
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 表格table
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 搜索和替换
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 输入建议
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 快捷支持Markdown
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 代码突出高亮显示
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 历史记录
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 只读
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 嵌入
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 占位符
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 焦点
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 可通过前后端搭配实现协同编辑
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 标题
强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 末尾段落

可理解为对图片等的解释说明等等,可灵活使用

强悍!基于Vue的无渲染的富文本编辑器——tiptap!
  • 导出html和json
强悍!基于Vue的无渲染的富文本编辑器——tiptap!

ProseMirror简介

ProseMirror 用于在网络应用程序上构建富文本编辑器的工具包,视图解决Markdown和经典WYSIWYG(所见即所得)编辑器。它通过实现WYSIWYG样式的编辑界面来实现此目的,以使文档比纯HTML更加受约束和结构化。可以自定义编辑器创建的文档的形状和结构,并根据应用程序的需要对其进行定制。

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

https://github.com/prosemirror

总结

tiptap是一个相当不错的富文本编辑器,其无渲染特性以及可实现的协同编辑让其扩展更加方便!enjoy it!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/16465.html

发表评论

登录后才能评论