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

news2024/11/8 19:40:21

目录

一、组件代码

二、参考文档


由于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 (<>
        <ReactQuill
            modules={{
                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.coloradmin.cn/o/1813526.html

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

相关文章

论文笔记:Frozen Language Model Helps ECG Zero-Shot Learning

2023 MIDL 1 intro 心电图&#xff08;ECG&#xff09;被广泛应用于检测各种心脏疾病&#xff0c;包括心律失常、心脏病发作和心力衰竭等近些年深度学习方法在心电图数据分类领域取得了不错的效果。 基于深度学习的ECG数据分类方法&#xff0c;通常以监督学习范式进行训练&am…

【个人博客搭建】(23)购买服务器、域名、备案

1、服务器主要是为了有一个公网的IP地址&#xff0c;方便我们可以通过网络随时访问 2、域名是对IP地址的一个替代。简单说IP地址可能不方便记忆&#xff0c;但是自己配置的域名会简单些&#xff0c;另外暴露IP地址也不安全。(虽然也能通过域名找到IP) 3、备案。这是政策。简单所…

观成科技:基于深度学习技术的APT加密流量检测与分类检测方案

一、前言 近年来APT攻击的案例屡见不鲜&#xff0c;给国家、企业以及个人的利益造成极大威胁。随着流量加密技术的不断成熟&#xff0c;许多APT组织倾向于将流量加密后进行传输&#xff0c;从而保护传输内容。由于加密流量的实际载荷已被加密&#xff0c;故采用原始的流量检测…

测试开发面经分享,面试七天速成 DAY 1

1. get、post、put、delete的区别 a. get请求&#xff1a; i. 用于从服务器获取资源。请求参数附加在URL的查询字符串中。 ii. 对服务器的请求是幂等的&#xff0c;即多次相同的GET请求应该返回相同的结果。 iii. 可以被缓存&#xff0c;可以被收藏为书签。 iv. 对于敏感数据不…

【python】docker-selenium 分布式selenium模拟浏览器 |可视化 或 后台运行selenium 部署与使用

一、分布式selenium 1、部署 docker-selenium Github官方地址如下&#xff1a; https://github.com/SeleniumHQ/docker-selenium?tabreadme-ov-file 执行安装指令&#xff1a; 1、这里可以将dashboard映射接口改为 14444&#xff08;记得开放安全组&#xff09; docker run …

微软在Windows上做了个安卓子系统…

前言 曾经小白想着如果Windows在不安装模拟器的情况下&#xff0c;可以安装并运行安卓软件&#xff0c;那这个功能一定很香。 在2021年&#xff0c;微软面向开发者推出WSA支持。在第二年的时候&#xff0c;用户就可以在Windows上使用安卓软件。 这个功能可把我乐坏了&#x…

阿里云的ALB如何实现http域名强制转到https域名

背景 通常我们申请域名之后&#xff0c;应用侧都会基于域名对应的ssl证书进下控制&#xff0c;目前通用的有商业版的负载均衡和开源的代理工具比如nginx,通过负载均衡工具一般都可以支持请求的协议是http或https 比如可以设置两个默认的端口80,443分别支持http或https,本文介绍…

品牌与产品:消费者决策的经济逻辑与品牌宣传的战略意义

在当今日益全球化的经济环境中&#xff0c;品牌与产品之间的关系对于企业的成功与否起着至关重要的作用。然而&#xff0c;在消费者做出购买决策时&#xff0c;他们到底是在选择产品本身&#xff0c;还是在选择附着在产品之上的品牌价值&#xff1f;同样&#xff0c;当客户选择…

C语言 | Leetcode C语言题解之第146题LRU缓存

题目&#xff1a; 题解&#xff1a; typedef struct {int key;int val;UT_hash_handle hh; } LRUCache;LRUCache* cache NULL; int g_capacity 0; LRUCache** lRUCacheCreate(int capacity) {g_capacity capacity;return &cache; }int lRUCacheGet(LRUCache** obj, int…

Docker|了解容器镜像层(2)

引言 容器非常神奇。它们允许简单的进程表现得像虚拟机。在这种优雅的底层是一组模式和实践&#xff0c;最终使一切运作起来。在设计的根本是层。层是存储和分发容器化文件系统内容的基本方式。这种设计既出人意料地简单&#xff0c;同时又非常强大。在今天的帖子[1]中&#xf…

Windows Docker 部署 VictoriaMetrics 数据库

一、简介 VictoriaMetrics&#xff08;VM&#xff09;是一个快速、高效、经济且可扩展的监控解决方案和时序数据库。它提供了数据存储、管理、处理和分析的强大功能&#xff0c;专注于时间序列数据&#xff0c;并具备高吞吐量和低延迟特性&#xff0c;适用于各类大规模数据场景…

FreeRTOS学习笔记-基于stm32(13)低功耗 Tickless 模式

一、stm32低功耗模式 STM32 本身就支持低功耗模式&#xff0c;如图有三种模式&#xff1a;睡眠(Sleep)模式&#xff1b;停止(Stop)模式&#xff1b;待机(Standby)模式。 二、低功耗 Tickless 模式 由于一般的应用中&#xff0c;处理器大量的时间都在处理空闲任务&#xff0c;所…

mysql中 什么是锁

大家好。上篇文章我们讲了事务并发执行时可能带来的各种问题&#xff0c;今天我们来聊一聊mysql面试必问的问题–锁。 一、解决并发事务带来问题的两种基本方式 1. 并发事务访问相同记录的情况 并发事务访问相同记录的情况大致可以划分为3种&#xff1a; 读-读情况&#xf…

如何用AI大模型打造个性化内容页面展示,提升用户阅读体验和内容传播效果

摘要 本文介绍了如何使用人工智能大模型进行个性化内容页面展示的方法和步骤&#xff0c;包括数据收集、数据处理、特征提取、模型训练、模型预测、数据分析等&#xff0c;以及它们对用户的阅读体验和内容的传播效果的影响和价值。 在数字化时代&#xff0c;内容是王者&…

RT-DETR详解之 Decoder 层

在上一篇博客中&#xff0c;博主已经讲解了如何利用Uncertainty-minimal Query Selection选择出好的特征&#xff0c;接下来便要将这些特征输入到Decoder中进行解码&#xff0c;需要注意的是&#xff0c;在RT-DETR的Encoder中&#xff0c;使用的是标准的自注意力计算方法&#…

【多重背包 动态规划】2585. 获得分数的方法数

本文涉及知识点 动态规划汇总 背包问题汇总 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LeetCode2585. 获得分数的方法数 考试中有 n 种类型的题目。给你一个整数 target 和一个下标从 0 开始的二维整数数组 types &#xff0c;其中 …

TCP三次握手和四次挥手过程简介

接上篇 传输层部分 链路层、网络层、传输层和应用层协议详解分析-CSDN博客文章浏览阅读689次&#xff0c;点赞10次&#xff0c;收藏15次。wireshark抓包分析-CSDN博客wireshark是网络包分析工具网络包分析工具的主要作用是尝试捕获网络包&#xff0c;并尝试显示包的尽可能详细…

bugku---misc---贝斯手

1、下载附件&#xff0c;解压之后得到下面文件 2、zip需要密码&#xff0c;但是介绍里面给出了提示 3、再结合图片&#xff0c;是古力娜扎&#xff0c;搜索了以下她的生日是1992。应该就是密码 4、破解flag.zip得到一段文本 5、结合题目描述说的贝斯手&#xff0c;猜测应该是b…

win11 默认程序中找不到typora 和设置typora为md的默认打开程序

1.找到任意一个.md文件 2.在任意一个.md文件的上面右键&#xff0c;点击--》打开方式--》选择其他应用--》在电脑上选择应用--》&#xff08;如果列表中没有&#xff0c;拉到最下面&#xff09;在电脑上选择应用--》弹出文件浏览框 3.找到安装typora的时候的exe文件&#xff0c…

Flutter打包网络问题解决办法

问题情况":app:compileReleaseJavaWithJavac" 报错的最主要问题其实在下一句 Failed to find Build Tools revision 30.0.3,请查看自己的Android sdk版本,比如我的就是’34.0.0’版本. 解决办法: 在app/build.gradle中的android下添加,即可 buildToolsVersion 3…