wangEditor v5 v3

1.安装命令

yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue@next

2.封装组件

<template>  
<div>  
<Toolbar  
:editor="editorRef"  
:defaultConfig="toolbarConfig"  
:mode="mode"  
style="border-bottom: 1px solid #ccc"  
/>  
<Editor  
:defaultConfig="editorConfig"  
:mode="mode"  
v-model="html"  
:style="'height:'+height+'px; overflow-y: hidden'"  
@onChange="handleChange"  
/>  
</div>  
</template>  
  
<script setup>  
import '@wangeditor/editor/dist/css/style.css'  
import { watch,onBeforeUnmount,defineEmits, ref, shallowRef } from 'vue'  
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'  
const editorRef = shallowRef()  
const $emit = defineEmits(['onChange'])  
const mode = ref('default')  
const props = defineProps({  
valueHtml: {  
type: String,  
default: ''  
},  
height:{  
type:[Number,String],  
default:400  
}  
})  
let html =ref('')  
watch(props.valueHtml, val => {  
html.value = val  
})  
function insertFn(file){  
console.log(file)  
// oss 上传或者是接口上传 返回的图片 返回值自定义拼接文本 *  
html.value= html.value + `<img src="${imgUrl}" />`  
}  
const toolbarConfig = {}  
const editorConfig = {  
placeholder: '请输入内容...',  
MENU_CONF: {  
// 图片上传调用的方法  
uploadImage: {  
customUpload: (file) => {  
insertFn(file)  
},  
},  
// 视频上传调用的方法  
uploadVideo: {  
customUpload: (file) => {  
insertFn(file)  
},  
},  
}  
}  
  
  
onBeforeUnmount(() => {  
const editor = editorRef.value  
if (editor == null) return  
  
editor.destroy()  
})  
  
  
const handleChange = (editor) => {  
console.log('change:', editor.getHtml())  
$emit('onChange', editor.getHtml())  
}  
  
</script>

3.vue 调用

<template>  
    <div>  
      <wange-ditor :value-html="valueHtml" @onChange="onChange"/>  
    </div>  
</template>  
  
<script setup>  
import {ref } from 'vue'  
import WangeDitor from '@/components/wangeditor.vue'  
let valueHtml=ref('')  
function onChange(html){  
valueHtml.value=html  
console.log(valueHtml.value)  
}  
</script>