【element-tiptap】Tiptap编辑器介绍

news2024/11/17 18:48:35

前言:写了好几篇文章都是扩展编辑器的功能的,其中很多功能都是在开源的代码的基础上进行修改。做了这么多功能深切的觉得应该深入了解一下基础配置,所以以后会穿插进行 Tiptap 基础知识文章的撰写。

一、Settings

editor#settings
editor 是 Tiptap 的核心对象,创建一个编辑器使用 new Editor() 方法,今天来学习一下创建编辑器的时候都有哪些配置信息可以传递给 Tiptap。

1、element

HTMLElement
编辑器的宿主元素,在宿主元素不可用之前启用编辑器也是可以的,会自动延后挂载行为,执行下面的方法进行挂载:

yourContainerElement.append(editor.options.element)
2、extensions

Array
添加到编辑器中的扩展,可以是 tiptap 提供的,也可以是在原有的扩展上进行 extend 的,也可以是通过 Extension.create() 方法新创建的扩展。例如 HeadingParagraph 等等

3、content

String
编辑器初始的内容,字符串中可以包含标签,会自动被解析,渲染成DOM元素

4、editable

Boolean
是否可编辑

5、autofocus

初始状态下焦点的位置,可选值如下
start:文档开头
end:文档结尾
all:选中整个文档
Number:文档中的哪个位置
true:允许自动聚焦
false:不允许自动聚焦
null:不允许自动聚焦

6、enableInputRules

false 或者 Array
false 表示不开启自动转换的规则
允许的输入规则,默认情况下,编辑器允许所有的输入规则,一般情况下不需要指定,全部允许就行了。
用于 Markdown 快捷输入,比如 ‘#’ 表示标题一,可以自定义快捷输入。这个快捷输入是添加到扩展上的,以下面的方式进行添加:

// Use the ~single tilde~ markdown shortcut
import Strike from '@tiptap/extension-strike'
import { markInputRule } from '@tiptap/core'
const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/

const CustomStrike = Strike.extend({
  addInputRules() {
    return [
      markInputRule({
        find: inputRegex,
        type: this.type,
      }),
    ]
  },
})

如果要允许这条输入规则,就需要在 enableInputRules 中写上这个扩展项

enableInputRules: [CustomStrike],
7、enablePasteRules

false 或者 Array
默认情况下,编辑器允许所有的粘贴规则
粘贴规则的作用和输入规则是一样的,就是快捷输入符号的粘贴。

8、injectCSS

默认情况下编辑器有一系列的样式style,这个属性设置成 false 的话可以禁用原有的样式。应该也不咋会用到。

9、injectNonce

String
给动态创建的元素提供一个随机字符串,以使用Content-Security-Policy,防止爬虫或网站攻击等。

10、editorProps

Object
这个配置项会被prosemirror 进行处理,如果你想重写某些编辑器的属性或者方法,就可以传递这个属性,例如可以给编辑器设置生命周期的监听函数

new Editor({
  // Learn more: https://prosemirror.net/docs/ref/#view.EditorProps
  editorProps: {
    transformPastedText(text) {
      return text.toUpperCase()
    },
  },
})

粘贴字母进去会直接变成大写୧(๑•̀◡•́๑)૭

11、parseOptions

Object
这个也是要传递给prosemirror#ParseOptions解析的属性。是用来控制粘贴行为的。
一般也不会用到,感兴趣的童鞋可以上官网瞅瞅

二、Methods

编辑器提供了一系列的公共方法,方法是普通的函数,可以返回任何类型的数据。需要注意方法和命令是不一样的,命令主要用来修改编辑器的state属性,包括选区、内容等方面,只能返回布尔值。

1、can()

检查一个命令或者命令链能否被调用,不会实际执行命令。如果可以执行,则会返回 true,链式会继续往下执行

2、chain()

创建一个命令链以便于一次性调用多个命令。

// Execute two commands at once
editor.chain().focus().toggleBold().run()
3、destroy()

销毁编辑器实例、解绑所有方法。

4、getHTML()

以HTML形式获取当前的编辑器文档内容

5、getJSON()

以JSON形式获取当前的编辑器文档内容

6、getText()

以纯文本形式获取当前的编辑器文档内容
可以传递一个配置对象参数,指定分割节点的字符

// 纯文本
editor.getText()
// 节点之间通过两个空行分割
editor.getText({ blockSeparator: '\n\n' })
7、getAttributes()

获取当前选定节点或标记(mark)的属性。
接受一个字符串参数,指明节点或者标记的名称

editor.getAttributes('link').href
8、isActive()

参数一:String 节点名或者标记名
参数二:Object 要判断的属性
对当前选中的节点或者标记进行条件判断,返回布尔值,表示是否满足传递进去的条件

// 判断当前选中节点是否是标题
editor.isActive('heading')
// 判断当前选中节点是否是二级标题
editor.isActive('heading', { level: 2 })
// 判断当前选中的节点或者标记是否具有指定的属性
editor.isActive({ textAlign: 'justify' })
9、registerPlugin()

参数一:Plugin 要注册的插件
参数二:handlePlugins (newPlugin: Plugin, plugins: Plugin[]) => Plugin[] 控制如何将要注册的插件合并到现有的插件列表
注册 ProseMirror 插件

10、setOptions()

参数:Object
更新编辑器选项

// 给当前的编辑器实例增加一个类名
editor.setOptions({
  editorProps: {
    attributes: {
      class: 'my-custom-class',
    },
  },
})

11、setEditable()

参数一:Boolean 要将编辑器设置成可编辑的还是不可编辑的
参数二:Boolean 是否触发更新的监听器,默认为 false

12、unregisterPlugin()

参数:string | PluginKey
注销插件

13、$node()

参数一:String 表示节点类型,例如codeBlock、bulletList
参数二:Object 表示节点属性
获取文档中拥有指定属性的第一个某类型的节点

三、Properties

1、isEditable

是否可编辑

2、isEmpty

是否有内容

3、isFocused

是否被聚焦

4、isDestroyed

是否被销毁

5、isCapturingTransaction

编辑器是否正在捕获事务。
对于捕获事务的理解,事务就是编辑器中的各种操作,例如修改某个文字的颜色,修改某个区域的内容等,事务可以被捕获,然后集中起来一并执行,isCapturingTransaction 就可以判断编辑器是否正在捕获事务,如果没有在捕获事务,就需要手动对当前的操作执行捕获操作,如果正在捕获,那么就等编辑器自己捕获即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2242337.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从0开始机器学习--Day27--主成分分析方法

主成分分析方法(Principal components analysis) 在降维算法中,比较普遍的是使用主成分分析方法(PCA) PCA算法简单示例 如图,假设我们有一个二维的特征,想要将其降为一维,简单的方法是寻找一条直线&#…

无效的目标发行版17和无法连接Maven进程问题

起因:我clean了一个模块的Maven想要重新下,他就开始报错。两次了都是这样。如果和我一样一开始都是好好的,直接找Maven的设置,在运行程序改,jre变成了11.它自己变成了我其他的jdk

【Android、IOS、Flutter、鸿蒙、ReactNative 】启动页

Android 设置启动页 自定义 splash.xml 通过themes.xml配置启动页背景图 IOS 设置启动页 LaunchScreen.storyboard 设置为启动页 storyboard页面绘制 Assets.xcassets 目录下导入图片 AppLogo Flutter 设置启动页 Flutter Android 设置启动页 自定义 launch_background.xm…

Java实现多线程编程

目录 一、创建线程 1.1.第一种方法:继承Thread类 1.2.第二种方法:实现Runnable接口 1.3.其他创建线程的方法 二、多线程的优势-增加运行速度 三、Thread类及常见方法 3.1 Thread常见的构造方法 3.2Thread的几个常见方法 3.2.1启动一个线程——sta…

【快速解决】kafka崩了,重启之后,想继续消费,怎么做?

目录 一、怎么寻找我们关心的主题在崩溃之前消费到了哪里? 1、一个问题: 2、查看消费者消费主题__consumer_offsets 3、一个重要前提:消费时要提交offset 二、指定 Offset 消费 假如遇到kafka崩了,你重启kafka之后&#xff0…

【设计模式】行为型模式(四):备忘录模式、中介者模式

《设计模式之行为型模式》系列,共包含以下文章: 行为型模式(一):模板方法模式、观察者模式行为型模式(二):策略模式、命令模式行为型模式(三):责…

GRE做题笔记(零散的个人经验)

locomotive机车By 1813, the Luddite resistance had all but vanished. all but表示“几乎完全”的程度,或者表示排除piston活塞attributed to 归因于how a sportsperson accounted for their own experience of stress 运动员如何解释自己的压力经历 ,…

【vmware+ubuntu16.04】vm虚拟机及镜像安装-tools安装包弹不出来问题

学习机器人这门课需要下载虚拟机,做一下记录 首先我下载的是vm虚拟机16, 下载版本可参考该文章课堂上我下载 的镜像是16.04,虚拟机安装教程和镜像添加可参考该博主 按照教程安装成功 安装tools,但是我的弹不出来那个压缩包&…

Redis设计与实现 学习笔记 第十七章 集群

Redis集群是Redis提供的分布式数据库方案,集群通过分片(sharding,水平切分)来进行数据共享,并提供复制和故障转移功能。 17.1 节点 一个Redis集群通常由多个节点(node)组成,在刚开…

第03章 文件编程

目标 了解Linux系统文件IO/标准IO基本概念掌握Linux系统文件IO/标准IO常用函数掌握Linux系统文件属性常用函数掌握Linux系统目录文件常用函数 3.1 Linux系统概述 3.1.1 预备知识(相关概念) (1)应用程序 和 内核程序 应用程序是…

51c大模型~合集42

我自己的原文哦~ https://blog.51cto.com/whaosoft/11859244 #猎户座 「草莓」即将上线,OpenAI新旗舰大模型曝光,代号「猎户座」 ChatGPT 要进化了? 本月初,OpenAI 创始人、CEO 山姆・奥特曼突然在 X 上发了一张照片&#xff0…

SpringBootTest常见错误解决

1.启动类所在包错误 问题 由于启动类所在包与需要自动注入的类的包不在一个包下: 启动类所在包: com.exmaple.test_02 但是对于需要注入的类却不在com.exmaple.test_02下或者其子包下,就会导致启动类无法扫描到该类,从而无法对…

初始JavaEE篇 —— 网络编程(2):了解套接字,从0到1实现回显服务器

找往期文章包括但不限于本期文章中不懂的知识点: 个人主页:我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏:JavaEE 目录 TCP 与 UDP Socket套接字 UDP TCP 网络基础知识 在一篇文章中,我们了解了基础的网络知识,网络的出…

机器学习 AdaBoost 算法

AdaBoost 提升学习算法是通过训练多个弱分类算法实现一个强分类算法,做法非常朴素,在训练过程中,提供分类错误的数据权重,降低分类正确的权重,提高分类效果好的弱分类器权重,降低分类效果差的若分类器权重。…

C++编程技巧与规范-类和对象

类和对象 1. 静态对象的探讨与全局对象的构造顺序 静态对象的探讨 类中的静态成员变量(类类型静态成员) 类中静态变量的声明与定义&#xff08;类中声明类外定义&#xff09; #include<iostream> using namespace std;namespace _nmspl {class A{public:A():m_i(5){…

golang中的init函数

程序的初始化和执行都起始于 main 包。如果 main 包还导入了其它的包&#xff0c;那么就会在编译时将它们依次 导入。有时一个包会被多个包同时导入&#xff0c;那么它只会被导入一次&#xff08;例如很多包可能都会用到 fmt 包&#xff0c;但 它只会被导入一次&#x…

【大数据学习 | flume】flume之常见的sink组件

Flume Sink取出Channel中的数据&#xff0c;进行相应的存储文件系统&#xff0c;数据库&#xff0c;或者提交到远程服务器。Flume也提供了各种sink的实现&#xff0c;包括HDFS sink、Logger sink、Avro sink、File Roll sink、HBase sink&#xff0c;。 ​ Flume Sink在设置存…

数学分组求偶数和

问题描述 小M面对一组从 1 到 9 的数字&#xff0c;这些数字被分成多个小组&#xff0c;并从每个小组中选择一个数字组成一个新的数。目标是使得这个新数的各位数字之和为偶数。任务是计算出有多少种不同的分组和选择方法可以达到这一目标。 numbers: 一个由多个整数字符串组…

构建安全护盾:HarmonyOS 应用的数据安全审计与日志管理实战

文章目录 前言数据安全审计与日志管理的重要性什么是数据安全审计&#xff1f;为什么需要日志管理&#xff1f; 数据安全审计与日志管理的基本原则实现数据安全审计与日志管理的技术方案1. 数据安全审计的实现2. 日志管理的实现 ArkUI 与 ArkTS 的代码示例1. 审计日志记录2. 实…

ReactPress与WordPress:两大开源发布平台的对比与选择

ReactPress与WordPress&#xff1a;两大开源发布平台的对比与选择 在当今数字化时代&#xff0c;内容管理系统&#xff08;CMS&#xff09;已成为各类网站和应用的核心组成部分。两款备受欢迎的开源发布平台——ReactPress和WordPress&#xff0c;各自拥有独特的优势和特点&am…