基于vue的tiptap编辑器插件（一）
前言
最近在重构我的vue项目，发现vue-quill-editor这个插件的自定义配置有些局限，我也不是很懂，然后去查的时候发现，这个插件已经没有团队在维护了，这个插件是基于quill的，我如果要了解内部细节，肯定是要把quill的相关文档看一遍，但是已经有新的替代品了，那就是tiptap，不仅有团队维护，而且文档全面详细，既然我都是要从头看文档，为何不看新的呢，所以我选择学会使用tiptap，然后把原来的quill-editor替代掉。
介绍
tiptap是一个基于ProMirror(一个用于创建web端的富文本编辑器的工具包)的编辑器。（tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors.）
headless是什么意思？
headless表示没有提供内置的UI，您完全可以自由地构建你想要的界面。(There is no provided user interface, you are absolutely free to build whatever interface you want.)
注意，tiptap的文档的服务器不在国内，所以想要看的小伙伴需要自己想办法。
安装
在你的现有的vue项目中，通过npm添加以下两个包(以vue2举例)：
npm install @tiptap/vue-2 @tiptap/starter-kit
在components目录下新建一个Tiptap.vue，写入以下内容
<template><editor-content :editor="editor" />
</template><script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'export default {components: {EditorContent,},data() {return {editor: null,}},mounted() {this.editor = new Editor({content: '<p>I’m running Tiptap with Vue.js.
基于vue的tiptap编辑器插件（一）相关推荐
- 基于vue的tiptap编辑器插件（三）
美化编辑器 前面介绍过,tiptap是一个headless的编辑器,所以他自己是没有样式的,我们需要手动给他添加一些样式.文档中介绍了三种美化编辑器的方式,听我一一道来. Option 1: Styl ...
- 基于vue的tiptap编辑器插件（二）
配置 如标题所见,这一篇我们讲配置,也是官方guide的第一节内容.我会按照文档的guide顺序,根据我自己的理解方式,一点点解读其内容,所以如果你不着急,我建议你看第一手资料:如果你的时间比较紧迫, ...
- 基于vue.js的dialog插件art-dialog-vue2.0发布
art-dialog-vue -- 经典.优雅的网页对话框控件 优点 支持普通与 12 方向气泡状对话框 支持 ARIA 标准 面向未来:基于 HTML5 Dialog 的 API 支持标准与模态对话 ...
- vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点 轻 ...
- Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
- 基于vue的图片裁剪插件vue-cropper
我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了.有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决.先介绍吧.效果是下面这样的, 我这里采用了4 ...
- 『开源』基于jq的数学公式编辑器插件（可嵌入项目）（web前端）
数学公式编辑器 初体验 API options配置 演示(参考test/simple.html) 嵌入演示 wangEditor(参考test/wangEditor/wangEditor.html) ...
- 基于Vue的拖拽插件的实战应用，但最后我还是选择了手写
因为项目上有一个在规定区域内自由拖拽的小需求,自己纯js写又有点小麻烦,就花了点时间寻找到这个小组件. 介绍 vue-drag-resize是一个用于拖拽,缩放的组件 根据网上搜索到的使用教程,都是照 ...
- 一款好用的基于vue的录屏插件recordrtc，拿走不谢
第一步:下载安装包 npm i recordrtc 第二步:复制代码,即可使用: <template> <div class="record-page">& ...
最新文章
- 公示 | 首届中国智能心电大赛初赛结果
- 服务器2012用什么虚拟机,虚拟机搭建Windows Server2012测试环境
- 网络配置_Linux网络环境配置
- 给Event handler传递动态参数
- MySql连接时提示：unknown Mysql server host
- html 出现的错误
- 程序员打造个人品牌 - Personal Brand的重要性
- mysql的常用的备份工具_39、mysql常用备份工具
- PHP7语法知识（三）：时间与日期、表单、类与对象、正则表达式、错误异常处理、图像处理...
- 网工必考的8个dos命令
- 用MySQL语言创建视图_mysql 创建视图
- 深度学习中常见的打标签工具和数据集集合
- meta http-equiv 属性 详解
- 百度AI实现图片转文字-python
- MongoDB命令笔记
- java word 题目导入_java使用poi导入word题库
- ant design pro入门踩坑：删除页面文件报错
- 专访马云：下一个星辰大海是百货商店
- LC振荡电路分析方法
- 查询一列不同值的数据 mysql_怎样查询两个表中同一字段的不同数据值
热门文章