Nextjs 集成富文本编辑器react-quill

目录

一、组件代码

二、参考文档


由于Next与react有些差别,直接调用组件会报无法找到文档的错误,于是我们只有考虑动态导入了解决问题。因为富文本编辑器一般作用与form页面对SEO意义不大,所以这里可以考虑暂时关闭SSR。

一、组件代码

/*** @author Dragon Wu* @since 2024/6/11 14:36*/
import React, {useEffect, useState} from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
import styles from "@/styles/publishTender.module.less";const ReactQuill = dynamic(() => import('react-quill'), {ssr: false});const TenderEditor: React.FC<{ defaultValue: string, onChange: Function }> = React.memo(({defaultValue, onChange}) => {const [editorValue, setEditorValue] = useState(defaultValue);const handleChange = (content) => {setEditorValue(content);onChange(content);};useEffect(() => {handleChange(defaultValue)}, [defaultValue]);return (<><ReactQuillmodules={{toolbar: [['bold', 'italic', 'underline', 'strike'],        // toggled buttons['blockquote', 'code-block'],['link', 'image', 'video', 'formula'],[{ 'header': 1 }, { 'header': 2 }],               // custom button values[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent[{ 'direction': 'rtl' }],                         // text direction[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown[{ 'header': [1, 2, 3, 4, 5, 6, false] }],[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme// [{ 'font': [] }],[{ 'align': [] }],['clean']                                         // remove formatting button],}}value={editorValue}onChange={handleChange}theme="snow"placeholder="输入详情信息"className={styles.editor}/></>)
});TenderEditor.displayName = "TenderEditor";export default TenderEditor;

正常渲染,没有再报错:

二、参考文档

next.js - React Quill , unable to access import of Quill.import - Stack Overflow

react富文本编辑器 react-quill简单使用 - 简书

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

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

相关文章

【系统架构】REST风格

系列文章目录 第一章 系统架构的演进 第二章 REST风格架构 文章目录 系列文章目录前言一、进程间的通信普通管道&#xff08;Pipe&#xff09;或者具名管道&#xff08;Named Pipe&#xff09;信号&#xff08;Signal&#xff09;信号量&#xff08;Semaphore&#xff09;消息…

温泉镇旅游微信小程序的设计与实现(论文+源码)_kaic

摘要 旅游业随着经济的快速发展呈现出一派欣欣向荣的景象&#xff0c;尤其是近两年来&#xff0c;各个行业运用科技以及因特网来促进旅游迅速发展&#xff0c;逐渐都显示出了的问题&#xff0c;特别突出的是在线上推广&#xff0c;其缺点也是特别明显。尽管在新冠肺炎的冲击下&…

uni-app前端,社区团购系统搭建部署

目录 前言&#xff1a; 一、社区团购模式&#xff1a; 二、社区团购系统功能&#xff1a; 三、总结&#xff1a; 前言&#xff1a; 区团购系统是一种利用互联网技术和组织力量&#xff0c;通过线上线下结合的方式&#xff0c;为社区居民提供方便快捷的商品和服务采购平台。…

案例学习-存量更新规划实施探索(武汉)

案例学习-存量更新规划实施探索&#xff08;武汉&#xff09; 武汉市在早期旧城更新实践中发现零散化的更新往往导致资源配置分散、城市建设破碎化等弊病&#xff0c;特别是由于过于强调项目自身“经济平衡”&#xff0c;在实施过程中也逐步暴露出住宅占比过大、强度偏高、公服…

算法day32

第一题 207. 课程表 步骤一&#xff1a; 通过下图的课程数组,首先画出DAG图&#xff08;有向无环图&#xff09; 步骤二&#xff1a; 其次我们按照DAG图&#xff0c;来构建该图的拓扑排序&#xff0c;等有效的点都按照规则排完序后&#xff0c;观察是否有剩下的点的入度不为0&…

MAC M1系统编译ffmpeg-gl-transition

MAC M1系统编译ffmpeg-gl-transition 1. 本人系统2. 编译&#x1f4b0;系统准备2.1. 下载【ffmpeg-gl-transition】到用户家目录下&#xff0c;并解压2.2 下载ffmpeg源码2.3. brew安装GLEW glfw32.4 复制vf_gltransition.c文件到ffmpeg2.5 修改ffmpeg源码文件2.6 设置库目录和…

qmt量化交易策略小白学习笔记第32期【qmt编程之获取行业概念数据--如何获取迅投行业成分股数据】

qmt编程之获取迅投行业成分股数据 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 感谢关注&#xff0c;咨询免费开通量化回测与获取实盘权限&#xff0c;欢迎和博主联系&#xff01; 获取迅投…

JAVA学习01

8个二进制位代表1字节 不能超出这个范围 文档注释 生成api文档 编码&#xff1a;保存数据的过程 解码&#xff1a;读数据 notic&#xff1a; 编码解码遵循的规范是一样的 gbk&#xff1a;中文 ansi代表gbk - 一个中文字占两个字节 udf-8 一个汉字占三个字节

一文了解Spark引擎的优势及应用场景

Spark引擎诞生的背景 Spark的发展历程可以追溯到2009年&#xff0c;由加州大学伯克利分校的AMPLab研究团队发起。成为Apache软件基金会的孵化项目后&#xff0c;于2012年发布了第一个稳定版本。 以下是Spark的主要发展里程碑&#xff1a; 初始版本发布&#xff1a;2010年开发…

2024全新仿麻豆视频苹果cms源码v10影视模板

下载地址&#xff1a;2024全新仿麻豆视频苹果cms源码v10影视模板 高端大气的设计&#xff0c;适合做电影、连续剧、综艺、动漫、微电影、纪录片、海外剧等视频网站

N3 中文文本分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊# 前言 前言 前面学习了相关自然语言编码&#xff0c;这周进行相关实战 导入依赖库和设置设备 import torch import torch.nn as nn import torchvision fro…

虚函数机制-动态绑定的应用

虚函数使得程序在运行的时候根据指针指向对象的类型来确定调用哪个函数。 下图中&#xff1a;都为静态绑定。因为在编译器就确定了可以调用的函数 此时当基类指针指向派生类对象时&#xff0c;因为没有virtual关键字&#xff0c;所以在编译阶段就根据指针类型确定了要指向的函…

秋招突击——第四弹——Java的SSN框架快速入门——Maven

文章目录 引言Maven分模块开发与设计分模块开发的过程 依赖管理可选依赖与排除依赖 继承与聚合聚合继承 属性和版本管理属性扩大集中管理的范围版本管理 多环境开发多环境开发 私服简介安装私服资源操作流程分析上传和下载 总结 引言 前一个部分花了太多时间&#xff0c;后续得…

【Pandas驯化-02】pd.read_csv读取中文出现error解决方法

【Pandas】驯化-02pd.read_csv读取中文出现error解决方法 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内容文档获取 微信公众号 &…

MEMS:Lecture 17 Noise MDS

讲义 Minimum Detectable Signal (MDS) Minimum Detectable Signal&#xff08;最小可检测信号&#xff09;是指当信号-噪声比&#xff08;Signal-to-Noise Ratio, SNR&#xff09;等于1时的输入信号水平。简单来说&#xff0c;MDS 是一个系统能够分辨出信号存在的最低输入信号…

视频网站下载利器yt-dlp参数详解

yt-dlp 是一个强大的命令行工具&#xff0c;用来下载 YouTube 和其他网站上的视频和音频。它拥有丰富的参数&#xff0c;可以定制下载行为&#xff0c;满足各种需求。本文将详细介绍 yt-dlp 的参数使用。 一、基本参数 -f, –format FORMAT: 指定下载格式&#xff0c;可以用视…

mysql:1205-Lock wait timeout exceeded;try restarting transaction

1.现象 2.分析 使用下面sql在自带数据库的information_schema中查询,注意观察那些长时间开启事务又没完成的进程,然后根据进程的db、操作人、主机、事务开启时间和状态,来排查是什么情况导致的事务未完成(代码异常、执行时间超时等等);我这里是异步作业事务执行时间过长导致的 …

H5拟态个人主页

演示地址&#xff1a;科技语者个人主页 (chgskj.cn) 文末有该项目的源码~ 这张图片的效果你是不是非常想要get同款&#xff1f; 源码就是这个样子 这段HTML代码构建了一个个人主页&#xff0c;结合了CSS样式和JavaScript功能。 下面是对代码的主要组成部分的详细解释&#x…

苏姿丰回忆IBM工作经历 曾参与PS3 Cell处理器开发

AMD首席执行官苏姿丰博士曾在IBM工作了13年&#xff0c;先后担任IBM纽约半导体研发中心的副主管、研发部门主管和CEO特别助理。1998年苹果发布的iMac G3里&#xff0c;使用的PowerPC 750是首个采用铜互连技术的处理器&#xff0c;取代了铝互连技术。此前相关报道中曾提及&#…