React Hooks 封装可粘贴图片的输入框组件(wangeditor)

需求是需要一个文本框 但是可以支持右键或者ctrl+v粘贴图片,原生js很麻烦,那不如用插件来实现吧~我这里用的wangeditor插件,初次写初次用,可能不太好,但目前是可以达到实现需求的一个效果啦!后面再改进吧~

封装了个文本框组件,上代码吧直接:

import React, {useRef,useEffect,forwardRef,useImperativeHandle
} from "react";
import WangEditor from "wangeditor";
import { handleFetchPostJson } from "../../service/request";
import "./editimg.scss";// 过滤所有标签及属性
let reHtml =/(&lt;|<(?!img|p|\/p|h1|h2|h3|h4|h5|h6|\/h1|\/h2|\/h3|\/h4|\/h5|\/h6|span|\/span|br).*?>|&gt;)/gi;const EditorImgComponent = forwardRef(({ isPlot, onContentChange, editorConfig, isDialog }, ref) => {let wangEditor = useRef();const editorRef = useRef(null);useEffect(() => {if (editorRef.current) {wangEditor.current = new WangEditor(editorRef.current);const editor = wangEditor.current;editor.config.menus = editorConfig;// 允许粘贴图片editor.config.showLinkImg = false;editor.config.pasteFilterStyle = true;// 监控变化,同步更新到 textareaeditor.config.onchange = (html) => {onContentChange(html);};editor.config.placeholder ="<div>为了更加快速的定位查找问题,请您按照如下方式反馈相关信息:<br/>  # 云分析请提供项目编号、章节名称、问题描述;<br/># 云分析请提供分析参数和提示信息截图;<br/> # 云图汇工具 请描述问题,附上相关作图数据;<br/>支持粘贴图片,为了更好的展示效果,请将文案和图片换行展示</div>";// 粘贴时去掉标签editor.config.pasteTextHandle = (content) => {content = content.replace(/[\r\n]/g, "");content = content.replace(/\'/g, '"');content = content.replace(reHtml, "");return content;};editor.config.zIndex = 1;editor.config.customUploadImg = function (files, insert) {if (files[0].size / 1024 / 1024 > 2) {message.error("上传图片最大不超过2M!");return;}let formData = new FormData();formData.append("image", files[0]);handleFetchPostJson("v1/message/mess_pic/", formData, {"Content-Type": "multipart/form-data"}).then((res) => {if (res.code === 2000) {let time = new Date().getTime();insert(res.info + "?time=" + time);} else {message.error("上传失败,请重新上传!");}});};editor.create();return () => {editor.destroy();};}}, []);useImperativeHandle(ref,() => {return {editor: wangEditor.current};},[wangEditor.current]);return (<divref={editorRef}className={isPlot? "work-center-plot-content-editor": isDialog? "work-center-dialog-editor": "work-center-content-editor"}/>);}
);export default EditorImgComponent;

稍微微的描述一下吧
因为我在其他页面(也就是父组件)调用的话需要子组件和父组件的值保持一致,也就是说当父组件值清空时,子组件也要相应清空,父组件值变化时,子组件也要同样变化,所以用到forwardRef和useImperativeHandle,用法可以看下react官方文档。


父组件调用:

定义:

赋值:

我这里只需要图片所以只配置了图片 想要什么往里面加什么就好了 百度和wangediter文档都可以搜到配置项具体有哪些

父组件控制子组件的同步的重新赋值:

父组件控制子组件的同步的内容清空


效果展示:

操作展示 !!!话不多说了直接行动证明

完成!!!小马同学又进步啦~

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

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

相关文章

个位为0的数字-第13届蓝桥杯省赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第81讲。 个位为0的数字&am…

标准发布实施 |《新能源电池工业废水处理技术指南磷酸铁锂电池》

T/ACEF 130&#xff0d;2024《新能源电池工业废水处理技术指南磷酸铁锂电池》欢迎各单位引用执行&#xff01;有课题也可联合立项&#xff01; 发布日期&#xff1a;2024年02月04日 实施日期&#xff1a;2024年03月01日 主要起草人&#xff1a;刘愿军、孙冬、丁炜鹏、何小芬…

whistle手机抓包

环境&#xff1a;whistle&#xff1a;2.9.59 whistle手机抓包&#xff08;ios可以抓小程序的包&#xff1b;安卓机不能抓小程序的包&#xff0c;但是小程序的有开发者工具就够用了&#xff09; 以安卓手机为例&#xff08;手机跟电脑要连同一个wifi&#xff09; 1.电脑安装w…

Django项目上线-报错汇总

Django项目上线-报错汇总 下列报错基本都是Python环境相关 pip install 报错 WARNING: pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available. debian运行pip报错ssl module in Python is not available - z417 - 博…

计算机专业本科论文起稿咋写

举例基于SpringBoot的Java基础的旅游管理系统 摘要 随着旅游业的快速发展&#xff0c;传统的旅游管理方式已经难以满足现代企业的需求。为了提高旅游企业的管理水平和服务质量&#xff0c;本文设计并实现了一个基于SpringBoot框架的旅游管理系统。本文首先介绍了旅游管理系统的…

Sql-labs的第一关

前言 我们在使用Sql-libs靶场进行Sql注入实验的时候&#xff0c;前提要求我们对mysql数据库结构要有一个大概的了解&#xff0c;因为mysql5.0以上的版本都会自带一个名为information_schema的数据库&#xff0c;这个数据库下面会有columns和tables两个表。 tables这个表的table…

3-1RT-Thread时钟管理

这里写自定义目录标题 时钟节拍是RT thread操作系统的最小时间单位。 第一个功能&#xff0c;rt tick值自动加1&#xff0c;在RT thread当中通过RT_USING_SMP定义了多核和单核的场景。第二个功能&#xff0c;检查当前线程的时间片&#xff0c;首先获取当前线程&#xff0c;将当…

Vitis HLS 学习笔记--初始化与复位

目录 1. 简介 2. 控制初始化与复位 2.1 初始化 2.2 复位 2.3 全局复位选项 2.4 复位排除 3. 阵列初始化和复位 3.1 不使用 static 限定符 3.2 使用 static 限定符 3.3 BRAM 和 URAM 4. 总结 1. 简介 本文对比分析两个方面的初始化和复位&#xff1a;阵列和控制&…

Java采取擦除式泛型到底兼容了什么场景?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;Java擦除式泛型是一个妥协,…

美颜相机「BeautyCam」v12.0.80 祛广告解索会员版(美妆相机功能,展现女神魅力)

软件介绍 美颜相机&#xff0c;一款由知名移动互联网企业Meitu Inc.开发的移动设备照片编辑与美化应用&#xff0c;起初主要针对娱乐消费市场&#xff0c;随后集成了商业营销功能。目前&#xff0c;它已跻身全球最受欢迎的手机摄影应用程序之列。在中国&#xff0c;美颜相机和…

JAVA高级-反射与动态代理(十五)

观看尚硅谷视频做的视频笔记 一、高级-反射与动态代理&#xff08;十四&#xff09; 1、反射概述 1&#xff09;java程序中&#xff0c;所有的对象都有两种类型&#xff1a;编译时类型&#xff0c;运行时类型&#xff0c;而很多时候对象的编译类型和运行时类型不一致。 此处…

workerman error 2 send buffer full and drop package

来源 报错信息&#xff1a;workerman error 2 send buffer full and drop package 定时发送数据的时候&#xff0c;本地偶尔出现这种情况 线上第一条数据发出去就报错了&#xff0c;数据改小一点可以发&#xff0c;不过一会还是会出现这种情况。 解决 根据我的经验&#xf…

SAP HCM OPT函数作用

导读 INTRODUCTION OPT函数&#xff1a;SAP HCM工资核算是很多函数的汇总集&#xff0c;原有有兴趣问过SAP的人为什么SCHEMA需要这样设计&#xff0c;SAP的人说是用汇编的逻辑设计的&#xff0c;当时是尽可能用机器语言加速速度读取&#xff0c;每个函数都有对应的业务逻辑代码…

React实战(一)初始化项目、配置router、redux、axios

(一)初始化项目 1.安装项目 npx create-react-app 项目名 编译报错&#xff1a; 解决办法&#xff1a;安装最新的babel-preset-react-app npm install babel-preset-react-applatest 2.配置项目 (1)配置文件目录 (2)使用craco配置webpack.config npm install craco/crac…

Coze入门指南:创建Bot时,如何写好人设与回复逻辑(Persona Prompt)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 Coze Bot 📒📝 Persona & Prompt🌟 # Character🌟 ## Skills🌟 # Overall Rules to follow🌟 ## Workflow🌟 ## Constraints📝 通用写法与模板📝 示例🌟技巧和注意事项⚓️ 相关链接 ⚓️📖 介绍 📖…

免费使用GPT-4生成图片的方法

写在前言 hello&#xff0c;大家好&#xff0c;我是一点&#xff0c;喜欢编程&#xff0c;目前持续在关注AI领域的发展&#xff0c;希望可以结交一些有意思的朋友。 大家可以关注我的公号&#xff1a;【一点sir】&#xff0c;了解更多文章&#xff0c;希望可以和你们成为朋友…

OpenCompass 大模型评测平台C-Eval 基准任务评估实战

1. 引言 在人工智能迅速发展的今天&#xff0c;大型语言模型&#xff08;LLMs&#xff09;在多个领域展现出了巨大的潜力和应用价值。然而&#xff0c;如何评价这些模型的性能&#xff0c;了解它们的优缺点&#xff0c;成为了一个重要课题。OpenCompass&#xff0c;一个由上海…

使用Cython编译Python源码加密加速,有这一篇就够了!

0 前言 python是一门脚本语言&#xff0c;运行时由python虚拟机解释执行。当我们使用python设计好算法给第三方使用时只能提供源码&#xff0c;任何运行我们算法的人都可以看到源码以及对应的算法思路。因此&#xff0c;需要一定手动保护源码。 最简单的保护方式是使用代码混…

高光谱图像聚类的像素-超像素对比学习与伪标签校正

Pixel-Superpixel Contrastive Learning and Pseudo-Label Correction for Hyperspectral Image Clustering 文章目录 Pixel-Superpixel Contrastive Learning and Pseudo-Label Correction for Hyperspectral Image Clustering摘要引言相关方法对比学习 方法超像素对比学习像素…

【嵌入式】智能系统优化:【C++】驱动的【机器学习】与【数据挖掘】技术

目录 一、嵌入式系统简介 二、C在嵌入式系统中的优势 三、机器学习在嵌入式系统中的挑战 四、C实现机器学习模型的基本步骤 五、实例分析&#xff1a;使用C在嵌入式系统中实现手写数字识别 1. 数据准备 2. 模型训练与压缩 3. 模型部署 六、优化与分析 1. 模型优化 模…