Springboot3+vue3实现富文本编辑器功能

wangeditor 官网

https://www.wangeditor.com/

安装

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

引入

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

初始化（表单中）

wangEditor 5 富文本字段可以直接和 form 中的字段使用 v-model 进行绑定

<el-form-item prop="content" label="详情">
          <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.content"
              :mode="mode"
              :defaultConfig="editorConfig"
              @onCreated="handleCreated"
            />
          </div>
        </el-form-item>

/*  wangEditor5 初始化开始 */
const editorRef = shallowRef() // 编辑器实例，必须用 shallowRef
const mode = 'default'
const editorConfig = { MENU_CONF:{} }
// 上传图片配置
editorConfig.MENU_CONF['uploadImage'] = {
  headers:{
    token:data.goods.token,
  },
  server: 'http://localhost:9999/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="内容" align="center">
          <template #default="scope">
            <el-button type="primary" @click="viewContent(scope.row.content)">点击查看</el-button>
          </template>
  </el-table-column>
  <el-dialog title="商品详情" v-model="data.viewVisible" width="60%" destroy-on-close>
     <div v-html="data.content" style="padding: 0 20px"></div>
   </el-dialog>

onst data = reactive({
  content:null,
  viewVisible:false,
})

const viewContent = (content) => {
  data.content = content
  data.viewVisible =true
}

后端文件上传接口

 /**
     * wang=editor 编辑器文件上传接口
     */
    @PostMapping("/wang/upload")
    public Map<String, Object> wangEditorUpload(MultipartFile file){
        String flag = System.currentTimeMillis() + "";
        String fileName = file.getOriginalFilename();
        try {
            String filePath = System.getProperty("user.dir") + "/files/";
            //  文件存储形式：时间戳-文件名
            FileUtil.writeBytes(file.getBytes(),filePath + flag + "-" + fileName);
            System.out.println(fileName + "--上传成功");
            Thread.sleep(1L);
        }catch (Exception e){
            System.err.println(fileName + "--上传失败");
        }
        String http ="http://localhost:9999/files/download/";
        Map<String, Object> resMap = new HashMap<>();
        // wangEditor 上传图片成功后，需要返回的参数
        resMap.put("errno",0);
        resMap.put("data", CollUtil.newArrayList(Dict.create().set("url", http + flag + "-" + fileName)));
        return resMap;
    }