wangEditor编辑器Vue2.0+Nodejs配置

资料 Vue2.0 版本的安装： .wangeditor /v5/for-frame.html#%E4%BD%BF%E7%94%A8上传图片配置： .wangeditor /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"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="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.editor if (editor == null) return editor.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>