feat: 增加富文本

package.json

@@ -40,6 +40,8 @@
     "@vue/shared": "^3.2.33",
     "@vueuse/core": "^8.3.0",
     "@vueuse/shared": "^8.3.0",
+    "@wangeditor/editor": "^5.1.22",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "@zxcvbn-ts/core": "^2.0.1",
     "ant-design-vue": "^3.2.0",
     "axios": "^0.26.1",

src/views/product/goods/components/basicInfo.vue

@@ -23,6 +23,9 @@
       <a-form-item label="商品名称" name="name">
         <a-input v-model:value="formData.name" />
       </a-form-item>
+      <a-form-item label="商品描述" name="remark">
+        <a-input v-model:value="formData.remark" />
+      </a-form-item>
       <a-form-item label="上架" name="status">
         <a-radio-group v-model:value="formData.status">
           <a-radio value="YES">是</a-radio>
@@ -59,12 +62,9 @@
       <a-form-item label="页面关键词" name="pageKeyword">
         <a-input v-model:value="formData.pageKeyword" />
       </a-form-item>
-      <a-form-item label="页面描述" name="pageRemark">
+      <a-form-item label="页面描述(提示)" name="pageRemark">
         <a-input v-model:value="formData.pageRemark" />
       </a-form-item>
-      <a-form-item label="商品描述" name="remark">
-        <a-input v-model:value="formData.remark" />
-      </a-form-item>
     </a-form>
   </div>
 </template>

src/views/product/goods/components/editor.vue

+<template>
+  <div style="border: 1px solid #ccc; margin-bottom: 20px">
+    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
+    <Editor
+      style="height: 500px; overflow-y: hidden"
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      mode="default"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import '@wangeditor/editor/dist/css/style.css'; // 引入 css
+
+  import { onBeforeUnmount, ref, shallowRef, defineExpose } from 'vue';
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { IEditorConfig, Partial } from '@wangeditor/editor';
+  import { getToken } from '/@/utils/auth';
+  import { getAppEnvConfig } from '/@/utils/env';
+
+  const { VITE_GLOB_UPLOAD_URL } = getAppEnvConfig();
+  const token = getToken();
+  // 编辑器实例，必须用 shallowRef
+  const editorRef = shallowRef();
+
+  // 内容 HTML
+  const valueHtml = ref('');
+
+  const toolbarConfig = {};
+  const editorConfig: Partial<IEditorConfig> = {
+    placeholder: '请输入内容...',
+    MENU_CONF: {
+      uploadImage: {
+        server: VITE_GLOB_UPLOAD_URL,
+        fieldName: 'file',
+        headers: {
+          Authorization: token,
+        },
+        customInsert(res: any, insertFn: InsertFnType) {
+          insertFn(res.result);
+        },
+      },
+    },
+  };
+
+  // 组件销毁时，也及时销毁编辑器
+  onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor == null) return;
+    editor.destroy();
+  });
+
+  const handleCreated = (editor) => {
+    editorRef.value = editor; // 记录 editor 实例，重要！
+  };
+
+  defineExpose({ valueHtml });
+</script>
+
+<style lang="less" scoped></style>

src/views/product/goods/modal.vue

@@ -3,7 +3,7 @@
     <div class="tableWrap">
       <a-tabs v-model:activeKey="activeKey" centered>
         <a-tab-pane key="1" tab="基本信息"><BasicInfo ref="basicInfoRef" @handleSubmit="handleSubmit" /> </a-tab-pane>
-        <a-tab-pane key="2" tab="商品描述" force-render>Content of Tab Pane 2</a-tab-pane>
+        <a-tab-pane key="2" tab="商品描述" force-render><Editor ref="editorRef" /></a-tab-pane>
         <a-tab-pane key="3" tab="商品图片"
           ><Picture ref="pictureRef" :editFileList="editFileList"></Picture
         ></a-tab-pane>
@@ -24,6 +24,7 @@
   import * as GoodsApi from '/@/api/product/goodsApi';
   import Product from './components/product.vue';
   import Picture from './components/picture.vue';
+  import Editor from './components/editor.vue';
   import { useGo } from '/@/hooks/web/usePage';
   import lodash from 'lodash';
   import { message } from 'ant-design-vue';
@@ -33,6 +34,7 @@
   const basicInfoRef = ref();
   const pictureRef = ref();
   const productRef = ref();
+  const editorRef = ref();
   const activeKey = ref('1');
   const id = route.query.id;
   let editInfo;