wangeditor 官网
https://www.wangeditor.com/
安装
//cd vuenpm 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%"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":mode="mode"/><Editorstyle="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.valueif(editor == null)returneditor.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 = contentdata.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;}