vue3富文本

第一步：下载依赖：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