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.0富文本编辑器wangeditor所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。