react simditor 上传成功修改图片路径

这里贴出simditor官方文档：http://simditor.tower.im/docs/doc-usage.html

1、npm install simditor

2、直接贴代码了

import React from 'react';
import Simditor from "simditor";
require("simditor/styles/simditor.css");


export default class Test extends React.Component {
    componentDidMount =()=> {
            this.initEditor();
    };
    initEditor = () => {
        let config = {
            placeholder: "内容",
            defaultImage: 'images/image.png',
            params: {},
            tabIndent: true,
            toolbar: [ //工具条
                'title',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'fontScale',
                'color',
                'link',
                'hr',
                'image',
                'indent',
                'outdent',
                'alignment',
            ],
            upload: {
                url: "", //文件上传的接口地址
                // params: {
                //     appid: "",
                //     secret: "",
                // }, //指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'file', //服务器端获取文件数据的参数名
                connectionCount: 1,//文件上传的个数
                leaveConfirm: '正在上传文件',

            },

            toolbarFloat: true, //工具条浮动
            toolbarFloatOffset: 0, //工具条浮动偏移量，具体看官方文档
            toolbarHidden: false,
            pasteImage: false,
            cleanPaste: false,
            textarea: document.getElementById("container") //这里textarea标签里的id对应
        };

        this.editor = new Simditor(config);// 初始化编辑器
        this.editor.setValue("");//富文本初始内容
        this.editor.uploader.on('uploadsuccess', (res,file,mask)=>{
            //获得上传的文件对象
            let img = file.img;
            console.log(res); 
            console.log(file);//simditor的文件对象
            console.log(mask);//mask为后台接口地址返回来的参数
            
            if(mask.code===200){
                alert("上传成功");
                img.attr('src',"http://服务器图片路径.jpg");//重新给img标签的src属性赋值图片路径
            }else {
                alert("图片上传失败,请重新上传");
            }


        });

        // //监听改变富文本改变事件，更多事件看官方文档
        // this.editor.on("valuechanged", (e, src) => {
        //
        // });

    }

    getValue = () => {
        console.log(this.editor.getValue().trim()); //点击按钮获取富文本里的内容
    };

    render () {
        return (
            
                <div>
                    <Button onClick={this.getValue}>发布</Button>
                    <textarea id="container" autoFocus></textarea> //这里id与上面对应
                </div>
        );
    }
}

新手上路，如有错误的地方还望指正~

最后

以上就是执着火车为你收集整理的react simditor 上传成功修改图片路径的全部内容，希望文章能够帮你解决react simditor 上传成功修改图片路径所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。