wangEditor 编辑器 Vue 2.0 + Nodejs 配置

资料

1. Vue2.0 版本的安装：https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8
2. 上传图片配置：https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87

安装步骤

1.安装界面基础部分

<!-- 富文本编辑器 -->
<template><div class="WangEditor" style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/></div>
</template><script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default {components: { Editor, Toolbar },data() {return {editor: null,html: '<p>hello</p>',toolbarConfig: {},editorConfig: { placeholder: '请输入内容...',},mode: 'default', // or 'simple'}},mounted() {// 模拟 ajax 请求，异步渲染编辑器setTimeout(() => {this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'}, 1500)},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器},methods: {// 编辑器实例创建完毕后回调onCreated(editor) {// 对象密封this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错},},}
</script><style scoped lang="scss">
.WangEditor{// 去掉重影小叉::v-deep .btn-close {svg {display: none;}}
}
</style>

2.配置上传服务

editorConfig: { placeholder: '请输入内容...',MENU_CONF: {uploadImage:{fieldName: 'images',server: 'http://localhost:3000/api/uploadImage', // 默认的是8081，这里要设置自己的IP和端口maxSize: 5 * 1024 * 1024, // 5MB}}
},

3.搭建后端Api

3-1. 设置静态文件，添加目录

// 创建主应用
const app = express();// 使 public/uploads 目录可以作为静态文件目录访问
app.use('/uploads', express.static(path.join(__dirname, 'public', 'uploads')));

3-2. 配置Multer

// Multer 配置
const storage = multer.diskStorage({destination: (req, file, cb) => {cb(null, 'public/uploads/'); // 上传文件的存储路径},filename: (req, file, cb) => {// 对文件名进行处理，确保文件名中的非英文字符不会出现乱码const sanitizedFilename = Date.now() + '-' + encodeURIComponent(file.originalname);cb(null, sanitizedFilename); // 使用 URL 编码后的文件名}
});// 创建 multer 实例
const upload = multer({storage: storage,limits: { fileSize: 5 * 1024 * 1024 },  // 限制文件大小最大为5MB
}).single('images');  // 这里使用 single() 来接收单个文件，'images' 是表单字段名称

3-3. 配置图片上传api

// 图片上传
app.post('/api/uploadImage', (req, res) => {// 使用 multer 中间件来处理文件上传upload(req, res, (err) => {if (err) {return res.status(500).json({errno: 1,message: '文件上传失败',});}const file = req.file;  // 上传的文件信息存储在 req.file 中if (!file) {return res.status(400).json({errno: 1,message: '没有上传文件',});}// 获取服务器的 IP 地址const ip = req.socket.localAddress === '::1' ? 'localhost' : req.socket.localAddress;const port = 3000; // 端口号const baseUrl = `http://${ip}:${port}/uploads/`; // 构建完整的 URL// 返回文件的URL路径res.status(200).json({errno: 0,data: {url: `${baseUrl}${file.filename}`,  // 上传后的文件路径alt: 'Uploaded Image',href: '',  // 可选的链接（点击图片时跳转）},});})
})

4.解决弹窗小叉重影

<style scoped lang="scss">
.WangEditor{// 去掉重影小叉::v-deep .btn-close {svg {display: none;}}
}
</style>