react使用react-quill富文本编辑器自定义上传图片,添加handlers后编辑器不显示问题

本文主要是介绍react使用react-quill富文本编辑器自定义上传图片,添加handlers后编辑器不显示问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Quill介绍

Quill 是一款 API 驱动、功能强大的现代富文本编辑器。它具有易于拓展、各平台表现一致性等优点。Quill 官方 1.0 版本于 2016 年 9 月发布,目前在 Github 上有41.8k Star。

官网地址:Quill - Your powerful rich text editor

github仓库地址:GitHub - slab/quill: Quill is a modern WYSIWYG editor built for compatibility and extensibility 

api文档地址:API - Quill Rich Text Editor

基本概念

Module配置

Quill 是以可拓展性和定制化为理念进行设计的。它尽可能简洁地实现了的编辑器的核心功能,并暴露接口供开发者进行定制化开发。这些核心功能就是通过 Module 来组织管理的。主要的 Module 有这些:

  1. Toolbar,它的主要功能是让用户方便快捷地对文本进行格式化。我们可以更改该模块的配置,控制操作栏按钮的数量、排列顺序、展现形式等等
  2. Keyboard,它的主要功能是为键盘事件进行定制化的控制。例如,当我们需要对选中的文字进行加粗,可以点击操作栏加粗按钮实现,也可以直接通过快捷键 command+b 来达到目的。
  3. History,它主要是提供编辑器的 undo 和 redo 的功能。通过配置项,我们还可以设置多少秒内的操作合并为一个快照记录。
  4. Clipboard,它主要用于处理编辑器和外部应用之间的复制、粘贴等操作。值得注意的是,Quill 编辑器对文本格式有一定要求,粘贴到富文本的内容可能会被稍作处理。
  5. Syntax,该模块用于代码块的语法高亮。Quill 编辑器的语法高亮需要借助 highlight.js 来进行词法分析。

Parchment文档模型

Parchment 是 Quill 的文档模型,你可以把它类比为 HTML 中的 DOM 树。正如 DOM 树是由 DOM 节点构成,Parchment 则是由 Blots 构成。Quill 默认提供了几种常见的 Blots 例如:Block Blot、Inline Blot、Embed Blot。为了便于理解,你可以将其类比为 HTML 中的内联元素和块状元素。为了满足不同的格式化需求,Quill 允许我们自定义 Blot。现在我们来实现一个使文字变成斜体的功能:

let Inline = Quill.import('blots/inline');class ItalicBlot extends Inline { }
ItalicBlot.blotName = 'italic';
ItalicBlot.tagName = 'em';Quill.register(ItalicBlot);const quill = new Quill('#editor');
quill.formatText(0, 4, 'italic', true);

我们在实现一个自定义的 Blot 的时候,并不需要完全从零开始,可以继承自 Quill 默认提供的基础 Blot。一个最简单的 Blot 至少有两个最基本的静态属性,blotName 和 tagName。其中 blotName 在格式化的时候作为名字传入,而 tagName 则是创建的 HTML 元素的标签名,在本文示例中使用 em 标签实现斜体效果。

Delta数据格式

Delta 是一种用来描述文本内容和内容编辑的简单、极富表现力的格式。它是基于 JOSN 格式,易于阅读和解析。Delta 可以用来描述任何富文本文档对象,并且它没有 HTML 的复杂性和语义不明确性。我们通过一个示例来看看 Delta 结构是什么样子的。假若文本编辑器的内容为:“Gandalf the Grey”,如你所见,第一个单词 “Gandalf” 是有粗体效果的,最后一个单词 “Grey” 则是斜体效果。那么代表文本编辑器内容的 Delta 则是如下格式:

Delta = {ops: [{ insert: 'Gandalf', attributes: { bold: true } },{ insert: ' the ' },{ insert: 'Grey', attributes: { italic: true } }]
}

那如果我们想把编辑器内容由 “Gandalf the Grey” 改为 “Gandalf theWhite”又该如何操作呢?答案很简单,保持前面 12 个字符不动,插入单词“White”并使文字变蓝,删除接下来的四个字符即可。在 Quill 编辑器中调用如下代码即可实现:

const delta = new Delta().retain(12).insert('White', { color: '#00F' }).delete(4);
quill.updateContents(delta)

编辑器不显示问题

自定义上传图片需要添加自定义handlers来处理图片上传问题,添加了handlers后,编辑器不显示了,控制台还没有报错,不添加handlers还是会显示的:

解决办法

使用useMemo将quill toolbar配置包裹起来就好了

    // quill toolbarconst config = useMemo(() => {return {toolbar: {container: [[{ header: [1, 2, 3, 4, 5, false] }],['bold','italic','underline','strike','blockquote','image',],[{ list: 'ordered' },{ list: 'bullet' },{ color: [] },{ background: [] },{ align: [] },],],handlers: {image: uploadImages,},},}}, [])

自定义图片上传

有多种方式可以处理图片上传,每一种都是一个思路,1.比如监听剪切板粘贴图片的事件做处理,比如可以自定义img标签的handlers,2.或者直接监听编辑器的onChange事件,用正则匹配到图片标签后,或者监听delta变化后,将base64的图片转为file文件上传后,再将原来的img标签替换为线上链接的形式。至于哪种好,各有千秋吧

我这里选择使用第二种方式处理这些图片,原因有以下几种:

1.不用再单独处理是通过点击图片icon上传的图片还是粘贴过来的图片,统一处理delta变化处理,

2.兼容之前已经上传过的base64文章内容图片处理,如果之前已经有历史文章包含了base64的图片,也可以兼容处理了,将他们处理为链接的形式。

使用到的api有:

因为我使用的是react-quill,所以可以参考api:GitHub - zenoamaro/react-quill: A Quill component for React.

onChange:文档内容发生改变事件,可以拿到文档内容,delta数据,发生改变的原因,还有编辑器只读代理

getContents:可以获取到delta格式的文档数据内容

setContents:使用delta数据格式设置编辑器内容

还需要将base64的图片转为file然后上传到服务器中,转换函数:


export const base64ToFile = (base64, fileName = `${Math.random()}`) => {let arr = base64.split(',')console.log(arr[0])let mime = arr[0].match(/:(.*?);/)[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}console.log('mime-----', mime)return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {type: mime,})
}

需要注意

1.content和delta和editor.getHTML()获取的都是实时的文本内容,不是quill绑定的value。

const handleChangeQuill = (content, delta, source, editor) => {// content和delta和editor.getHTML()获取的都是实时的文本内容,不是quill绑定的value值.....}

2.setContents如果是粘贴图片,会导致文档指针定位回到最开始位置,需要单独处理。

3.setSelection可以设置文档指针位置,quill.setSelection(99999) 可以让指针一直处于文档末尾,但是需要根据情况处理,比如如果是用户从文档中间开始编辑的话,就设置到最底部.

4.insertEmbed可以在文档中某个位置插入新的文档节点标签,例如:

quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');

但是这种方法的前提还是需要先知道用户的光标位置。

 

监听文档变化,使用setContents更新文档内容,但是更新完之后,如果是粘贴图片会让用户的指针位置回到最开始的地方(这个问题的原因是粘贴上传图片,会导致编辑器失去焦点),这是一个问题需要解决。

解决的办法是:当文档变化的时候,让文档获取焦点

quill.focus()

所有代码: 

    const quillEdit = useRef(null)// 编辑器获取焦点,获取指针位置const [editWho, setEditWho] = useState('')const [userIndex, setUserIndex] = useState(0)// 将光标定位到用户输入的位置useEffect(() => {console.log('富文本内容改变了', editWho, userIndex)const quill = quillEdit.current.getEditor()if (editWho === 'api' && userIndex !== 0) {quill.setSelection(userIndex + 2)}}, [htmlVal])const handleChangeQuill = (content, delta, source, editor) => {// content和delta和editor.getHTML()获取的都是实时的文本内容,不是quill绑定的value值let quill = quillEdit.current.getEditor()// 如果是用户粘贴图片,需要先获取焦点,然后获取到粘贴图片的位置,等图片上传完之后,再将光标恢复quill.focus()console.log('delta_ops------', content, delta, source, editor)let delta_ops = delta.opslet quilContent = editor.getContents()setHtmlValue(content)// 获取指针位置const range = quill.getSelection()// console.log('user index------', quill.hasFocus())if (range) {if (range.length == 0 && range.index !== 0) {console.log('User cursor is at index', range.index)setUserIndex(range.index)} else {const text = quill.getText(range.index, range.length)console.log('User has highlighted: ', text)}} else {console.log('User cursor is not in editor')}setEditWho(source)if (delta_ops && delta_ops.length > 0) {quilContent.ops.map((item) => {if (item.insert) {let imgStr = item.insert.imageif (imgStr && imgStr?.includes('data:image/')) {let file = base64ToFile(imgStr)console.log('files=', file)let formData = new FormData()formData.append('file', file)// 调用文件上传接口-将二进制图片文件上传至服务器uploadFile(formData).then((res) => {// 将图片链接替换为服务器返回的图片链接item.insert.image = res.data[0]// 此方法会让用户指针回到最头部quill.setContents(quilContent)})}}})}}<ReactQuilltheme="snow"ref={quillEdit}value={htmlVal}modules={config}placeholder="请输入图文详情"onChange={handleChangeQuill}/>

最终的效果:

 

这篇关于react使用react-quill富文本编辑器自定义上传图片,添加handlers后编辑器不显示问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1014774

相关文章

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window