导入vue3-引入富文本框编辑器-@wangeditor/editor库

最新推荐文章于 2025-05-29 11:33:52 发布

夏微微～～

最新推荐文章于 2025-05-29 11:33:52 发布

阅读量391

点赞数 3

CC 4.0 BY-SA版权

文章标签：编辑器 typescript

本文链接：https://blog.youkuaiyun.com/qq_44576005/article/details/140717691

效果图
在这里插入图片描述

下载依赖包

@pureadmin/utils": "2.4.7
@wangeditor/editor": "^5.1.23
@wangeditor/editor-for-vue": "5.1.12

定义公共组件
在src目录下定义 components/ReEditor/index.vue

index.ts

import editor from "./src/Editor.vue";
import { withInstall } from "@pureadmin/utils";

/** 编辑器组件 */
export const RwEditor = withInstall(editor);

export default RwEditor;

Editor.vue

<script setup>
import { onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
defineOptions({
  name: "Editor"
});

const props = defineProps({
  mode: {
    type: Strin