修改

package.json

@@ -26,9 +26,9 @@
     "qs": "^6.8.0",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",
-    "vuex": "3.1.0",
-    "wangeditor": "^3.1.1"
+    "vuex": "3.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/layout/index.vue

@@ -81,7 +81,7 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 11111;
+  z-index: 1111;
   width: calc(100% - #{$sideBarWidth});
   transition: width 0.28s;
 }

src/views/contentManager/contentOperation.vue

@@ -25,9 +25,14 @@
         </el-upload>
         </el-form-item>
         <el-form-item label="商品描述" prop="desc" >
-          <div id="wangeditor">
-            <div ref="editorElem" style="text-align:left;"></div>
-          </div>
+          <!-- bidirectional data binding（双向数据绑定） -->
+            <quill-editor v-model="content"
+                ref="myQuillEditor"
+                :options="editorOption"
+                @blur="onEditorBlur($event)"
+                @focus="onEditorFocus($event)"
+                @ready="onEditorReady($event)">
+            </quill-editor>
         </el-form-item>
         <el-form-item>
           <el-button @click="onSubmit('form')" type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
@@ -41,175 +46,204 @@
 import { categoryListTree, goodsAdd, goodsUpdate, goodsSingleQuery } from '@/api/businessManager'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
+// import E from 'wangeditor'
+// require styles
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
 
-import E from 'wangeditor'
+import { quillEditor } from 'vue-quill-editor'
 export default {
-  data () {
-    return {
-      categoryList: [],
-      type: this.$route.query.type,
-      pageType: this.$route.query.pageType,
-      organId: store.getters.organ,
-      headers: {
-        Authorization: getToken()
-      },
-      form: {
-        brand: null,
-        name: null,
-        type: null,
-        goodsCategoryId: null,
-        specification: null,
-        marketPrice: null,
-        groupPurchasePrice: null,
-        discountPrice: null,
-        image: null,
-        desc: null
-      },
-      rules: {
-        brand: [{ required: true, message: '请输入品牌', trigger: 'blur' },
-          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }]
-      }
-    }
-  },
-  mounted() {
-    // this.getList()
-    this.editor = new E(this.$refs.editorElem)
-    // 编辑器的事件，每次改变会获取其html内容
-    this.editor.customConfig.onchange = html => {
-      this.editorContent = html;
-      // this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
-    };
-    this.editor.customConfig.menus = [
-      // 菜单配置
-      'head', // 标题
-      'bold', // 粗体
-      'fontSize', // 字号
-      'fontName', // 字体
-      'italic', // 斜体
-      'underline', // 下划线
-      'strikeThrough', // 删除线
-      'foreColor', // 文字颜色
-      'backColor', // 背景颜色
-      'link', // 插入链接
-      'list', // 列表
-      'justify', // 对齐方式
-      'quote', // 引用
-      'emoticon', // 表情
-      'image', // 插入图片
-      'table', // 表格
-      'code', // 插入代码
-      'undo', // 撤销
-      'redo' // 重复
-    ]
-    this.editor.create() // 创建富文本实例
-  },
-  methods: {
-    onSubmit(formName) {
-      console.log(this.editorContent)
-      // this.$refs[formName].validate((valid) => {
-      //   if (valid) {
-      //     if (this.pageType == 'create') {
-      //       if(this.form.id) { // 判断有没有Id，如果有则删除
-      //         delete this.form.id
-      //       }
-      //       this.form.status = 'YES' // 默认上架
-      //       goodsAdd(this.form).then(res => {
-      //         this.messageTips('添加', res)
-      //       })
-      //     } else if (this.pageType == 'update') {
-      //       goodsUpdate(this.form).then(res => {
-      //         this.messageTips('修改', res)
-      //       })
-      //     }
-      //   } else {
-      //     return false
-      //   }
-      // })
-    },
-    messageTips(title, res) {
-      if(res.code == 200) {
-        this.$message({
-          message: title + '成功',
-          type: 'success'
-        })
-        this.$router.push({
-          path: '/contentManager/contentManager',
-          query: {
-            type: this.typeIndex(this.type)
-          }
-        })
-      } else {
-        this.$message.error(res.msg)
-      }
+    components: {
+        quillEditor
     },
-    onCancel() {
-      this.$router.push({
-        path: '/contentManager/contentManager',
-        query: {
-          type: this.typeIndex(this.type)
+    data () {
+        return {
+            categoryList: [],
+            type: this.$route.query.type,
+            pageType: this.$route.query.pageType,
+            organId: store.getters.organ,
+            headers: {
+                Authorization: getToken()
+            },
+            content: '<h2>I am Example</h2>',
+            editorOption: {
+            // some quill options
+            },
+            form: {
+                brand: null,
+                name: null,
+                type: null,
+                goodsCategoryId: null,
+                specification: null,
+                marketPrice: null,
+                groupPurchasePrice: null,
+                discountPrice: null,
+                image: null,
+                desc: null
+            },
+            rules: {
+                brand: [{ required: true, message: '请输入品牌', trigger: 'blur' },
+                { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }]
+            }
         }
-      })
     },
-    onReSet(formName) {
-      this.$refs[formName].resetFields()
+    mounted() {
+        // this.getList()
+        // this.editor = new E(this.$refs.editorElem)
+        // this.editor.customConfig.onchange = html => {
+        //   this.editorContent = html
+        // };
+        // this.editor.customConfig.menus = [
+        //   // 菜单配置
+        //   'head', // 标题
+        //   'bold', // 粗体
+        //   'fontSize', // 字号
+        //   'fontName', // 字体
+        //   'italic', // 斜体
+        //   'underline', // 下划线
+        //   'strikeThrough', // 删除线
+        //   'foreColor', // 文字颜色
+        //   'backColor', // 背景颜色
+        //   'link', // 插入链接
+        //   'list', // 列表
+        //   'justify', // 对齐方式
+        //   'quote', // 引用
+        //   'emoticon', // 表情
+        //   'image', // 插入图片
+        //   'table', // 表格
+        //   'code', // 插入代码
+        //   'undo', // 撤销
+        //   'redo' // 重复
+        // ]
+        // this.editor.create() // 创建富文本实例
+        console.log('this is current quill instance object', this.editor)
     },
-    getList() {
-      if(this.pageType == 'create') return false
-      goodsSingleQuery(this.$route.query.id).then(res => {
+    methods: {
+        onSubmit(formName) {
+        console.log(this.editorContent)
+        // this.$refs[formName].validate((valid) => {
+        //   if (valid) {
+        //     if (this.pageType == 'create') {
+        //       if(this.form.id) { // 判断有没有Id，如果有则删除
+        //         delete this.form.id
+        //       }
+        //       this.form.status = 'YES' // 默认上架
+        //       goodsAdd(this.form).then(res => {
+        //         this.messageTips('添加', res)
+        //       })
+        //     } else if (this.pageType == 'update') {
+        //       goodsUpdate(this.form).then(res => {
+        //         this.messageTips('修改', res)
+        //       })
+        //     }
+        //   } else {
+        //     return false
+        //   }
+        // })
+        },
+        messageTips(title, res) {
         if(res.code == 200) {
-          let result = res.data
-          this.form = {
-            id: result.id,
-            brand: result.brand,
-            name: result.name,
-            type: result.type,
-            goodsCategoryId: result.goodsCategoryId,
-            specification: result.specification,
-            marketPrice: result.marketPrice,
-            groupPurchasePrice: result.groupPurchasePrice,
-            discountPrice: result.discountPrice,
-            image: result.image,
-            desc: result.desc
-          }
+            this.$message({
+            message: title + '成功',
+            type: 'success'
+            })
+            this.$router.push({
+            path: '/contentManager/contentManager',
+            query: {
+                type: this.typeIndex(this.type)
+            }
+            })
+        } else {
+            this.$message.error(res.msg)
         }
-      })
-    },
-    handleAvatarSuccess(res, file) {
-      this.form.image = res.data.url
-    },
-    beforeAvatarUpload(file) {
-      const imageType = {
-        'image/png': true,
-        'image/jpeg': true 
-      }
-      const isImage = imageType[file.type]
-      const isLt2M = file.size / 1024 / 1024 < 2
+        },
+        onCancel() {
+        this.$router.push({
+            path: '/contentManager/contentManager',
+            query: {
+            type: this.typeIndex(this.type)
+            }
+        })
+        },
+        onReSet(formName) {
+        this.$refs[formName].resetFields()
+        },
+        getList() {
+        if(this.pageType == 'create') return false
+        goodsSingleQuery(this.$route.query.id).then(res => {
+            if(res.code == 200) {
+            let result = res.data
+            this.form = {
+                id: result.id,
+                brand: result.brand,
+                name: result.name,
+                type: result.type,
+                goodsCategoryId: result.goodsCategoryId,
+                specification: result.specification,
+                marketPrice: result.marketPrice,
+                groupPurchasePrice: result.groupPurchasePrice,
+                discountPrice: result.discountPrice,
+                image: result.image,
+                desc: result.desc
+            }
+            }
+        })
+        },
+        handleAvatarSuccess(res, file) {
+        this.form.image = res.data.url
+        },
+        beforeAvatarUpload(file) {
+        const imageType = {
+            'image/png': true,
+            'image/jpeg': true 
+        }
+        const isImage = imageType[file.type]
+        const isLt2M = file.size / 1024 / 1024 < 2
 
-      if (!isImage) {
-        this.$message.error('只能上传图片格式!')
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isImage && isLt2M;
+        if (!isImage) {
+            this.$message.error('只能上传图片格式!')
+        }
+        if (!isLt2M) {
+            this.$message.error('上传头像图片大小不能超过 2MB!')
+        }
+        return isImage && isLt2M;
+        },
+        typeChange(type) {
+        let tempTitle = {
+            1: "精彩活动",
+            2: "热门资讯",
+            3: "活动列表"
+        }
+        return tempTitle[type]
+        },
+        typeIndex(type) {
+        let tempTitle = {
+            3: 0,
+            1: 1,
+            2: 2
+        }
+        return tempTitle[type]
+        },
+        onEditorBlur(quill) {
+            console.log('editor blur!', quill)
+        },
+        onEditorFocus(quill) {
+            console.log('editor focus!', quill)
+        },
+        onEditorReady(quill) {
+            console.log('editor ready!', quill)
+        },
+        onEditorChange({ quill, html, text }) {
+            console.log('editor change!', quill, html, text)
+            this.content = html
+        }
     },
-    typeChange(type) {
-      let tempTitle = {
-        1: "精彩活动",
-        2: "热门资讯",
-        3: "活动列表"
+    computed: {
+      editor() {
+        return this.$refs.myQuillEditor.quill
       }
-      return tempTitle[type]
     },
-    typeIndex(type) {
-      let tempTitle = {
-        3: 0,
-        1: 1,
-        2: 2
-      }
-      return tempTitle[type]
-    }
-  }
 }
 </script>
 <style lang="scss" scoped>