NextJS开发:nextjs中使用CkEditor5

2023-11-20 17:30
文章标签 使用 开发 nextjs ckeditor5

本文主要是介绍NextJS开发:nextjs中使用CkEditor5,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

NextJS项目中需要使用CkEditor5作为富文本编辑器,按照官网React CkEditor5手册使用出现如下错误:

node_modules/@ckeditor/ckeditor5-react/dist/index.js (5:242) @ eval⨯ ReferenceError: self is not defined

还是因为nextjs的服务器端渲染造成的错误,富文本编辑器一般用在表单提交页面,没有使用ssr的必要,想要解决上面问题,动态导入组件,禁用ssr就可以解决。

1、封装ckeditor组件

"use client"import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';export function CustomCkEditor(props: {data: string, onChange: (content: string)=>void}) {const editorConfiguration = {toolbar: ['heading', //类型'|','bold', //加粗'italic', //斜体'link', //超链接'bulletedList',// 无序列表'numberedList', //有序列表'|','indent', //左缩进'outdent', //右缩进'|','imageUpload', //图片上传'blockQuote', //引用'insertTable', //插入图标//'mediaEmbed', //视频上传'undo', //撤销'redo'//重做]};return (<CKEditorconfig={ editorConfiguration }editor={ ClassicEditor }data={ props.data }onReady={ editor => {// You can store the "editor" and use when it is needed.console.log( 'Editor is ready to use!', editor );} }onChange={ ( event, editor ) => {const data = editor.getData();props.onChange(data)console.log( { event, editor, data } );} }onBlur={ ( event, editor ) => {console.log( 'Blur.', editor );} }onFocus={ ( event, editor ) => {console.log( 'Focus.', editor );} }/>)
}

2、动态导入的Form组件

"use client"import React from "react";
import { CustomCkEditor } from "@/components/app/custom-ckeditor";
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"export function ReleaseForm(props: {}) 
{const [title, setTitle] = React.useState("");const [content, setContent] = React.useState("");const buildCkEditor = () => {return (<div className="release-ckeditor w-full overflow-visible text-black"><CustomCkEditor data={content} onChange={(data: string)=>setContent(data)}/></div>)}const handleSubmit = () => {}return (<><div className="mx-auto mt-5 lg:w-4/5 overflow-visible p-10 bg-white dark:bg-gray-900"><div className="text-lg font-bold">发布帖子</div><div className="w-full mt-5"><Label className=" text-base ">标题 <span className="ml-2 text-xs">(最多60)</span></Label><Input value={title} placeholder="请输入标题" className="mt-1 focus-visible:ring-0" onChange={(e)=>{setTitle(e.target.value)}}/><div className="h-4 text-red-600 text-xs mt-1"></div></div><Label className=" text-base">内容</Label><div className=" h-1"></div>{buildCkEditor()}<div className="w-full text-center"><Button className="mt-8 w-28" onClick={handleSubmit}>提交</CustomButton></div></div></>)
}

3、导入Form、禁用ssr

"use client"
import React from "react";
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { CustomButton } from "@/components/app/custom-button";
import { ReleasePropsDialog } from "./(components)/release-props-dialog";import dynamic from 'next/dynamic'
import { KeyPair } from "@/define/type";
//import { ReleaseForm } from "./(components)/release-form";export default function ForumReleasePage({ params }: { params: { topic: string } }) {//动态导入,禁用ssr,否则报错ReferenceError: self is not definedconst ReleaseForm = dynamic(() => import('./(components)/release-form').then((mod) => mod.ReleaseForm), { ssr: false })return (<><ReleaseForm/></>)
}

注意:这里之所以把所有表单界面和表单业务操作封装到ReleaseForm组件内,是因为测试发现如果只是直接动态导入CustomCkEditor,当绑定的内容改变,动态组件就会重新加载刷新出现闪烁现象

这篇关于NextJS开发:nextjs中使用CkEditor5的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/396263

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计(扩展版本)二、核心算法深入解析2.1 自

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命