這里貼出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 上传成功修改图片路径的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。