温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中如何使用tiptap富文本编辑器

发布时间:2021-07-21 13:45:02 来源:亿速云 阅读:1269 作者:Leah 栏目:web开发

Vue中如何使用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: '<p>This is just a boring paragraph</p>',     })   },   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富文本编辑器


看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI