# wangEditor

houdunren.com (opens new window) @ 向军大叔

xj-small

wangEditor (opens new window)是优秀的国产富文本编辑器,下面我们来掌握在项目中集成上这款编辑器。

image-20201120231553289

# VUE3 组件

下面实现开发wangEditor的vue组件,首先安装扩展包

yarn add wangeditor

# 组件代码

然后创建 form-wang-editor.vue组件文件

<template>
    <div :id="id"></div>
</template>

<script setup>
import E from "wangeditor"
import { ref, defineProps, nextTick, defineEmit } from 'vue'

const props = defineProps({
    id: { type: String, default: 'editor' },
    action: { type: String, default: `http://houdunren.test/api/upload` },
    modelValue: { type: String },
})

const emit = defineEmit(['update:modelValue'])

nextTick(() => {
    const editor = new E(`#${props.id}`)
    //后台上传地址
    editor.config.uploadImgServer = props.action
    //允许文件大小
    editor.config.uploadImgMaxSize = 3 * 1024 * 1024
    //允许类型
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'webp']
    //允许上传数量
    editor.config.uploadImgMaxLength = 5;
    //后台接收的 name
    editor.config.uploadFileName = 'file'
    //自定义头信息
    editor.config.uploadImgHeaders = {
        Accept: 'application/json',
        Authorization: `Bearer ${window.localStorage.getItem('token')}`
    }
    editor.config.showLinkImg = false
    editor.config.debug = true
    editor.config.zIndex = 100
    //自定义上传处理
    editor.config.uploadImgHooks = {
        customInsert: function(insertImgFn, result) {
            insertImgFn(result.path)
        }
    }
    editor.config.onchange = (html) => {
        emit('update:modelValue', html)
    }

    editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        //'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'video', // 插入视频
        'code', // 插入代码
        'undo', // 撤销
        'redo', // 重复
    ]
    editor.create()
})
</script>

<style lang="scss"></style>

# 使用方式

<form-wang-editor name="editor" v-model="content" action="/upload"/>

下面对属性进行说明

属性 说明 默认值
id 编辑器 ID Editor
v-model 编辑器数据
action 图片上传地址

# 后台上传

后台需要返回以下数据结构

json_encode([
    'path' => '1.jpeg'
]);