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…

秋招突击——算法打卡——6/6——复习{三数之和、考试最大困扰度}——快速新作{环形链表}

文章目录 复习最大考试困扰度三数之和——做的不好 新作环形链表实现代码 明天面试拼多多&#xff0c;因为今天面华为遇到了一个做过的题目&#xff0c;没做出来&#xff0c;关键是这个题目第一次做出来了&#xff0c;这次居然没有做出来&#xff0c;比较烦&#xff0c;所以今天…

光通信技术路线

自从1947年Bell实验室诞生第一支晶体管以来&#xff0c;芯片的尺寸大小和晶体管的集成度都遵循着“摩尔定律”进行飞速的发展。然而摩尔定律随着芯片尺寸的减小&#xff0c;进入到深亚微米或纳米量级之后&#xff0c;其发展也面临越来越严峻的挑战。近几年来虽然芯片上的晶体管…

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

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

【HarmonyOS】代码规范参考

【HarmonyOS】代码规范参考 一、通用原则 直白简单的逻辑代码比起注释来的更有意义&#xff1b; 空格、换行相关的规范&#xff0c;需使用IDE自带的格式化&#xff0c;快捷键是 CtrlAltL &#xff0c; 快速对代码进行格式化&#xff1b; 开发者不能为了快速开发而牺牲了代码…

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 - 博…

4.00003 postgresql的内存管理 - 我是怎么获得可用内存的?

文章目录 从一个例子开始何时设置分配内存的函数?分配函数是何时生效的?分配函数的详细动作是什么?从一个例子开始 Breakpoint 1, MemoryContextCreate (node=0x1008940, tag=T_AllocSetContext, method_id=MCTX_ASET_ID, parent=0x1000fe0, name=0xe21351 "dynahash&…

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

举例基于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;希望可以和你们成为朋友…