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">
    <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>