vue的tap插件_Vue.js的RTF编辑器– Tiptap
用于Vue.js应用程序的无呈现(完全可自定义)和可扩展的WYSIWYG RTF编辑器。
安装和下载:
# Yarn
$ yarn add tiptap
# NPM
$ npm install tiptap --save
基本用法:
1.将您选择的组件导入项目。
Editor :核心课程
EditorContent:核心组件
EditorMenuBar:基本菜单栏
EditorMenuBubble:在附加到所选文本的气泡中显示菜单栏
EditorFloatingMenu:在浮动面板中显示菜单栏
import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble, EditorFloatingMenu } from 'tiptap';
2.将EditorContent组件添加到模板。
3.注册组件并创建一个基本编辑器。
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: '
默认的内容
',
})
}
}
4.编辑器的所有可能选项。
editorProps: {},
editable: true,
autoFocus: null,
extensions: [],
content: '',
topNode: 'doc',
emptyDocument: {
type: 'doc',
content: [{
type: 'paragraph',
}],
},
useBuiltInExtensions: true,
disableInputRules: false,
disablePasteRules: false,
dropCursor: {},
parseOptions: {},
injectCSS: true,
onInit: () => {},
onTransaction: () => {},
onUpdate: () => {},
onFocus: () => {},
onBlur: () => {},
onPaste: () => {},
onDrop: () => {},
5.安装和导入扩展。所有可能的扩展:
块引用
代码块
HardBreak
标题
订购清单
项目符号列表
项目清单
待办事项
待办事项清单
胆大
码
斜体
链接
罢工
强调
历史
基本设定
// 导入编辑器
import { Editor, EditorContent } from 'tiptap'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: '
这只是一段无聊的段落
',
})
},
beforeDestroy() {
this.editor.destroy()
},
}
编辑器属性
属性类型默认描述contentObject|StringnullProsemirror使用的编辑器状态对象。您还可以将HTML传递到content广告位。两者同时使用时,该content插槽将被忽略。
editableBooleantrue设置为false编辑器时为只读。
autoFocusBooleanfalse将编辑器集中在init上。
extensionsArray[]编辑器使用的扩展名列表。这可能是Nodes,Marks或Plugins。
useBuiltInExtensionsBooleantrue默认情况下,tiptap增加了Doc,Paragraph并且Text节点到Prosemirror架构。
dropCursorObject{}配置为prosemirror-dropcursor。
parseOptionsObject{}
onInitFunctionundefined这将在初始化时返回当前state和viewProsemirror 的Object 。
onFocusFunctionundefined这将返回一个对象,其焦点为event和和当前state和viewProsemirror。
onBlurFunctionundefined这将在模糊时返回具有event和当前state和viewProsemirror 的对象。
onUpdateFunctionundefined这将返回一个带有stateProsemirror,a getJSON()和getHTML()function以及当前transaction变化的对象。
编辑器方法
方法争论描述setContentcontent, emitUpdate, parseOptions替换当前内容。您可以传递HTML字符串或JSON文档。emitUpdate默认为false。parseOptions默认为构造函数中提供的那些。
clearContentemitUpdate清除当前内容。emitUpdate默认为false。
setOptionsoptions覆盖当前的编辑器属性。
registerPluginplugin, handlePlugins注册一个Prosemirror插件。您可以传递handlePlugins带有参数的函数(plugin, oldPlugins)来定义newPlugins将被调用的顺序。handlePlugins默认为推plugin到的前面oldPlugins。
getJSON–将当前内容获取为JSON。
getHTML–以HTML格式获取当前内容。
focus–关注编辑器。
blur–模糊编辑器。
destroy–销毁编辑器。
组件
名称描述这里将呈现内容。
这里将显示一个菜单栏。
此处将呈现菜单气泡。
这里将显示一个浮动菜单。
编辑器菜单栏
该组件是无渲染的,并且将通过作用域插槽接收一些属性。
属性类型描述commandsArray所有命令的列表。
isActiveObject用于检查所选文本是节点还是标记的函数对象。`isActive。{node
getMarkAttrsFunction获取您选择的所有标记属性的函数。
getNodeAttrsFunction获取所选所有节点属性的函数。
focusedBoolean编辑器是否专注。
focusFunction聚焦编辑器的功能。
变更日志:
v1.27.1(04/24/2020)
isActive()现在可用于多个属性
更改registerPlugin以在扩展插件之后添加插件
更新依赖
vue的tap插件_Vue.js的RTF编辑器– Tiptap相关推荐
- vue调用cordova 插件_Vue.js 使用cordova camera插件调取相机
本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作. 具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 c ...
- vue封装打印插件print.js实现打印组件功能
代码 插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法 定义-print.js // 打印类属性.方法定义 /* eslint-di ...
- vue图片裁剪组件_Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
- vue连线 插件_Vue + 常用第三方插件 基础使用
Vue + 常用第三方插件 基础使用 一.Vue + element 1.element-->快速入手-->按需引入方式: (1).安装element-ui //-S等同于:--save ...
- vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...
- vue连线 插件_vue 插件集合
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
- vue 导入excel插件_Vue框架下实现导入导出Excel、导出PDF
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...
- vue时间天气插件_vue创建天气webapp
vue创建天气webapp [x] 当前定位城市天气信息查看 [x] 下拉刷新天气信息 [x] 上拉加载古诗信息 [x] 查看24小时逐小时天气信息 [x] 查看未来6天天气信息 [x] 日落日出时间 ...
- vue webpack压缩代码_vue.js - 解决vue-cli打包后自动压缩代码
当我们用vue脚手架做完项目后,npm run build打包之后, 有没有查看源码,全是压缩好的.但是我就不想让它压缩,该怎么办呢? 困惑了几天,查了各种资料.终于终于... 来,上干货: 首先,我 ...
最新文章
- 秀尔算法:破解RSA加密的“不灭神话” --zz
- CentoS7 and MySql 5.7下载安装
- 计算机视觉、机器学习相关领域论文和源代码大集合--持续更新……
- tomcat 转发 http接口的绝对路径文件
- php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...
- web文件被更改crawlergo怎么解决_hscan:一款集成crawlergo和xray的src漏洞挖掘利器
- phpstudy mysql 漏洞_phpstudy后门漏洞复现php5.2
- CCNP学习之路之QOS配置命令
- 潘多拉固件设置ipv6_k2p下潘多拉/openwrt配置ipv6地址
- 没想到还可以用地图这么讲故事?Esri产品布道师为你精细了18个应用案例
- SSD目标检测网络tensorRT推理【附代码】
- android 读取sdcard图片 不显示,Android 读取sdcard上的图片实例(必看)
- 原生js+css3实现点击图片正方体旋转展现图片
- JQuery使用及基础原理解析相关笔记(一)
- Springboot的快速入门
- ubuntu20.04 外接显示器检测不到 未知的显示器 显卡安装黑屏 解决方案
- psycopg2.errors.DatatypeMismatch: 错误: 无法实现外键约束 “sale_an_product_tax_id_fkey“
- 小赛毛游C记-初识C语言(2)
- python微信朋友圈刷图_用python中的itchat可视化微信朋友圈
- 5G+人工智能技术在垃圾分类中的应用