返回

VUE3 富文本编辑器 WANGEDITOR 插入本地图片完整指南

前端

在 Vue.js 中使用 WANGEDITOR 插入本地图片：终极指南

引言

WANGEDITOR 是一款强大的开源富文本编辑器，以其易用性和功能多样性而备受前端开发人员的青睐。本文将深入探究如何在 Vue.js 中使用 WANGEDITOR 插入本地图片，提供全面的逐步指南，覆盖从安装到配置和图像上传等各个方面。

安装 WANGEDITOR

首先，使用 npm 安装 WANGEDITOR：

npm install wangEditor --save

安装完成后，在 Vue.js 项目中引入 WANGEDITOR：

import WangEditor from 'wangEditor'

创建 WANGEDITOR 实例

在 Vue.js 组件中，创建一个 WANGEDITOR 实例：

export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = new WangEditor(this.$refs.editor)
    this.editor.create()
  }
}

配置 WANGEDITOR

创建 WANGEDITOR 实例后，可以对编辑器进行配置，例如设置高度、宽度和工具栏：

this.editor.config.height = '500px'
this.editor.config.width = '100%'
this.editor.config.menus = [
  'head', // 标题
  'bold', // 粗体
  'fontSize', // 字号
  'fontName', // 字体
  'italic', // 斜体
  'underline', // 下划线
  'strikeThrough', // 删除线
  'foreColor', // 文字颜色
  'backColor', // 背景颜色
  'link', // 链接
  'list', // 列表
  'quote', // 引用
  'image', // 图片
  'table', // 表格
  'video', // 视频
  'code', // 代码
  'undo', // 撤销
  'redo' // 重做
]

插入本地图片

WANGEDITOR 提供两种方法插入本地图片：

  1. 直接拖拽图片 到编辑器中。
  2. 通过点击工具栏中的 “图片” 按钮插入图片。

上传本地图片到后端

当通过点击“图片”按钮插入图片时，WANGEDITOR 会打开一个文件选择器，可以从中选择本地图片进行上传。上传完成后，WANGEDITOR 会返回图片的 URL 地址。

将图片插入编辑器

获取图片的 URL 地址后，可以使用 WANGEDITOR 的 insertHtml 方法将图片插入到编辑器中：

this.editor.insertHtml(`<img src="${imageUrl}" alt="" />`)

总结

本文提供了如何在 Vue.js 中使用 WANGEDITOR 插入本地图片的综合指南。通过遵循这些步骤，您可以轻松地将图片集成到您的富文本编辑器中，丰富您的内容并提升用户体验。

常见问题解答

  1. 如何自定义 WANGEDITOR 工具栏？

    • 可以通过设置 editor.config.menus 选项来自定义工具栏。

  2. 如何禁用图像上传？

    • 可以通过设置 editor.config.uploadImgShowBase64 选项为 false 来禁用图像上传。

  3. 如何限制图像大小？

    • 可以通过设置 editor.config.uploadImgMaxSize 选项来限制图像大小。

  4. 如何上传图片到特定的 URL？

    • 可以通过设置 editor.config.uploadImgServer 选项来指定上传图片的目标 URL。

  5. WANGEDITOR 是否支持其他文件类型的上传？

    • WANGEDITOR 默认支持图像上传，但可以通过自定义插件来支持其他文件类型。