Sfoglia il codice sorgente

fix(admin): add missing wangEditor Toolbar component to enable rich text editing

- Import and register Toolbar alongside Editor in ArticleEdit, ActivityEdit, ProductEdit
- Fix prop name from :config to :defaultConfig (wangEditor Vue2 API)
- Add toolbarConfig for Toolbar component initialization
- Add missing @wangeditor/editor CSS import to ArticleEdit and ActivityEdit
- Add editor CSS styles (rich-editor border, toolbar wrap, text-container min-height)
Xiaogang Liao 2 mesi fa
parent
commit
5f682c1ebf

+ 16 - 3
cfc-web/src/views/admin/ActivityEdit.vue

@@ -44,7 +44,8 @@
 
 
         <el-form-item label="活动描述" prop="description">
         <el-form-item label="活动描述" prop="description">
           <div class="rich-editor" :class="{ 'is-disabled': readonly }">
           <div class="rich-editor" :class="{ 'is-disabled': readonly }">
-            <Editor v-model="form.description" :config="editorConfig" @onCreated="handleEditorCreated" :disabled="readonly" style="min-height: 300px;" />
+            <Toolbar :editor="editorInstance" :defaultConfig="toolbarConfig" />
+            <Editor :defaultConfig="editorConfig" v-model="form.description" @onCreated="handleEditorCreated" :disabled="readonly" style="min-height: 300px;" />
           </div>
           </div>
         </el-form-item>
         </el-form-item>
 
 
@@ -155,11 +156,12 @@
 import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
 import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
 import { getActivityDetail, createActivity, updateActivity, publishActivity, submitActivityReview, reDraftActivity } from '@/api/activity'
 import { getActivityDetail, createActivity, updateActivity, publishActivity, submitActivityReview, reDraftActivity } from '@/api/activity'
 import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'
 import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'
-import { Editor } from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import '@wangeditor/editor/dist/css/style.css'
 
 
 export default {
 export default {
   name: 'ActivityEdit',
   name: 'ActivityEdit',
-  components: { DimensionWeightPicker, Editor },
+  components: { DimensionWeightPicker, Editor, Toolbar },
   data() {
   data() {
     return {
     return {
       isEdit: false,
       isEdit: false,
@@ -208,6 +210,7 @@ export default {
         ]
         ]
       },
       },
       editorConfig: null,
       editorConfig: null,
+      toolbarConfig: {},
       editorInstance: null
       editorInstance: null
     }
     }
   },
   },
@@ -523,4 +526,14 @@ activityId
   border-radius: 4px;
   border-radius: 4px;
   border: 1px solid #ddd;
   border: 1px solid #ddd;
 }
 }
+.rich-editor {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+.rich-editor /deep/ .w-e-toolbar {
+  flex-wrap: wrap;
+}
+.rich-editor /deep/ .w-e-text-container {
+  min-height: 300px;
+}
 </style>
 </style>

+ 16 - 3
cfc-web/src/views/admin/ArticleEdit.vue

@@ -87,7 +87,8 @@
 
 
         <el-form-item label="内容">
         <el-form-item label="内容">
           <div class="rich-editor" :class="{ 'is-disabled': readonly }">
           <div class="rich-editor" :class="{ 'is-disabled': readonly }">
-            <Editor v-model="form.content" :config="editorConfig" @onCreated="handleEditorCreated" :disabled="readonly" style="min-height: 400px;" />
+            <Toolbar :editor="editorInstance" :defaultConfig="toolbarConfig" />
+            <Editor :defaultConfig="editorConfig" v-model="form.content" @onCreated="handleEditorCreated" :disabled="readonly" style="min-height: 400px;" />
           </div>
           </div>
         </el-form-item>
         </el-form-item>
 
 
@@ -137,11 +138,12 @@ import {
 } from '@/api/article.js'
 } from '@/api/article.js'
 import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'
 import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'
 import { getTagList } from '@/api/dimension.js'
 import { getTagList } from '@/api/dimension.js'
-import { Editor } from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import '@wangeditor/editor/dist/css/style.css'
 
 
 export default {
 export default {
   name: 'ArticleEdit',
   name: 'ArticleEdit',
-  components: { DimensionWeightPicker, Editor },
+  components: { DimensionWeightPicker, Editor, Toolbar },
   data() {
   data() {
     return {
     return {
       isEdit: false,
       isEdit: false,
@@ -157,6 +159,7 @@ export default {
       categories: [],
       categories: [],
       tagOptions: [],
       tagOptions: [],
       editorConfig: null,
       editorConfig: null,
+      toolbarConfig: {},
       editorInstance: null,
       editorInstance: null,
       form: {
       form: {
         id: null,
         id: null,
@@ -524,4 +527,14 @@ export default {
   border: 1px solid #dcdfe6;
   border: 1px solid #dcdfe6;
   cursor: pointer;
   cursor: pointer;
 }
 }
+.rich-editor {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+.rich-editor /deep/ .w-e-toolbar {
+  flex-wrap: wrap;
+}
+.rich-editor /deep/ .w-e-text-container {
+  min-height: 400px;
+}
 </style>
 </style>

+ 5 - 3
cfc-web/src/views/admin/ProductEdit.vue

@@ -25,7 +25,8 @@
 
 
         <el-form-item label="商品描述" prop="description">
         <el-form-item label="商品描述" prop="description">
           <div class="rich-editor">
           <div class="rich-editor">
-            <Editor v-model="form.description" :config="editorConfig" @onCreated="handleEditorCreated" style="min-height: 300px;" />
+            <Toolbar :editor="editorInstance" :defaultConfig="toolbarConfig" />
+            <Editor :defaultConfig="editorConfig" v-model="form.description" @onCreated="handleEditorCreated" style="min-height: 300px;" />
           </div>
           </div>
         </el-form-item>
         </el-form-item>
 
 
@@ -135,12 +136,12 @@ import { getProduct, createProduct, updateProduct, listAllSupplySystems } from '
 import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight'
 import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight'
 import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
 import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
 import ProductSkuEditor from './components/ProductSkuEditor.vue'
 import ProductSkuEditor from './components/ProductSkuEditor.vue'
-import { Editor } from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import '@wangeditor/editor/dist/css/style.css'
 import '@wangeditor/editor/dist/css/style.css'
 
 
 export default {
 export default {
   name: 'ProductEdit',
   name: 'ProductEdit',
-  components: { DimensionWeightPicker, ProductSkuEditor, Editor },
+  components: { DimensionWeightPicker, ProductSkuEditor, Editor, Toolbar },
   data() {
   data() {
     return {
     return {
       form: {
       form: {
@@ -188,6 +189,7 @@ export default {
           }
           }
         }
         }
       },
       },
+      toolbarConfig: {},
       editorInstance: null
       editorInstance: null
     }
     }
   },
   },