vue3中使用wangeditor

文档地址：开始使用 · wangEditor 用户文档

1.项目命令行中安装

npm i wangeditor --save

2.在需要使用的页面

<template>
	<div>
		<div>editor</div>
		<div class="mgb20" ref='editor'></div>
		<el-button type="primary" @click="syncHTML">提交</el-button>
	</div>
</template>

<script>
	import E from "wangeditor";
	import {
		ref,
		onMounted
	} from "vue";
	// 获取当前组件实例
	export default {
		setup() {
			let editor = ref('')
			let redact=ref(null)
			onMounted(() => {
				console.log(editor.value)
				redact.value = new E(editor.value)
				redact.value.create()
			});

			return {
				editor,
				redact,
			}
		}
	}
</script>

<style>
</style>

3.配置

//比如上传本地图片

redact.value.config.uploadImgShowBase64 = true //编辑器用 base64 格式显示图片。

redact.value.config.uploadImgServer = '/upload-img' //上传图片到服务器地址