React中：富文本编辑器(react-quill),自定义上传图片到七牛云

1.组件封装

import React, { useState, useEffect, useRef } from 'react';
import ReactQuill from 'react-quill';
import { message } from 'antd';
import 'react-quill/dist/quill.snow.css';
import { getTokenApi } from '@/services/user/login';
import { randomWord } from '@/utils/index';
import { request } from 'umi';const Editor: React.FC<any> = (props) => {const { value, width, height, handleParams } = props;let refs: any = useRef(null);const [valueText, setValue] = useState('');const [widthText, setWidth] = useState('1010px');const [heightText, setHeight] = useState('300px');const modules: any = {toolbar: {container: [['bold', 'italic', 'underline', 'strike'], // toggled buttons['blockquote', 'code-block'],['link', 'image'],[{ header: 1 }, { header: 2 }], // custom button values[{ list: 'ordered' }, { list: 'bullet' }],[{ 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],handlers: {image() {imageHandler.call(this, props);},},},};// 自定义上传图片到七牛云const imageHandler = async (action) => {const input: any = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', 'image/*');input.click();const {data: { uploadToken },} = await getTokenApi({});//获取tokeninput.onchange = () => {const file = input.files[0];const formData = new FormData();formData.append('token', uploadToken);formData.append('key', randomWord(false, 40, 50));formData.append('file', file);const hide = message.loading('上传中...', 0);request('https://xxxxxxx', {// 七牛云上传图片域名地址method: 'POST',data: formData,headers: { 'Content-Type': 'application/json' },}).then((res) => {const url = 'https://wwwwwwww/' + res.key; // 获取url,图片预览地址let quill = refs?.current?.getEditor(); //获取到编辑器本身const cursorPosition = quill.getSelection().index; //获取当前光标位置quill.insertEmbed(cursorPosition, 'image', url); //插入图片quill.setSelection(cursorPosition + 1); //光标位置加1hide();});};};const handleHtml = (e) => {setValue(e);handleParams(e);};useEffect(() => {setWidth(width ? width : '1010px');setHeight(height ? height : '300px');}, []);useEffect(() => {setValue(value ? value : '');}, [value]);return (<div><ReactQuillref={refs}className="ql-editor" //组件要加上(className=“ql-editor”)样式类名,否则空格不回显modules={modules}value={valueText}onChange={handleHtml}style={{width: widthText,height: heightText,overflow: 'hidden',borderBottom: '1px solid #ccc',}}/></div>);
};export default Editor;

二、使用

import React, { useEffect, useState, useRef } from 'react';
import { Button, Modal, message, Space, Row, Col } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ReactQuill from '@/components/Global/ReactQuill';
import './index.less';const Index: React.FC = () => {const [htmlValue, setHtmlValue] = useState('');const handleParams = (e) => {setHtmlValue(e);};useEffect(() => {getRechargeGearList();}, []);return (<PageContainer><ReactQuillvalue={htmlValue}width={'900px'}height={'300px'}handleParams={handleParams}></ReactQuill></PageContainer>);
};
export default Index;

React中：富文本编辑器(react-quill),自定义上传图片到七牛云相关推荐

富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
记录React之富文本编辑器
主要知识点:contentEditable 以及 document.execCommand 日常使用的输入框,大多直接使用input,支持正常的文本操作,但是想要做复杂的内容输入,就需要一个富文本编辑 ...
react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...
【重点突破】—— React实现富文本编辑器
前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...
使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
【uEditor】引入富文本编辑器uEditor时，上传图片失败的原因
uEditor uEditor是百度开发的一款开源的富文本编辑器.官网地址:http://ueditor.baidu.com/website/ 使用教程请看官网文档前言如何引入我就不赘述了,官网有 ...
基于React的富文本编辑器——Braft Editor使用
antd 是基于 Ant Design 设计规范实现的高质量 React 组件库,倾向于只提供符合该规范且带有视觉展现的 UI 组件,也尽量不重复造轮子. 如果要在React项目中使用富文本编辑器, ...
百度富文本编辑器UEditor如何自定义配置toolbars工具条
UE.getEditor('editor', {toolbars: [[//工具条'fullscreen', 'source', 'undo', 'redo', 'bold', 'italic','u ...
2021 年 React 的 5 大富文本编辑器
5大富文本编辑器今天,富文本编辑器被用于许多应用中,包括简单的博客和复杂的内容管理系统.然而,选择一个并不容易,因为有很多具有不同功能的编辑器. 因此,在这篇文章中,我将评估5个React的富文本编 ...

React中：富文本编辑器(react-quill),自定义上传图片到七牛云

1.组件封装

React中：富文本编辑器(react-quill),自定义上传图片到七牛云相关推荐

最新文章

热门文章