react-quill的使用

2 篇文章 0 订阅
1 篇文章 0 订阅
安装
npm i react-quill
引入
import ReactQuill from 'react-quill'; 
import 'quill/dist/quill.snow.css';
state里面写配置 这是我的配置 也可以根据官方配置,这里的图片我用的是自定义上传再插入,特别注意:要改变this指向
this.state={
			text:"",
            modules: {
                toolbar: {
                  container: [
                    [{ header: [1, 2,3, 4, 5, 6, false] }],
                    ['bold', 'italic', 'underline', 'strike', ],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    [{ 'align': [] }],
                    [{ 'color': [] }, { 'background': [] }],
                    ['link', 'image'],
                    ['clean']
                                  
                  ],
                  //如果不自定义上传下面的可以不要
                  handlers: {
                        image() {
                            imageHandler.call(this, props.action);
                        },
                    }
                },
            },//富文本配置
            
  }
  this.handleChange = this.handleChange.bind(this)
图片上传 message是antd组件 这里我把函数定义到 class 上边了全局函数,如果不写自定义上传图片,他会自动转换成base64 ,
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);
            //这里写自己的接口
            axios({
                    method: 'post',
                    url: '',
                    headers:{'Content-Type': 'multipart/form-data'},
                    data:fd
                }).then((res) => {
                    const range = this.quill.getSelection();
                    this.quill.insertEmbed(range.index, 'image', res."接口返回的地址");
                    let index = range ? range.index : 0;
                    this.quill.setSelection(index + 1);//光标位置加1
                    hide();
                })
        }
    }
获取富文本内容,这里的this指向富文本不指向class ,要在构造器里改变this指向
 //富文本内容
    handleChange(value) {
        console.log(value);
        this.setState({
            text:value
        })
    }
组件,一定要加上这个class名字,否则空格不回显(className=“ql-editor”)
  <ReactQuill
       theme="snow"
        value={ this.state.text }
        onChange={this.handleChange}
        modules={modules}
        className=" ql-editor"
    />
展示页面也要加上 这个 class名字
<div dangerouslySetInnerHTML={{__html: this.state.text}} className="ql-editor"></div>
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值