提交代码

fhKeeper/formulahousekeeper/articleBackend/package.json

@@ -9,11 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@rollup/plugin-inject": "^5.0.5",
     "@vueup/vue-quill": "^1.2.0",
     "axios": "^1.6.5",
     "element-plus": "^2.4.4",
     "pinia": "^2.1.7",
     "pinia-persistedstate-plugin": "^0.1.0",
+    "quill-image-drop-module": "^1.0.3",
+    "quill-image-resize-module": "^3.0.0",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"
   },

fhKeeper/formulahousekeeper/articleBackend/src/utils/quillEditorOptions.js

@@ -1,41 +0,0 @@
-export const options = {
-  theme: 'snow',
-  debug: 'warn',
-  modules: {
-    // 工具栏配置
-    toolbar: {
-      container: [
-        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-        ['blockquote', 'code-block'], // 引用  代码块
-        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-        [{ indent: '-1' }, { indent: '+1' }], // 缩进
-        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
-        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-        [{ align: [] }], // 对齐方式
-        ['clean'], // 清除文本格式
-        ['link', 'image'], // 链接、图片、视频
-      ],
-      // ImageDrop: true,//支持图片拖拽
-      // imageResize: { //支持图片大小尺寸修改
-      //   displayStyles: {
-      //     backgroundColor: 'black',
-      //     border: 'none',
-      //     color: 'white'
-      //   },
-      //   modules: ['Resize', 'DisplaySize','Toolbar']
-      // }
-    }
-  },
-  placeholder: '请输入公告内容...',
-  // readOnly: props.readOnly,
-  clipboard: {
-    matchers: [
-      ['img', (node, delta) => {
-        const src = node.getAttribute('src');
-        const id = node.getAttribute('id');
-        delta.insert({ image: { src, 'id': id } });
-      }],
-    ],
-  },
-}

fhKeeper/formulahousekeeper/articleBackend/src/views/article/ArticleManage.vue

@@ -3,6 +3,14 @@ import {
     Edit,
     Delete
 } from '@element-plus/icons-vue'
+// 文章编辑器组件
+import { QuillEditor, Quill } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { ImageDrop } from 'quill-image-drop-module';
+import imageResize from 'quill-image-resize-module';
+
+Quill.register('modules/ImageDrop', ImageDrop);
+Quill.register('modules/imageResize', imageResize);
 
 import { ref } from 'vue'
 
@@ -89,11 +97,38 @@ const articleModel = ref({
     productId: ''
 })
 const fileList = ref([])
-
-// 文章编辑器组件
-import { QuillEditor } from '@vueup/vue-quill'
-import '@vueup/vue-quill/dist/vue-quill.snow.css'
-import { options } from '../../utils/quillEditorOptions'
+const options = ref({
+  theme: "snow",
+  bounds: document.body,
+  debug: "warn",
+  modules: {
+    // 工具栏配置
+    toolbar: [
+      ["bold", "italic", "underline", "strike"],      // 加粗 斜体 下划线 删除线
+      ["blockquote", "code-block"],                   // 引用  代码块
+      [{ list: "ordered" }, { list: "bullet" }],      // 有序、无序列表
+      [{ indent: "-1" }, { indent: "+1" }],           // 缩进
+      [{ size: ["small", false, "large", "huge"] }],  // 字体大小
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],        // 标题
+      [{ color: [] }, { background: [] }],            // 字体颜色、字体背景颜色
+      [{ align: [] }],                                // 对齐方式
+      ["clean"],                                      // 清除文本格式
+      ["link", "image"]                      // 链接、图片、视频
+    ],
+    // ImageDrop: true,  // PS：因为QuillEditor自带可拖拽此配置可以不开，开启拖动会复制图片
+    // todo 富文本导入图片是否需要缩放拖拽 
+    imageResize: {
+      displayStyles: {
+        backgroundColor: 'black',
+        border: 'none',
+        color: 'white',
+      },
+      modules: ['Resize', 'DisplaySize', 'Toolbar'],
+    },
+  },
+  placeholder: "请输入内容",
+//   readOnly: props.readOnly
+});
 
 //导入token，方便编辑完文章后保存至服务器
 import {userTokenStore} from '@/stores/token.js'

fhKeeper/formulahousekeeper/articleBackend/vite.config.js

@@ -1,5 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
-
+import inject from '@rollup/plugin-inject';
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -7,6 +7,10 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [
     vue(),
+    inject({
+      'window.Quill': ['@vueup/vue-quill', 'Quill'],
+      Quill: ['@vueup/vue-quill', 'Quill'],
+    }),
   ],
   resolve: {
     alias: {
@@ -20,8 +24,8 @@ export default defineConfig({
     proxy:{
       '/api':{
         // target:'http://localhost:8080',  // 后台服务所在的源，用这个源替换前端服务源
-        target:'http://47.101.180.183:8091',  // 后台服务所在的源，用这个源替换前端服务源
-        // target:'http://192.168.2.17:8091',  // 后台服务所在的源，用这个源替换前端服务源
+        // target:'http://47.101.180.183:8091',  // 后台服务所在的源，用这个源替换前端服务源
+        target:'http://192.168.2.17:8091',  // 后台服务所在的源，用这个源替换前端服务源
         changeOrigin:true,     // 开启修改源
         rewrite:(path)=>path.replace(/^\/api/,'')   // url路径中的 /api 将会被替换成 '' 
       }