Vue3 + WangEditor：富文本编辑器组件，富文本展示，富文本转文本

富文本编辑器（WangEditer）编辑富文本，富文本展示，富文本转为纯文本

这里记录我对富文本编辑的使用经验，其中还包含了富文本展示及富文本转文本的方法。

希望对需要使用富文本的你有所帮助！

有任何问题可以在评论区留言探讨哦~

官方文档

www.wangeditor.com/v5/for-fram…

安装wangeditor

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

封装WangEditor组件

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 360px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const props = defineProps({
  details: {
    type: String,
  },
  toolbarConfig: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["on-change"]);
const editorRef = shallowRef();
const mode = ref("simple");
const valueHtml = ref(props.details);
const toolbarConfig = ref(props.toolbarConfig);
const editorConfig = {
  placeholder: "请输入内容...",
};
const handleChange = () => {
  emit("on-change", valueHtml.value);
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

使用WangEditor组件

  <WangEditor
    :details="htmlString"
    :toolbarConfig="toolbarConfig"
    @on-change="onChange"
  />

import WangEditor from "/@/components/WangEditor/index.vue";
const htmlString = ref(props.row.termsContent);
const onChange = (value: string) => {
  htmlString.value = value;
};
// 配置富文本编辑器工具栏（不对工具栏进行配置会展示默认的工具栏）
const toolbarConfig = ref({
  toolbarKeys: [
    "headerSelect",
    "fontFamily",
    "bold",
    "italic",
    "underline",
    "color",
  ],
});

富文本展示

<div class="html-content" v-else><div v-html="htmlString"></div></div>

将富文本转为纯文本展示

const plainText = computed(() => {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = htmlString.value;
  return tempDiv.textContent || tempDiv.innerText || '';
});

textContent和innerText的区别：

• textContent：
  • textContent 是一个简单的字符串属性，直接返回或设置元素及其后代的文本内容。
  • 由于 textContent 不涉及渲染树的构建，因此在处理大量文本时性能更好。
• innerText：
  • innerText 涉及到渲染树的构建，因此在处理大量文本时性能较差。

上传图片配置

如果需要在富文本中上传图片 需要在toolbarKeys中加入‘uploadImage’ 需要在editorConfig中加入uploadImage配置项

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      server: `${import.meta.env.VITE_API_URL}/xx/xx/xx`, // 服务端地址
      fieldName: "file",
      maxFileSize: 1 * 1024 * 1024, // 1M
      allowedFileTypes: ["image/*"],
      base64LimitSize: 10 * 1024, // 10KB
      // 自定义插入返回格式【后端返回的格式】
      customInsert(res, insertFn) {
        if (res.code != 200 && res.success == false) {
          ElMessage.error("上传文件失败，" + res.message);
          return;
        }
        insertFn(res.url, "", res.url);
      },
      headers: {
        Authorization: "bearer " + token,
        Accept: "*/*",
      },
      meta: {
        type: "noticeInfo", // 携带的数据
      },
      metaWithUrl: true, // 将 meta 拼接到 url 参数中，默认 false
      onSuccess(file, res) {
        ElMessage.success(`${file.name} 上传成功`);
      },
      onFailed(file, res) {
        ElMessage.error(`${file.name} 上传失败`);
      },
      onError(file, err, res) {
        ElMessage.error(`${file.name} 上传出错`);
      },
    },
  },
};