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 上传成功修改图片路径的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。