Vue中使用wangEditor上传图片

官网文档地址: 官网地址.

第一步：根据自己的vue版本安装组件

安装 editor

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

安装 Vue2 组件

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

安装 Vue3 组件

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

第二步：看文档这里有官网封装的组件引用，但是实践之后，上传图片，上传视频的功能没有找到在哪配置（放弃了这个方法）

第三步：使用div创建空的编辑器

直接上代码

template里面

js代码

// 首先按照官网上的引入以上两个文件
import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar, IEditorConfig, IDomEditor } from '@wangeditor/editor'

创建编辑器

//【注意】下面使用的 typescript 语法。如用 javascript 语法，把类型去掉即可。

const editorConfig: Partial = {}
editorConfig.placeholder = '请输入内容'
editorConfig.onChange = (editor: IDomEditor) => {
    // 当编辑器选区、内容变化时，即触发
    console.log('content', editor.children)
    console.log('html', editor.getHtml())
}

// 创建编辑器
const editor = createEditor({
  selector: '#editor-container',
  config: editorConfig,
  mode: 'default' // 或 'simple' 参考下文
})
// 创建工具栏
const toolbar = createToolbar({
  editor,
  selector: '#toolbar-container',
  mode: 'default' // 或 'simple' 参考下文
})

这样就创建了一个编辑器

刚创建出来的编辑器高度是自适应的，大家可根据css设置高度
现在说下关键问题，上传图片

 // 修改 uploadImage 菜单配置
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/api/upload-image',
        fieldName: 'custom-field-name'
        // 继续写其他配置...
        //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
        // 上传之前触发
        onBeforeUpload(file) {
          console.log(file)
            // file 选中的文件，格式如 { key: file }
            return file
        },
        // 单个文件上传失败
        onFailed(file, res) {
            console.log(`${file.name} 上传失败`, res)
        },
        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) {
            console.log(`${file.name} 上传出错`, err, res)
        },
        customInsert( result, insertFn) {
        // result是返回的json格式
        // 从 result 中找到 url alt href ，然后插图图片
          console.log(result.data)
          insertFn(result.data)
        }
    }

接下来就可以上传图片了，完结
有帮助的希望大家多点点赞