React-Umeditor是非常好的一個富文字編輯器，非常多的自定義功能，這裡主要介紹新增圖片後，圖片的上傳以及外網的訪問及在編輯器內顯示。

實現這個流程需要三個步驟：

1. 阿里雲Oss的建立及配置
2. 本地服務地的部署，主要呼叫阿里雲Oss的api
3. 前端寫好React-Umeditor元件的呼叫，打包成靜態檔案，部署到本地伺服器

其中阿里雲Oss需要購買，自行百度哈。

這篇文章介紹前端的React-Umeditor使用

在github中已經介紹使用方法：github地址

我們主要是注意修改紅圈圈起來的部分，修改成我們自己的本地伺服器路徑。

紅圈圈起來的部分選項可以有：

• url
  : 外掛需要的欄位 上傳路徑 ，注意本地服務專案名
• type：外掛需要的欄位 非‘qiniu’為為本地伺服器 ，只要type不為“qiniu”，我們就可以自定義圖片上傳
• request:外掛需要的欄位 外掛需要的引數，獲取圖片地址 ，本地伺服器返回的欄位需要包括這裡設定的欄位，例如本地伺服器返回資料為 {'data': {'image_src': xxx} , 'status':'success'}，那麼request需要設為“image_src”
• name: 伺服器需要的欄位，就是表單引數名

現在做個示範，列出工程：

這個為react打包好的，把他複製到伺服器的webapp下，或者自定義路徑。

複製後

然後檢視預覽：

最後試試新增圖片：看到預覽圖啦

html預覽中顯示了圖片外網訪問的地址

 大功告成！