您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
使用react-quill富文本编辑器,里面处理图片是默认转成base64,提交到后台的时候文件太大,因此这里改写处理image的逻辑,改成上传到服务器。
具体代码如下:
配置1
import Quill from 'quill' import ReactQuill from 'react-quill' import 'react-quill/dist/quill.core.css' import 'react-quill/dist/quill.snow.css' import QuillEmoji from 'quill-emoji' import 'quill-emoji/dist/quill-emoji.css' Quill.register({ 'modules/emoji-toolbar': QuillEmoji.ToolbarEmoji, // 'modules/emoji-textarea': QuillEmoji.TextAreaEmoji, 'modules/emoji-shortname': QuillEmoji.ShortNameEmoji }) const toolbarContainer = [ [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'font': [] }], [{ 'header': 1 }, { 'header': 2 }], // custom button values ['bold', 'italic', 'underline', 'strike'], // toggled buttons [{ 'align': [] }], [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript ['blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'color': [] }, { 'background': [] }], ['emoji', 'image', 'video', 'link'], ['clean'] ]
配置2
<ReactQuill ref={ref => this.quillRef = ref} placeholder="填写活动详情~" theme="snow" value={this.state.detailTpl} onChange={this.handleChangeDetail} modules={{ toolbar: { container: toolbarContainer, handlers: { image: this.imageHandler } }, 'emoji-toolbar': true, // 'emoji-textarea': true, 'emoji-shortname': true, }} />
图片处理方法
imageHandler = () => { this.quillEditor = this.quillRef.getEditor() const input = document.createElement('input') input.setAttribute('type', 'file') input.setAttribute('accept', 'image/*') input.click() input.onchange = async () => { const file = input.files[0] const formData = new FormData() formData.append('quill-image', file) const res = await uploadFile(formData) const range = this.quillEditor.getSelection() const link = res.data[0].url // this part the image is inserted // by 'image' option below, you just have to put src(link) of img here. this.quillEditor.insertEmbed(range.index, 'image', link) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。