React-Quill 是Antd推荐使用的富文本编辑器，此文记录一下最近在项目中使用它遇到的一些问题。

首先，大家在百度相关资料时，应当搜索React-Quill，而不是Quill。

github点这里： https://github.com/zenoamaro/react-quill

安装依赖这些就都不说了，只记录干货....

调用示例：

<ReactQuill
   theme="snow"
   value={content || ''}
   onChange={onChange}
   modules={modules}
   formats={formats}
modules 是对编辑器功能的配置，此处是从组件的state中拿出来的，具体配置如下：
 
   modules: {
        toolbar: {
          container: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image'],
            ['clean'],
          handlers: {
            image() {
              imageHandler.call(this, props.action);
这里需要注意的是，toolbar的配置需要和formats属性想匹配，此处我是直接在组件外声明了一个全名变量：
 
const formats = [
  'header',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
特别说明的一点是：由于React-Quill默认是将图片转换成base64的。但是由于一般情况想生成出来的base64字符串会特别长，所以这个地方我们采用的方式时先将图片上传到服务端，然后用上传成功之后返回的url来替换掉图片的base64。Qeact-Quill提供了handlers属性来对图片进行单独处理，代码如下：
 
function imageHandler(action) {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();
  input.onchange = () => {
    const file = input.files[0];
    const fd = new FormData();
    fd.append('file', file);
    const hide = message.loading('上传中...', 0);
    upload(action, fd).then(res => {
      if (res) {
        const range = this.quill.getSelection();
        this.quill.insertEmbed(range.index, 'image', res.url);
        hide();
简述一下，大概方法就是利用Input File来上传图片的~这里的upload方法是我们自己封装的图片上传方法。最重要的一步是，需要在上传成功后的回调里对进行替换图片src的操作。首先通过this.quill拿到Quill实例，注意这里有一个大坑，在使用过程中始终拿不到这个Quill实例，后来发现需要将此处的this指向配置对象。所以此处的imageHandler函数是一个组件外的全局函数。
 
通过这件事情，发现JavaScript的this指向真是一个很重要的东西呀~刚开始其实是知道应该就是this指向的问题，但是尝试各种方法之后无法解决。后在我司前端主程大大的指点下解决了~手动比心心~
 
在这个过程中onChange函数需要将编辑器的值传递出来并在函数体中将值绑定到具体的字段上，这样就可以将该参数按照与后端约定好的方式发送过去即可。
                    React-Quill 是Antd推荐使用的富文本编辑器，此文记录一下最近在项目中使用它遇到的一些问题。首先，大家在百度相关资料时，应当搜索React-Quill，而不是Quill。github点这里：https://github.com/zenoamaro/react-quill安装依赖这些就都不说了，只记录干货....调用示例：&lt;ReactQuill   them...
				
react-native-richeditor
本插件借鉴了react-native-webview-richeditor的开源库。
react-native-richeditor可以实现文字与图形的混排，以及字体的加粗。
这版编辑器包含插入图片功能，所以需要事先安装react-native-image-picker
npm install react-native-image-picker --save
react-native link
之后就可以安装编辑器了
如果使用yarn的用户可以使用
yarn add react-native-image-picker
图标运用的是开源图标，需要进行添加
yarn add react-native-vector-icons
然后添加本库
在package.json中添加
"dependencies": {
		"prop-types": 
Webpack / ES6
 import Quill from 'quill' ;
import { ImageResize } from 'quill-image-resize-module' ;
Quill . register ( 'modules/imageResize' , ImageResize ) ;
const quill = new Quill ( editor , {
    // ...
    modules : {
        // ...
        imageResize : {
            // See optional "config" below
 :hundred_points: React Quill现在支持Quill v1.0.0！ 感谢@clemmy和@alexkrolick带来了这个期待已久的更改。 有许多重大更改，因此请务必阅读迁移指南。
npm install react-quill
yarn add react-quill
 特别感谢在1.0.0发布周期中做出贡献的每个人！
import ReactQuill from 'react-quill' ; // ES6
import * as ReactQuill from 'react-quill' ; // Typescript
const
				
首先 npm i quill 安装       (目前使用的  “quill”: “^1.3.7” 版)
components 文件下创建 QuillRichText 文件  >  index.js
import React, { Component } from 'react';
import Quill from "quill";
require("quill/dist/quill.snow.css");
import moment from 'moment';
import PropTypes 
hook封装
import React, { useEffect, useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const MyCompo
      container: '#toolbar',  // Selector for toolbar container
      handlers: {
        'bold': customBoldHandler
因为containe
				
##react中quill的使用
近期使用由于项目需要一款富文本编辑框，本来打算试着使用drift.js写一款富文本编辑器。但由于时间比较紧急最后选择引用第三方插件，在众多富文本插件中初步选择了Quill和CKEditor5，最后选择了简单便捷的Quill。下面是目录：
配置toolbar
toolbar进一步自定义字体
toolbar自定义上传图片
引入插件：
通过npm inst...
				
要在 React-Quill 编辑器中自定义行高，可以使用 Quill 自带的 line-height 模块。首先需要在 React-Quill 的配置中添加 line-height 模块，然后在需要自定义行高的地方调用该模块的 API。
以下是一个示例代码：
```javascript
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// 添加 line-height 模块
var lineHeight = Quill.import('attributors/style/line-height');
lineHeight.whitelist = ['1', '1.5', '2', '2.5', '3'];
Quill.register(lineHeight, true);
class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
    this.handleChange = this.handleChange.bind(this);
  handleChange(value) {
    this.setState({ text: value });
  render() {
    return (
      <ReactQuill
        value={this.state.text}
        onChange={this.handleChange}
        modules={{
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],  // 文字样式
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  // 标题
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],  // 列表
            [{ 'align': [] }],  // 对齐方式
            [{ 'color': [] }, { 'background': [] }],  // 文字颜色和背景色
            ['clean']  // 清除格式
          'line-height': {}  // 添加 line-height 模块
要注意的是，使用 line-height 模块设置行高时，需要在模块的 whitelist 中指定可用的行高选项，这里示例中设置了五个选项，分别为 1、1.5、2、2.5 和 3。在调用模块的 API 时，需要使用字符串形式的行高值，例如 `'1.5'`。