添加新的需求

2025-10-20 17:32:09 +08:00
parent 9979e00b47
commit 361d5ab1ae
247 changed files with 34249 additions and 1 deletions
--- a/pc-cattle-transportation/src/components/Editor/index.vue
+++ b/pc-cattle-transportation/src/components/Editor/index.vue
@@ -0,0 +1,122 @@
+<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="valueHtml"
+            :defaultConfig="editorConfig"
+            :mode="mode"
+            @onCreated="handleCreated"
+            @onChange="handleChange"
+            @onDestroyed="handleDestroyed"
+            @onFocus="handleFocus"
+            @onBlur="handleBlur"
+            @customAlert="customAlert"
+            @customPaste="customPaste"
+        />
+    </div>
+</template>
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'; // 引入 css
+
+import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import { upload } from '@/api/common/index';
+
+const props = defineProps({
+    html: {
+        required: true,
+        type: String,
+        default: '',
+    },
+});
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref('');
+const mode = ref('default');
+
+watch(
+    () => props.html,
+    (val) => {
+        valueHtml.value = val;
+    },
+    {
+        immediate: true,
+        deep: true,
+    },
+);
+// 模拟 ajax 异步获取内容
+onMounted(() => {});
+
+const toolbarConfig = {
+    excludeKeys: ['insertLink', 'viewImageLink', 'insertVideo', 'uploadVideo', 'emotion', 'fullScreen', 'codeBlock', 'todo'],
+};
+const editorConfig = {
+    placeholder: '请输入内容...',
+    MENU_CONF: {
+        uploadImage: {
+            async customUpload(file, insertFn) {
+                const formData = new FormData(); // 组建formData参数
+                formData.append('file', file); // 将图片文件添加formData参数中
+                upload(formData)
+                    .then((ret) => {
+                        insertFn(ret.data.src, ret.data.src, '');
+                    })
+                    .catch(() => {
+                        target.value = '';
+                    });
+            },
+        },
+    },
+};
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor == null) return;
+    editor.destroy();
+});
+const handleCreated = (editor) => {
+    editorRef.value = editor; // 记录 editor 实例，重要！
+};
+const emits = defineEmits();
+const handleChange = (editor) => {
+    emits('update:html', valueHtml.value);
+};
+const handleFocus = (editor) => {
+    // console.log('focus', editor);
+};
+const handleBlur = (editor) => {
+    // console.log('blur', editor);
+    // console.log(valueHtml.value);
+};
+const customAlert = (info, type) => {
+    // alert(`【自定义提示】${type} - ${info}`);
+};
+const customPaste = (editor, event, callback) => {
+    const html = event.clipboardData.getData('text/html'); // 获取粘贴的 html
+    editor.dangerouslyInsertHtml(html); // 显示编译后的html
+    event.preventDefault();
+    callback(false);
+};
+
+const handleDestroyed = (editor) => {
+    // console.log('destroyed', editor);
+};
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor == null) return;
+    editor.destroy();
+});
+</script>
+<style lang="less" scoped>
+.w-e-modal button {
+    line-height: 30px !important;
+}
+.group-video {
+    display: none !important;
+}
+</style>