From e1b028d486713eaf55aaf35fbf334aa568059c0d Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 14 四月 2026 15:46:54 +0800
Subject: [PATCH] 项目复制
---
src/views/components/RichEditor.vue | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 109 insertions(+), 0 deletions(-)
diff --git a/src/views/components/RichEditor.vue b/src/views/components/RichEditor.vue
new file mode 100644
index 0000000..88ad1c1
--- /dev/null
+++ b/src/views/components/RichEditor.vue
@@ -0,0 +1,109 @@
+<template>
+ <div style="border: 1px solid #ccc">
+ <Toolbar
+ style="border-bottom: 1px solid #ccc"
+ :editor="editorRef"
+ :defaultConfig="toolbarConfig"
+ :mode="mode"
+ />
+ <Editor
+ style="height: 500px; overflow-y: hidden;"
+ v-model="contentValue"
+ :defaultConfig="editorConfig"
+ :mode="mode"
+ :disabled="disabled"
+ @onCreated="handleCreated"
+ />
+ </div>
+</template>
+<script>
+import '@wangeditor/editor/dist/css/style.css' // 寮曞叆 css
+import { onBeforeUnmount, ref, shallowRef } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { uploadFileRequest, getUploadImagePath } from '@/utils/tool.js'
+export default {
+ components: { Editor, Toolbar },
+ setup(props) {
+ // 缂栬緫鍣ㄥ疄渚嬶紝蹇呴』鐢� shallowRef
+ const editorRef = shallowRef()
+
+ const toolbarConfig = {}
+ toolbarConfig.excludeKeys = [ // 鎺掗櫎鑿滃崟缁勶紝鍐欒彍鍗曠粍 key 鐨勫�煎嵆鍙�
+ 'insertVideo',
+ 'uploadVideo',
+ 'editVideoSize',
+ 'insertImage'
+ ]
+ const editorConfig = {
+ placeholder: '璇疯緭鍏ュ唴瀹�...',
+ MENU_CONF: {},
+ }
+ editorConfig.MENU_CONF['uploadImage'] = {
+ async customUpload(file, insertFn) {
+ try {
+ const url = await uploadFileRequest(file)
+ if (!url) {
+ this.$message.error('涓婁紶澶辫触')
+ return
+ }
+ insertFn(getUploadImagePath(url), '', '')
+ } catch(error) {
+ console.log(error)
+ }
+ },
+ }
+
+ onBeforeUnmount(() => {
+ const editor = editorRef.value
+ if (editor == null) return
+ editor.destroy()
+ })
+
+ const handleCreated = (editor) => {
+ editorRef.value = editor // 璁板綍 editor 瀹炰緥锛岄噸瑕侊紒
+ if (props.disabled) {
+ editorRef.value.disable()
+ }
+ }
+
+ return {
+ editorRef,
+ mode: 'default', // 鎴� 'simple'
+ toolbarConfig,
+ editorConfig,
+ handleCreated,
+ }
+ },
+ data() {
+ return {
+ contentValue: '',
+ }
+ },
+ props: {
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ modelValue: {
+ type: String,
+ default: ''
+ }
+ },
+ watch: {
+ modelValue(val) {
+ this.contentValue = val
+ },
+ contentValue(val) {
+ this.$emit('update:modelValue', val)
+ }
+
+ }
+}
+</script>
+
+<style>
+.w-e-full-screen-container {
+ z-index: 1000;
+}
+
+</style>
\ No newline at end of file
--
Gitblit v1.8.0