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;消息…

C++ 字符串处理5-手机号邮箱如何脱敏处理

1. 关键词2. strutil.h3. strutil.cpp4. 测试代码5. 运行结果6. 源码地址 1. 关键词 关键词&#xff1a; C 字符串处理 分割字符串 连接字符串 跨平台 应用场景&#xff1a; 有些重要信息需要保密&#xff0c;比如手机号、邮箱等&#xff0c;如何在不影响用户阅读的情况下…

Hadoop之HDFS分布式文件系统

HDFS简介 Hadoop Distributed File System (HDFS): HDFS 是 Hadoop 的分布式文件系统,它设计用于存储大量数据,并提供 高吞吐率的数据访问,通过将数据分块存储在多个节点上,实现数据的冗余存储和容错。 HDFS重要概念 HDFS 通过统一的命名空间目录树来定位文件; 另外,它…

zookeeper、kakfa添加用户加密

背景 zookeeper无权限访问到根目录 步骤 在kafka/config 目录中创建 vi config/zookeeper_jaas.conf在zookeeper_jaas.conf中添加 Server { org.apache.kafka.common.security.plain.PlainLoginModule required username"admin" password"12345" user_ad…

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

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

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

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

制作一个超小的docker镜像

在制作docker镜像我们都希望能够制作一个超小的镜像&#xff0c;那么该怎么做呢&#xff0c;网上有很多优化镜像大小的方法&#xff0c;今天就不在重复了&#xff0c;今天给大家分享一个从源头控制大小的方案。 Docker Scratch镜像是一个特殊的Docker镜像&#xff0c;它不基于任…

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

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

JS:获取鼠标点击位置

一、获取鼠标在目标元素中的点击位置 getClickPos.ts: export const getClickPos (e: MouseEvent) > {return {x: e.offsetX,y: e.offsetY,}; };二、获取鼠标在页面中的点击位置 getClickPos.ts: export const getPageClickPos (e: MouseEvent) > {return {x: e.pa…

算法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; 获取迅投…

日常排查问题技巧小结

文章目录 1. 写在最前面1.1 关于程序突然消失这件事 2. 排查消失的程序2.1 程序崩溃2.2 系统强杀程序2.2 迁移服务误拉任务2.3 真相 3. 碎碎念4. 参考资料 1. 写在最前面 「焦虑、烦躁解决不了任何问题&#xff0c;只会让问题变得更加难严重」。工作越久&#xff0c;对于工作的…

大模型日报2024-06-15

大模型日报 2024-06-15 大模型资讯 新技术提升大型语言模型推理能力 摘要: 一种新技术使得像GPT-4这样的大型语言模型能够通过编写Python代码&#xff0c;更准确地解决数值或符号推理任务。 大型语言模型革命性提升蛋白质序列理解 摘要: 研究人员将蛋白质序列与自然语言进行类比…

查看队列资源限额和使用情况

查看队列资源限额和使用情况 背景 LSF中的 limits 配置模块允许管理员很方便地设置集群资源限额&#xff0c;可以在队列、主机对、应用维度对用户使用的资源如slot/core,、任务数/jobs、内存/mem、交换区/swap&#xff0c;以及自定义资源比如许可证进行限制。 问题 在实际工…

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…