1、安裝wangeditor

1 npm install wangeditor-for-react

2、引入

1 import ReactWEditor from 'wangeditor-for-react';

3、使用

<ReactWEditor
  defaultValue={'<h1>標題</h1>'}
  linkImgCallback={(src,alt,href) => {
    // 插入網路圖片的回撥事件
    console.log('圖片 src ', src)
    console.log('圖片文字說明',alt)
    console.log(
 
'跳轉連結',href)
  }}
  onlineVideoCallback={(video) => {
    // 插入網路視訊的回撥事件
    console.log('插入視訊內容', video)
  }}
  onChange={(html) => {
    console.log('onChange html:', html)
  }}
  onBlur={(html) => {
    console.log('onBlur html:', html)
  }}
  onFocus={(html) => {
    console.log('onFocus html:', html)
  }}
 
/>

這裡會提示你要安裝 npm i --save-dev @types/wangeditor-for-react

執行這行程式碼一直報404找不到這個依賴包

這個時候我們就要去.d.ts檔案中去適配

適配

在src下新建一個檔案 declaration.d.ts

寫入程式碼

declare module 'wangeditor-for-react' {
  const wangeditor: any;
  export = wangeditor
}

報錯消失了，富文字也可以正常使用

參考文件：https://www.wangeditor.com/doc/pages/09-%E7%94%A8%E4%BA%8EVue%E5%92%8CReact/