讲师列表页面调整

src/components/project/Editor.vue

@@ -7,10 +7,11 @@
 -->
 <template> 
     <div style="border: 1px solid #ccc; width: 100%; ">
-      <Toolbar style="border-bottom: 1px solid #ccc ;font-size:4px"  :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
-      <Editor style="height: 100px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" @customPaste="customPaste" />
+      <Toolbar style="border-bottom: 1px solid #ccc ;font-size:4px"  :editor="editorRef" :defaultConfig="toolbarConfig" mode="simple" />
+      <Editor style="height: 100px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="simple" @onCreated="handleCreated" @customPaste="customPaste"  />
+      <span>{{  }}</span>
     </div>
-    <!-- <el-button style="margin: 0 auto" @click="getEditorHTML">获取富文本HTML内容</el-button> -->
+
   </template>
   <script setup>
   // 富文本编辑器文档链接: https://www.wangeditor.com/v5/getting-started.html
@@ -31,13 +32,23 @@
   // 自定义图片上传
   editorConfig.value.MENU_CONF['uploadImage'] = {
     async customUpload(file, insertFn) {
-      console.log('上传图片', file);
-      // 将上传的file图片转换为base64
-      const base64 = URL.createObjectURL(file);
-  
-      // 这里的file为上传的图片对象,insertFn传入
-      insertFn(base64, 'img');
-    },
+        const formData = new FormData();
+        formData.append("file", file);
+        fileUp(formData).then((res) => {
+          if (res.data.code === 200) {
+            // 最后插入图片  url alt href
+            console.log(
+              "上传图片结果",
+              process.env.VUE_APP_FILE_PATH + res.data.data
+            );
+            insertFn(
+              process.env.VUE_APP_FILE_PATH + res.data.data,
+              file.name,
+              res.data.data
+            );
+          }
+        });
+      },
   };
   
   // 自定义视频上传
@@ -63,12 +74,6 @@
       callback(false);
     }
   };
-  
-  // // 获取富文本html内容
-  // const getEditorHTML = () => {
-  //   console.log(editorRef.value.getHtml());
-  // };
-  
   // 组件销毁时，也及时销毁编辑器
   onBeforeUnmount(() => {
     const editor = editorRef.value;