React中使用富文本编辑器Quill，支持粘贴图片

  • Z时代
  • 2024-01-10
  • 分类：综合

react

最近项目中需要用到富文本编辑器，并且客户明确提出需要实现可以直接截图粘贴到文本框中。

由于我们的前端是用react写的，于是就去参考了知乎的实现，发现知乎的富文本框是可以直接贴图进去的，但由于看不到源码，只能浏览器调试看了一下，发现他就是一个可编辑的div，贴图进去后就是在div中增加一个img标签。

本来想自己实现一个，但由于刚刚接触前端3个月，实在是没那个能力，于是就搜索各种富文本框尝试，最后找到一个可以实现贴图的的富文本框Quill。

先放地址：https://dwz.cn/ORcEz9fz

接下来简单说下在react中的使用方法：

package.json中引入

"quill-image-drop-module": "^1.0.3",

"react-quill": "^1.1.0",

使用quill

quill是支持模块扩展的，粘贴图片的功能就是通过quill-image-drop-module模块实现。

import ReactQuill, { Quill } from 'react-quill';

import { ImageDrop } from 'quill-image-drop-module';

import 'react-quill/dist/quill.snow.css';

// 在quiil中注册quill-image-drop-module

Quill.register('modules/imageDrop', ImageDrop);

quill的头部显示的功能按钮也是支持自定义配置的。这里在modules中声明imageDrop: true来开启贴图功能。

modules = {

    toolbar: [

      ['bold', 'italic', 'underline', 'strike', 'blockquote'],

      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],

      ['link', 'image'],

      ['clean'],

    ],

    imageDrop: true,

  };

formats = [

  'bold', 'italic', 'underline', 'strike', 'blockquote',

  'list', 'bullet', 'indent',

  'link', 'image',

];

下面正式定义Quill

<ReactQuill

    theme="snow"

    modules={this.modules}

    formats={this.formats}

    onChange={this.onQuillChange}

    defaultValue={this.state.value}

    placeholder="Please Input"

/>

效果图


onChange函数

// 当修改文本框的内容时，会自动调用onQuillChange函数

onQuillChange = (content, delta, source, editor) => {

    // content 是真实的DOM节点

    // delta 记录了修改的对象，下篇文章详述

    // source 值为user或api

    // editor 文本框对象，可以调用函数获取content, delta值

};

到这就结束了。

以上是 React中使用富文本编辑器Quill，支持粘贴图片 的全部内容， 来源链接： utcz.com/z/383201.html

回到顶部