基于vue的tiptap编辑器插件(二)
配置
如标题所见,这一篇我们讲配置,也是官方guide的第一节内容。我会按照文档的guide顺序,根据我自己的理解方式,一点点解读其内容,所以如果你不着急,我建议你看第一手资料;如果你的时间比较紧迫,需要快速上手,可以来看我的这篇专栏。
配置编辑器
在上一篇介绍中,我们可以看到,目前的编辑器非常简陋,我们如何给它添加一些功能呢?
假设我们要增加一个可以让输入框中的文字变成标题(heading)的功能。那么,首先,我们要通过npm添加一个新的功能包@tiptap/extension-heading,并在Tiptap.vue中导入该包;在构造editor的过程中,给它传入一个配置对象,代码如下:
import Heading from '@tiptap/extension-heading';//...
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编辑器插件(一)
前言 最近在重构我的vue项目,发现vue-quill-editor这个插件的自定义配置有些局限,我也不是很懂,然后去查的时候发现,这个插件已经没有团队在维护了,这个插件是基于quill的,我如果要了 ...
- vue中使用图像编辑器tui-image-editor(二)——应用示例
vue中使用图像编辑器tui-image-editor(二)--应用示例 效果 代码 mark.vue <template><div class="drawing-cont ...
- 基于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 特点 轻 ...
- 在Unity中创建基于Node节点的编辑器 (二) 窗口序列化
孙广东 2018.5.13 csdn 的产品 , 真垃圾, 不想吐槽了, 文章保存就丢! 没办法 . 怎么不满意, 还是得继续用, 哎~~~ 第二部分 在Unity中序列化基于节点的 ...
- 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) ...
最新文章
- Linux常用命令--echo
- c语言一对圆括号不能,C语言单元习题集
- Android画图最基本的三个对象(Color,Paint,Canvas)
- python小游戏代码大全-python小游戏实现代码
- Matlab | Matlab从入门到放弃(11)——基于Matlab的矩阵分解、幂和指数
- 存储知识课堂(二):磁盘读写磁头揭秘
- “进度条”博客——第四周
- POJ - 3694 Network(边双缩点+LCA+并查集优化)
- Android 使用jarsigner给apk签名的方法详细介绍
- php 语义解析,[扩展推荐] PHP 语义化版本(SemVer)辅助库
- 开奖啦!支付宝全民撒钱 你分到多少?
- SAP License:ERP失败案例集
- C#实现--单链表(链式)
- 对Oracle软软解析的一点看法
- 成品app直播源码,实现图形验证码
- 推荐一款不错的杀毒软件,还在找卡巴激活码的网友不妨进来看看!
- 关于ISI、SCI、EI、IEEE、Elsevier、Springer的区别
- css 设置元素背景为透明
- 【Day2.2】茶卡盐湖
- 什么是事务的一致性?一致性和原子性的区别是什么?
热门文章