wangEditor 编辑器 Vue 2.0 + Nodejs 设置

资料

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

安装步调

1.安装界面底子部分

1. <!-- 富文本编辑器 -->
2. <template>
3.   <div class="WangEditor" style="border: 1px solid #ccc">
4.     <Toolbar
5.       style="border-bottom: 1px solid #ccc"
6.       :editor="editor"
7.       :defaultConfig="toolbarConfig"
8.       :mode="mode"
9.     />
10.     <Editor
11.       style="height: 500px; overflow-y: hidden;"
12.       v-model="html"
13.       :defaultConfig="editorConfig"
14.       :mode="mode"
15.       @onCreated="onCreated"
16.     />
17.   </div>
18. </template>
20. <script>
21. import '@wangeditor/editor/dist/css/style.css' // 引入 css
22. import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
24. export default {
25.     components: { Editor, Toolbar },
26.     data() {
27.       return {
28.         editor: null,
29.         html: '<p>hello</p>',
30.         toolbarConfig: {},
31.         editorConfig: {
32.           placeholder: '请输入内容...',
33.         },
34.         mode: 'default', // or 'simple'
35.       }
36.     },
37.     mounted() {
38.       // 模拟 ajax 请求，异步渲染编辑器
39.       setTimeout(() => {
40.         this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
41.       }, 1500)
42.     },
43.     beforeDestroy() {
44.       const editor = this.editor
45.       if (editor == null) return
46.       editor.destroy() // 组件销毁时，及时销毁编辑器
47.     },
48.     methods: {
49.       // 编辑器实例创建完毕后回调
50.       onCreated(editor) {
51.         // 对象密封
52.         this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
53.       },
54.     },
55.   }
56. </script>
58. <style scoped lang="scss">
59. .WangEditor{
60.   // 去掉重影小叉
61.   ::v-deep .btn-close {
62.     svg {
63.       display: none;
64.     }
65.   }
66. }
67. </style>

复制代码

2.设置上传服务

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

复制代码

3.搭建后端Api

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

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

复制代码

3-2. 设置Multer

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

复制代码

3-3. 设置图片上传api

1. // 图片上传
2. app.post('/api/uploadImage', (req, res) => {
3.   // 使用 multer 中间件来处理文件上传
4.   upload(req, res, (err) => {
5.     if (err) {
6.       return res.status(500).json({
7.         errno: 1,
8.         message: '文件上传失败',
9.       });
10.     }
12.     const file = req.file;  // 上传的文件信息存储在 req.file 中
14.     if (!file) {
15.       return res.status(400).json({
16.         errno: 1,
17.         message: '没有上传文件',
18.       });
19.     }
21.     // 获取服务器的 IP 地址
22.     const ip = req.socket.localAddress === '::1' ? 'localhost' : req.socket.localAddress;
23.     const port = 3000; // 端口号
24.     const baseUrl = `http://${ip}:${port}/uploads/`; // 构建完整的 URL
26.     // 返回文件的URL路径
27.     res.status(200).json({
28.       errno: 0,
29.       data: {
30.         url: `${baseUrl}${file.filename}`,  // 上传后的文件路径
31.         alt: 'Uploaded Image',
32.         href: '',  // 可选的链接（点击图片时跳转）
33.       },
34.     });
35.   })
36. })

复制代码

4.解决弹窗小叉重影

1. <style scoped lang="scss">
2. .WangEditor{
3.   // 去掉重影小叉
4.   ::v-deep .btn-close {
5.     svg {
6.       display: none;
7.     }
8.   }
9. }
10. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。