React使用富文本CKEditor 5,上传图片并可设置大小

上传图片

基础使用(标题、粗体、斜体、超链接、缩进段落、有序无序、上传图片)
官网查看:https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html

安装依赖

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

使用

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';<CKEditoreditor={ ClassicEditor }data="<p>Hello from CKEditor&nbsp;5!</p>"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();console.log( { event, editor, data } );} }onBlur={ ( event, editor ) => {console.log( 'Blur.', editor );} }onFocus={ ( event, editor ) => {console.log( 'Focus.', editor );} }extraPlugins={[(editor) => {editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {return new MyUploadAdapter( loader );
};/>

上传图片 并可设置大小

方法:使用online builder
在这里插入图片描述

选中需要的插件,一直next step ,然后下载
在这里插入图片描述

把图片相关的插件选中,add
在这里插入图片描述
默认选择,next step
在这里插入图片描述

解压后

npm i #安装依赖npm run build #打包

把打包后文件build/cheditor.js放进react项目的src/components/Editor/ckeditor.js

react项目中使用

在这里插入图片描述

import { PageContainer } from '@ant-design/pro-components';
import { Access, useAccess } from '@umijs/max';
import { Button } from 'antd';
import { CKEditor } from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@/components/Editor/ckeditor';
const AccessPage: React.FC = () => {const access = useAccess();return (<PageContainerghostheader={{title: '权限示例',}}><Access accessible={access.canSeeAdmin}><Button>只有 Admin 可以看到这个按钮</Button></Access><div style={{ marginTop: 40}}><CKEditoreditor={ClassicEditor}config={{toolbar: {items: ['heading','|','bold','italic','link', //链接'bulletedList', //无序排序'numberedList', //有序排序'outdent','indent','|','imageUpload','blockQuote','insertTable','mediaEmbed','undo','redo']},image: { toolbar: ['imageStyle:block','imageStyle:side','|','toggleImageCaption','imageTextAlternative','|','linkImage']}}}extraPlugins={[(editor) => {editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {return new MyUploadAdapter( loader );
};}]}/></div></PageContainer>);
};export default AccessPage;

图片上传adapter

上传图片逻辑

MyUploadAdapter.js

class MyUploadAdapter {constructor( loader ) {// The file loader instance to use during the upload.this.loader = loader;}// Starts the upload process.upload() {// Return a promise that will be resolved when the file is uploaded.return loader.file.then( file => {//上传图片逻辑,必须是异步的,否则在富文本框无法正常渲染图片return {default: ''//图片链接}} );}// Aborts the upload process.abort() {}
}
{default: 'http://example.com/images/image–default-size.png'
}

图片上传upload adapter:https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html

详细查看官网更多内容:https://ckeditor.com/ckeditor-5/

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

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

相关文章

cookie、session和Token的区别?JWT又是什么?单点登录又是什么?头大?快进来看看,一文帮你捋清楚~

目录 0、HTTP是无状态的 1、前端标记cookie 1.1、cookie限制空间范围 1.2、cookie限制时间范围 1.3、cookie限制使用方式 2、服务端存储session库 2.1、我们先来简单聊聊session是什么&#xff1f; 2.2、session的存储方式 2.3、session的过期和销毁 2.4、session的分…

hugetlb核心组件

1 概述 hugetlb机制是一种使用大页的方法&#xff0c;与THP(transparent huge page)是两种完全不同的机制&#xff0c;它需要&#xff1a; 管理员通过系统接口reserve一定量的大页&#xff0c;用户通过hugetlbfs申请使用大页&#xff0c; 核心组件如下图&#xff1a; 围绕着…

十年老程序员分享13个最常用的Python深度学习库和介绍,赶紧收藏码住!

文章目录 前言CaffeTheanoTensorFlowLasagneKerasmxnetsklearn-theanonolearnDIGITSBlocksdeepypylearn2Deeplearning4j关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案…

选择合适的Python Web框架

Python 是一种功能强大的编程语言&#xff0c;广泛应用于 Web 开发领域。FastAPI 和 Flask 是 Python Web 开发中最受欢迎的两个框架。本文将对 FastAPI 和 Flask 进行综合对比&#xff0c;探讨它们在语法和表达能力、生态系统和社区支持、性能和扩展性、开发工具和调试支持、安…

MySQL数据库之表操作

目录 表的操作1.创建表创建表案例 2.查看表结构3.修改表4.删除表 表的操作 1.创建表 语法&#xff1a; CREATE TABLE table_name (field1 datatype,field2 datatype,field3 datatype ) character set 字符集 collate 校验规则 engine 存储引擎;说明&#xff1a; field 表示列…

无需专线、无需固定公网IP,各地安防数据如何高效上云?

某专注于安防领域的企业&#xff0c;供机场、金融、智慧大厦等行业&#xff0c;包括门禁系统、巡更系统、视频监控在内的整体解决方案。 在实际方案交付过程中&#xff0c;往往需要在多地分支机构分别部署相应的安防设备&#xff0c;并将产生的数据实时统一汇总至云平台进行管理…

SpringBoot项目打包与运行

1.clean生命周期 说明&#xff1a;为了项目能够正确打包&#xff0c;先清理打包文件。 2.package生命周期 说明&#xff1a;打包后生成以下目录。 2.1问题 说明&#xff1a;springboot_08_ssmp-0.0.1-SNAPSHOT.jar中没有主清单属性。 2.2解决 说明&#xff1a;注释skip&…

吃透BGP,永远绕不开这些基础概述,看完再也不怕BGP了!

你们好&#xff0c;我的网工朋友。 总有人在私信里抱怨&#xff0c;BGP实在是太难了&#xff01; 一是这玩意儿本来就很复杂&#xff0c;需要处理大量的路由信息和复杂的算法&#xff1b;再一个是需要你有一定的实战经验才能深入理解运作。 虽然BGP确实有一定难度&#xff0c…

JSP 中医知识管理系统myeclipse开发sql数据库BS模式java编程网页结构

一、源码特点 JSP 中医知识管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;比较流行的ssh框架系统具有完整的源代码和数据库&#xff0c;myeclipse开发系统主要采用B/S模式开发。 javaWeb中医知识系统 二、功能介绍 此次系统主要…

stm32 ADC

目录 简介 stm32的adc 框图 ①电压输入范围 ②输入通道 ​编辑③ADC通道 ④ADC触发 ⑤ADC中断 ⑥ADC数据 ⑦ADC时钟 ADC的四种转换模式 hal库代码 标准库代码 简介 自然界的信号几乎都是模拟信号&#xff0c;比如光亮、温度、压力、声音&#xff0c;而为了方便存储、…

Ps:PSDT 模板文件

自 Photoshop CC 2015.5 版以后&#xff0c;Ps 中新增了一种文件格式&#xff1a;.PSDT。 说明&#xff1a; PSD、PDD、PSDT 都是 Ps 的专用文件格式&#xff0c;需要继续在 Ps 中进行编辑的文件可存为此类格式。 PSD Photoshop document Photoshop 默认文档格式&#xff0c;支…

8-3、T型加减速单片机程序【51单片机控制步进电机-TB6600系列】

摘要&#xff1a;根据前两节内容&#xff0c;已完成所有计算工作&#xff0c;本节内容介绍具体单片机程序流程及代码 一、程序流程图 根据前两节文章内容可知&#xff0c;T型加减速的关键内容是运动类型的判断以及定时器初值的计算&#xff0c;在输出运动参数后即可判断出运动…

应用系统集成-Spring Integration

应用系统集成-Spring Integration 图1 EIP 消息系统模式全景图。 Spring Integration 是系统集成的一个实现框架&#xff0c;提供了对EIP核心概念&#xff1a;Endpoint、Message、Channel、Router、Translator的抽象及相关框架实现&#xff0c;使得基于Spring Integration进行…

策略模式在数据接收和发送场景的应用

在本篇文章中&#xff0c;我们介绍了策略模式&#xff0c;并在数据接收和发送场景中使用了策略模式。 背景 在最近项目中&#xff0c;需要与外部系统进行数据交互&#xff0c;刚开始交互的系统较为单一&#xff0c;刚开始设计方案时打算使用了if else 进行判断&#xff1a; if(…

【Redis】SSM整合Redis注解式缓存的使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Redis》。&#x1f3af;&#x1f3af; &#x1f4…

机器学习中的关键组件

机器学习中的关键组件 数据 每个数据集由一个个样本组成&#xff0c;大多时候&#xff0c;它们遵循独立同分布。样本有时也叫作数据点或数据实例&#xff0c;通常每个样本由一组称为特征或协变量的属性组成。机器学习会根据这些属性进行预测&#xff0c;预测得到的称为标签或…

Intel oneAPI笔记(2)--jupyter官方文档(oneAPI_Intro)学习笔记

前言 本文是对jupyterlab中oneAPI_Essentials/01_oneAPI_Intro文档的学习记录&#xff0c;包含对SYCL、DPC extends SYCL、oneAPI Programming models等介绍和SYCL代码的初步演示等内容 oneAPI编程模型综述 oneAPI编程模型提供了一个全面而统一的开发人员工具组合&#xff0…

在Linux系统下部署Llama2(MetaAI)大模型教程

Llama2是Meta最新开源的语言大模型&#xff0c;训练数据集2万亿token&#xff0c;上下文长度是由Llama的2048扩展到4096&#xff0c;可以理解和生成更长的文本&#xff0c;包括7B、13B和70B三个模型&#xff0c;在各种基准集的测试上表现突出&#xff0c;最重要的是&#xff0c…

OSPF 高级特性3

目录 一、OSPF安全特性 二、加快收敛 三、缺省路由 四、路由控制 五、显示OSPF的错误统计信息 附录E&#xff08;了解&#xff09; 六、OSPF防环 七、OSPF选路原则 八、OSPF综合实验 一、OSPF安全特性 1、OSPF报文验证&#xff1a; 区域验证模式&#xff1a;在区域下配…