第一步：下载依赖：npm install wangeditor --save
template：
<template> <div class="home"> <div id="richText" style="height: 200px; background-color: #fff; width: 50%"></div> <button @click="getMsg">获取文本内容</button> </div> </template>
js：
<script setup> // 引入局部 import { ref, onMounted } from "vue"; import E from "wangeditor"; const rich_text = ref(""); onMounted(() => { rich_text.value = new E("#richText"); // 上传图片到服务器，base64形式 rich_text.value.config.uploadImgShowBase64 = true; // 隐藏网络图片 rich_text.value.config.showLinkImg = false; // 创建一个富文本编辑器 rich_text.value.create(); // 文本内容 rich_text.value.txt.text(); }); let getMsg = () => { console.log(rich_text.value.txt.text()); }; </script>
这里直接把setup写到script标签里面了。如果想获取到带有标签的内容可以把text换成html。
css：
<style scoped> .home { width: 600px; } </style>
ps：scoped加到style标签上面可以避免其他页面有相同的名称样式冲突。如歌不加回造成名称和其他页面名称相同样式冲突。
最终效果：
author：ice Sea Love Rain
