1、wangEidt需要安装基础包和对应vue,react版本的包
yarn add @wangeditor/editor
v2
yarn add @wangeditor/editor-for-vuev3
yarn add @wangeditor/editor-for-vue@next
找到打包配置文件
修改base.conf
找到对应代码添加
resolve('node_modules/@wangeditor')
<!-- 以下是组件封装 -->
<template> <div> <div style="border: 1px solid #ccc; margin-top: 10px"> <!-- 工具栏 --> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /> <!-- 编辑器 --> <Editor :style="{ height: height, overflowY: 'hidden' }" :defaultConfig="{ ...editorConfig, ...config }" v-model="htmlString" :disabled="isDisabled" @onChange="onChange" @onCreated="onCreated" /> </div> </div></template><script>import { Editor, Toolbar } from '@wangeditor/editor-for-vue'import Storage from '@/utils/storage'import axios from 'axios'import { api } from '~/ui-domain'import Vue from 'vue'export default { props: { value: { type: String, default: '' }, height: { type: String, default: '800px' }, config: { type: Object, default: () => { return {} } }, isDisabled: { type: Boolean, default: false } }, components: { Editor, Toolbar }, data() { return { editor: null, htmlString: '', toolbarConfig: { // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ], //excludeKeys 需要排除的菜单 excludeKeys: [ 'insertVideo', // 删除视频 'uploadVideo', 'group-video', 'insertImage', // 删除网络图片上传 'insertLink', // 删除链接 'insertTable', // 删除表格 'codeBlock' // 删除代码块 ] }, editorConfig: { placeholder: '请输入内容...', // 所有的菜单配置，都要在 MENU_CONF 属性下 MENU_CONF: { // 自定义上传图片 uploadImage: { // server: api.base + "shop/upload/uploadServer", // headers: Storage.getItem("headers"), allowedFileTypes: ['image/*'], // 自定义上传 async customUpload(file, insertFn) { // 自己实现上传，并得到图片 url alt href // 最后插入图片 // if (!(file.type === "image/jpeg" || file.type === "image/png")) { // message.warning("该图片格式不符合要求！"); // return; // } if (file.size > 1024 * 1024 * 2) { Vue.prototype.$message.warning('图片大小不能超过2M！') return } const formData = new FormData() formData.append('file', file) // console.log(Storage.getItem("headers")); try { const { data: { data } } = await axios.post(api.base + 'shop/upload/uploadServer', formData, { headers: Storage.getItem('headers') }) insertFn(data.url, data.name, data.url) } catch (e) { Vue.prototype.$message.warning('请勿频繁操作，或上传同一张图片') } } } } } } }, mounted() {}, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错 // 创建之后回显当前值 this.htmlString = this.value || '' }, onChange(editor) { // console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容\ if (this.isDisabled) { this.editor.disable() return } this.$emit('input', editor.getHtml().replace(/<p><\/p>/g, '')) }, getEditorText() { const editor = this.editor if (editor == null) return }, printEditorHtml() { const editor = this.editor if (editor == null) return } }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！ }, watch: { value(n) { this.htmlString = n } }}</script><style src="@wangeditor/editor/dist/css/style.css"></style><style>/* 隐藏全屏显示按钮 */.w-e-toolbar .w-e-bar-item:last-child .w-e-menu-tooltip-v5 { display: none;}</style>
..使用方式
import WangEdit from '@/components/WangEdit'
<wang-edit v-model="content" />
