@vueuse/core

npm i @vueuse/core
vite.config.js 配置

plugins: [      vue(),      UnoCSS({}),      AutoImport({        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等        imports: ["vue", "@vueuse/core"],        eslintrc: {          enabled: false,          filepath: "./.eslintrc-auto-import.json",          globalsPropValue: true,        },        resolvers: [          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)          ElementPlusResolver(),          IconsResolver({}),        ],        vueTemplate: true,        // 配置文件生成位置(false:关闭自动生成)        dts: false,        // dts: "src/types/auto-imports.d.ts",      }),      Components({        resolvers: [          // 自动导入 Element Plus 组件          ElementPlusResolver(),          // 自动导入图标组件          IconsResolver({            // @iconify-json/ep 是 Element Plus 的图标库            enabledCollections: ["ep"],          }),        ],        // 指定自定义组件位置(默认:src/components)        dirs: ["src/**/components"],        // 配置文件位置(false:关闭自动生成)        dts: false,        // dts: "src/types/components.d.ts",      }),      Icons({        // 自动安装图标库        autoInstall: true,      }),      createSvgIconsPlugin({        // 指定需要缓存的图标文件夹        iconDirs: [path.resolve(pathSrc, "assets/icons")],        // 指定symbolId格式        symbolId: "icon-[dir]-[name]",      }),      // https://github.com/anncwb/vite-plugin-mock/issues/9      viteMockServe({        ignore: /^\_/,        mockPath: "mock",        enable: mode === "development",      }),    ],

1. wangEditor 组件

<template>  <div class="editor-wrapper">    <!-- 工具栏 -->    <Toolbar      id="toolbar-container"      :editor="editorRef"      :default-config="toolbarConfig"      :mode="mode"    />    <!-- 编辑器 -->    <Editor      id="editor-container"      v-model="modelValue"      :default-config="editorConfig"      :mode="mode"      @on-change="handleChange"      @on-created="handleCreated"    />  </div></template><script setup lang="ts">import { Editor, Toolbar } from "@wangeditor/editor-for-vue";// API 引用import { uploadFileApi } from "@/api/file";const props = defineProps({  modelValue: {    type: [String],    default: "",  },});const emit = defineEmits(["update:modelValue"]);// useVModel返回的数据就是响应式数据const modelValue = useVModel(props, "modelValue", emit);const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRefconst mode = ref("default"); // 编辑器模式const toolbarConfig = ref({}); // 工具条配置// 编辑器配置const editorConfig = ref({  placeholder: "请输入内容...",  MENU_CONF: {    uploadImage: {      // 自定义图片上传      async customUpload(file: any, insertFn: any) {        uploadFileApi(file).then((response) => {          const url = response.data.url;          insertFn(url);        });      },    },  },});const handleCreated = (editor: any) => {  editorRef.value = editor; // 记录 editor 实例，重要！};function handleChange(editor: any) {  modelValue.value = editor.getHtml();}// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {  const editor = editorRef.value;  if (editor == null) return;  editor.destroy();});</script><style src="@wangeditor/editor/dist/css/style.css"></style>

使用组件

<!-- wangEditor富文本编辑器示例 --><script setup lang="ts">import Editor from "@/components/WangEditor/index.vue";const value = ref("初始内容");</script><template>  <div class="app-container">    <editor v-model="value" style="height: calc(100vh - 180px)" />  </div></template>

2. 全屏 ， 浏览器宽度， 响应式数据

/** * vueUse 全屏 */
const { isFullscreen, toggle } = useFullscreen();

import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();

    <Editor
      id="editor-container"
      v-model="modelValue"
      :default-config="editorConfig"
      :mode="mode"
      @on-change="handleChange" 
     @on-created="handleCreated"
    />
const props = defineProps({
  modelValue: {
    type: [String],
    default: "",
  },
});
const emit = defineEmits(["update:modelValue"]);
// useVModel返回的数据就是响应式数据
const modelValue = useVModel(props, "modelValue", emit);