添加富文本编辑器

package.json

@@ -71,6 +71,7 @@
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0",
+    "wangeditor": "^4.7.11",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {

src/views/system/goods/add/components/goodsimg2.vue

+<template>
+  <div class="goods-img">
+    <div id="wangeditor" ref="editorElem">
+    </div>
+  </div>
+</template>
+
+<script>
+  import E from 'wangeditor'
+  import { UploadImg } from '@/api/module/goods'
+  export default {
+    props: {
+      description: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        editor: null
+      }
+    },
+    mounted() {
+      let that = this
+      // 富文本编辑器
+      const editor = new E('#wangeditor')
+      editor.config.height = 500
+      editor.config.uploadImgMaxLength = 1
+      editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+        // resultFiles 是 input 中选中的文件列表
+        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
+
+        that.getBase64(resultFiles[0]).then((res) => {
+          let result = res.split(",")
+          let Base64img = result[1]
+
+          // 上传图片，返回结果，将图片插入到编辑器中
+          let data = {"img_data": Base64img}
+          UploadImg(data).then(res => {
+            if (res.code == 1) {
+              insertImgFn(res.data.image_url)
+            }
+          })
+        })
+      }
+
+      editor.create()
+      this.editor = editor
+
+      if( this.description ) {
+        this.editor.txt.html(this.description)
+      }
+    },
+    methods: {
+      initInfo() {
+        this.editor = null
+      },
+      getBase64(file) {
+        return new Promise(function (resolve, reject) {
+          let reader = new FileReader();
+          let imgResult = "";
+          reader.readAsDataURL(file);
+          reader.onload = function () {
+            imgResult = reader.result;
+          };
+          reader.onerror = function (error) {
+            reject(error);
+          };
+          reader.onloadend = function () {
+            resolve(imgResult);
+          };
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .goods-img {
+    padding: 20px;
+  }
+</style>

src/views/system/goods/add/index.vue

@@ -52,7 +52,7 @@
         <div class="floor-item">
           <div class="floor-item-box">
             <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p>
-            <Goodsimg ref="goodsdetailsimg" :imgdata="imgdata"/>
+            <Goodsimg ref="goodsdetailsimg" :description="description"/>
           </div>
         </div>
         <!-- 售后及服务 -->
@@ -83,7 +83,7 @@
   import Goodsinfomation from './components/goodsinfomation';
   import GoodsSpecifications from './components/goodsspecifications';
   import GoodsParameter from './components/goodsparameter';
-  import Goodsimg from './components/goodsimg';
+  import Goodsimg from './components/goodsimg2';
   import Goodsaftersale from './components/goodsaftersale';
 
   export default {
@@ -141,9 +141,10 @@
           singleSpecTable: []
         },
         /* 商品详情 */
-        imgdata: {
-          description: ''
-        },
+        // imgdata: {
+        //   description: ''
+        // },
+        description: '',
         /* 售后及服务 */
         goodsaftersale: {
           stags: [],
@@ -237,7 +238,7 @@
             }
 
             // 商品详情
-            this.imgdata.description = res.data.description;
+            this.description = res.data.description;
 
             // 售后服务
             this.goodsaftersale.freight_id = res.data.freight_id;
@@ -450,7 +451,6 @@
           }
         }else {
           // 无规格组合数据
-          debugger
           let slingleSpeObj = spsjData1[0];
           if ( !Number(slingleSpeObj['js_price']) ||  Number(slingleSpeObj['js_price']) <0 ) {
             goodsPriceMsg = '[ 商品售价 ]中，协议价不能为空，并且只能填大于0的数值'
@@ -471,7 +471,8 @@
         }
 
         // 商品详情 是否填写完整
-        let isGoodsDetailsImgMsg = (this.$refs.goodsdetailsimg.goodsDeForm.description.indexOf('img') > -1) ? true : false;
+        // let isGoodsDetailsImgMsg = (this.$refs.goodsdetailsimg.goodsDeForm.description.indexOf('img') > -1) ? true : false;
+        let isGoodsDetailsImgMsg = (this.$refs.goodsdetailsimg.editor.txt.html()) ? true : false
 
         // 售后服务 是否填写完整
         let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm();
@@ -489,9 +490,8 @@
             return
           }
         }
-
         if(!isGoodsDetailsImgMsg) {
-          this.$message({type:'error',message:'请先上传描述商品详情的图片'});
+          this.$message({type:'error',message:'商品详情未填写完整'});
           this.setFloorNavMountClick(3);
           return
         }
@@ -560,13 +560,15 @@
 
 
         // 商品详情 数据
-        let spxqData = this.$refs.goodsdetailsimg.goodsDeForm;
+        // let spxqData = this.$refs.goodsdetailsimg.goodsDeForm;
+        let spxqData =  String(this.$refs.goodsdetailsimg.editor.txt.html())
 
         // 售后服务 数据
         let ssffData = this.$refs.goodsaftersale.goodsAfterSaleForm;
 
         // 所有数据合并
-        Object.assign( this.goodsAllData, spxxData, spsjData, spxqData, ssffData);
+        Object.assign( this.goodsAllData, spxxData, spsjData, ssffData);
+        this.goodsAllData.description = spxqData
 
         // 经营类目，服务标签，需要单独处理数据格式
         this.goodsAllData.category_id = spxxData.categoryList.slice(-1)[0] ? spxxData.categoryList.slice(-1)[0] : '';