vue3.0富文本编辑器wangeditor

1.下载安装包

npm install wangeditor --save

2.在组件里面引用

<template>
<div class="home">
<div id="richText"
style="height: 400px;background-color: #fff;" ></div>
<button @click="getMsg">获取富文本内容</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import E from 'wangeditor'
const phoneEditor = ref('')
onMounted(() => {
phoneEditor.value = new E('#richText')
// 上传图片到服务器，base64形式
phoneEditor.value.config.uploadImgShowBase64 = true
// 隐藏网络图片
phoneEditor.value.config.showLinkImg = false
// 创建一个富文本编辑器
phoneEditor.value.create()
// 富文本内容
phoneEditor.value.txt.html()
})
let getMsg = ()=>{
console.log(phoneEditor.value.txt.html())
}
</script>
<style scoped>
</style>

最后

以上就是含糊紫菜最近收集整理的关于vue3.0富文本编辑器wangeditor的全部内容，更多相关vue3内容请搜索靠谱客的其他文章。