wangEditor 富文本编辑（粘贴即用）
参考： wangEditor 官方文档
安装 wangEditor
npm install @wangeditor/editor @wangeditor/editor-for-vue@next wangEditor 组件封装
<!-- src/components/WangEditor/index.vue -->
<template><div style="border: 1px solid #ccc"><!-- 工具栏 --><Toolbar:editor="editorRef":defaultConfig="toolbarConfig"style="border-bottom: 1px solid #ccc":mode="mode"/><!-- 编辑器 --><Editor:defaultConfig="editorConfig"v-model="defaultHtml"@onChange="handleChange"style="height: 500px; overflow-y: hidden":mode="mode"@onCreated="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"]);const defaultHtml = useVModel(props, "modelValue", emit);const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
const 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) {emit("update:modelValue", 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: 600px" /></div>
</template>