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;
