1

我正在使用react-quill 1.3.3。我还允许在帖子中添加图像。quill 现在的工作方式是，它只是将图像转换为字符串并将其全部作为文本发送。问题是这似乎需要大量额外的内存（数据）。例如，对于只有 20K 的图像，我收到 413 错误，“413（有效负载太大）”等。真正的方法是将图像转换为链接并将图像保存到云服务。我已经有用于保存头像图像的云服务，因此可以复制。问题是，我们如何让 react-quill 做到这一点？Quill 似乎是一个将图像转换为文本的一站式商店，所以我们将不得不做一些特殊的编码，我不知道该怎么做。

这是羽毛笔组件：

import React from 'react'

export default class PostEditor extends React.Component {
  constructor(props) {
    super(props)
    this.state = { editorHtml: '', theme: 'snow' }
    this.handleChange = this.handleChange.bind(this)
    if (typeof window !== 'undefined') {
      this.ReactQuill = require('react-quill');
      require('katex');
      require('react-quill/dist/quill.snow.css');
    }
  }

  handleChange (value) {
    this.props.onChange(value);
  }

  render() {
    const ReactQuill = this.ReactQuill
    const { value } = this.props;
    
    if (typeof window !== 'undefined' && ReactQuill) {
      return (
        <ReactQuill
          onChange={this.handleChange}
          theme="snow"
          value={value}
          modules={PostEditor.modules}
        />
      )
    } else {
      return <textarea />;
    }
  }
}

PostEditor.modules = {
  toolbar: [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    [{size: []}],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, 
     {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image', 'video','formula'],
    ['clean']
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  }
}

PostEditor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'video', 'formula'
]

// PostEditor.propTypes = {
//   placeholder: PropTypes.string,
// }

这是一些类似的工作，但我不知道如何将此代码添加到我的应用程序中。

我所期待的是，我们应该能够使用 quill 工具栏上的“添加图像”按钮，并且所见即所得的工作正常，并且图像是从用户的硬盘驱动器中获取并放置在格式正确的文本中。不同之处在于，当您保存时，图像会发送到您的云存储，并且链接会粘贴到保存的 html 中。当您查看帖子时，该链接会再次扩展为图像。

如果有人知道为什么图像被转换成如此大的尺寸（超过 20MB），请告诉我，因为我也可能只是接受它作为解决方案。

以下是包含 quill 的组件部分的代码：

 {this.isActiveField('postText') && (
          <Fieldset className="mt2">
            <PostEditor
              id="postText"
              onChange={this.onChange}
              value={postText}
            />
            <Snackbar
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              open={!!ErrorHandling.getFieldErrors(errors, 'postText')}
              autoHideDuration={4000}
              onClose={this.handleClose}
              ContentProps={{
                'aria-describedby': 'message-id',
              }}
              message={<span id="message-id">{ErrorHandling.getFieldErrors(errors, 'postText')}</span>}
              action={[
                <IconButton
                  key="close"
                  aria-label="Close"
                  color="inherit"
                  className={classes.close}
                  onClick={this.handleClose}
                >
                  <CloseIcon />
                </IconButton>,
              ]}
            />
          </Fieldset>
        )}

编辑：我制定了第二个解决方案。在我的 Apollo 服务器代码中，我按照这里的建议添加了 bodyParser 。它现在似乎工作正常。

4

0 回答 0