富文本

介绍

本文介绍如何在 vue3-element-admin 项目中使用 WangEditor 富文本组件。目前，原版 wangEditor 已停止更新，目前项目使用 wangEditor-next 代替。

使用示例

<template>
  <WangEditor v-model="value" height="600px" />
</template>

<script setup lang="ts">
  // 导入组件, 默认无需导入，已全局注册
  import WangEditor from "@/components/WangEditor/index.vue";

  const value = ref("初始化内容");
</script>

上传图片

富文本编辑器默认接入 youlai-boot 的文件上传接口。如需使用其他后端，请修改 src/components/WangEditor/index.vue 文件中的 customUpload 方法，调整为对应的上传逻辑。

// 上传图片回调函数类型
type InsertFnType = (url: string, alt: string, href: string) => void;

// 编辑器配置
const editorConfig = ref<Partial<IEditorConfig>>({
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      customUpload(file: File, insertFn: InsertFnType) {
        // 上传图片，并将返回的图片地址通过 insertFn 插入到编辑器
        FileAPI.upload(file).then((res) => {
          insertFn(res.url, res.name, res.url);
        });
      },
    },
  },
});

提示

• 如果使用 youlai-boot 后端，无需修改任何代码。
• 如果对接其他后端，只需在 customUpload 方法中实现自定义的图片上传逻辑，并调用 insertFn 方法插入图片地址。

参数说明

名称	详情	类型	默认值
v-model	绑定值	string	—
height	富文本高度	string	500px