vue3富文本

最新推荐文章于 2024-10-30 16:57:09 发布

冰海恋雨.

最新推荐文章于 2024-10-30 16:57:09 发布

阅读量606

点赞数 3

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_64590669/article/details/129219759

版权

该文介绍了如何在Vue项目中安装和使用wangEditor，通过npm安装后，在组件内创建富文本编辑器实例。配置编辑器设置，包括启用base64形式上传图片和隐藏网络图片链接。同时，为避免样式冲突，使用了scoped属性限制CSS作用域。

摘要由CSDN通过智能技术生成

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