使用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)
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
react,quill,base64上传,react,quill,图片上传,react,quill图片上传转成base64

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。