npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

import '@wangeditor/editor/dist/css/style.css'//引入css
import {onBeforeUnmount,shallowRef} from "vue";
import {Editor,Toolbar} from '@wangeditor/editor-for-vue'

<el-table-column label="封面">
          <template #default="scope">
            <!-- 使用 el-image 標簽顯示圖片 -->
            <el-image v-if="scope.row.fengMian" :src="scope.row.fengMian" :preview-src-list=[scope.row.fengMian] preview-teleported style="width: 90px; height: 80px; " />
          </template>
        </el-table-column>

<div style="border: 1px solid #ccc;width: 100%">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :mode="mode"
            />
            <Editor
                style="height: 500px;overflow-y: hidden"
                v-model="data.form.neiRong"
                :mode="mode"
                :defaultConfig="editorConfig"
                @onCreated="handleCreated"
            />
          </div>

/*wangeditor5初始化*/
const baseurl= 'http://localhost:8080'
const editorRef=shallowRef()//編輯器實例，必須用shallowRef
const mode= 'default'
const editorConfig={ MENU_CONF:{} }
//圖片上傳配置
editorConfig.MENU_CONF['uploadImage'] = {
  server:baseurl + '/files/wang/upload',//服務器上傳接口
  fieldName:'file'//服務器圖片上傳接口參數
}
//組件銷毀時，也及時銷毀編輯器，否則可能會造成內存泄漏
onBeforeUnmount(()=>{
  const editor=editorRef.value
  if (editor == null) return
  editor.destroy()
})
//記錄editor實例，重要！
const handleCreated = (editor) =>{
  editorRef.value=editor
}
/*wangeditor5初始化結束*/

<el-table-column label="內容">
          <template #default="scope">
            <el-button type="primary" @click="view(scope.row.neiRong)">查看內容</el-button>
          </template>
        </el-table-column>

const view = (neiRong) =>{
  data.neiRong=neiRong
  data.viewVisible=true
}
const data=reactive({
    viewVisible:false,
})

@PostMapping("/wang/upload")
    public Map<String,Object> wangEditorUpload(MultipartFile file){
        String originalFilename = file.getOriginalFilename(); //xxx.png
        if (!FileUtil.isDirectory(filePath)){//如果目錄不存在需要先創建目錄
            FileUtil.mkdir(filePath);//創建一個files目錄
        }
        //提供文件存儲的完整的路徑
        //給文件名加一個唯一的標識
        String fileName=System.currentTimeMillis() + "_" +originalFilename;//1234566721_xxx.png
        String realPath=filePath+fileName;
        try{
            FileUtil.writeBytes(file.getBytes(),realPath);
        } catch (IOException e) {
            e.printStackTrace();
            throw new CustomException("500","文件上傳失敗");
        }
        //返回一個網絡鏈接
        //http://localhost:8080/files/download/xxx.png
        String url="http://localhost:8080/files/download/"+fileName;
        Map<String,Object> resMap= new HashMap<>();
        List<Map<String,Object>> list= new ArrayList<>();
        Map<String,Object> urlMap= new HashMap<>();
        urlMap.put("url",url);
        list.add(urlMap);
        resMap.put("error",0);
        resMap.put("data",list);
        return resMap;
    }

<el-dialog title="內容" v-model="data.viewVisible" width="50%" :close-on-click-modal="false" destroy-on-close>
      <div class="editor-content-view" style="padding: 20px" v-html="data.neiRong"></div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.viewVisible = false">關閉</el-button>
      </span>
      </template>
    </el-dialog>