update[litemall-admin]: 商品详细信息支持tinymce富文本编辑

litemall-admin/src/components/BackToTop/index.vue

@@ -25,14 +25,16 @@ export default {
     },
     customStyle: {
       type: Object,
-      default: {
-        right: '50px',
-        bottom: '50px',
-        width: '40px',
-        height: '40px',
-        'border-radius': '4px',
-        'line-height': '45px',
-        background: '#e7eaf1'
+      default: function() {
+        return {
+          right: '50px',
+          bottom: '50px',
+          width: '40px',
+          height: '40px',
+          'border-radius': '4px',
+          'line-height': '45px',
+          background: '#e7eaf1'
+        }
       }
     },
     transitionName: {

litemall-admin/src/components/Tinymce/components/editorImage.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="upload-container">
-    <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
-    </el-button>
-    <el-dialog :visible.sync="dialogVisible">
-      <el-upload class="editor-slide-upload" action="https://httpbin.org/post" :multiple="true" :file-list="fileList" :show-file-list="true"
-        list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
-        <el-button size="small" type="primary">点击上传</el-button>
-      </el-upload>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="handleSubmit">确 定</el-button>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-// import { getToken } from 'api/qiniu'
-
-export default {
-  name: 'editorSlideUpload',
-  props: {
-    color: {
-      type: String,
-      default: '#1890ff'
-    }
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      listObj: {},
-      fileList: []
-    }
-  },
-  methods: {
-    checkAllSuccess() {
-      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
-    },
-    handleSubmit() {
-      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
-      if (!this.checkAllSuccess()) {
-        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
-        return
-      }
-      console.log(arr)
-      this.$emit('successCBK', arr)
-      this.listObj = {}
-      this.fileList = []
-      this.dialogVisible = false
-    },
-    handleSuccess(response, file) {
-      const uid = file.uid
-      const objKeyArr = Object.keys(this.listObj)
-      for (let i = 0, len = objKeyArr.length; i < len; i++) {
-        if (this.listObj[objKeyArr[i]].uid === uid) {
-          this.listObj[objKeyArr[i]].url = response.files.file
-          this.listObj[objKeyArr[i]].hasSuccess = true
-          return
-        }
-      }
-    },
-    handleRemove(file) {
-      const uid = file.uid
-      const objKeyArr = Object.keys(this.listObj)
-      for (let i = 0, len = objKeyArr.length; i < len; i++) {
-        if (this.listObj[objKeyArr[i]].uid === uid) {
-          delete this.listObj[objKeyArr[i]]
-          return
-        }
-      }
-    },
-    beforeUpload(file) {
-      const _self = this
-      const _URL = window.URL || window.webkitURL
-      const fileName = file.uid
-      this.listObj[fileName] = {}
-      return new Promise((resolve, reject) => {
-        const img = new Image()
-        img.src = _URL.createObjectURL(file)
-        img.onload = function() {
-          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
-        }
-        resolve(true)
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.upload-container {
-  .editor-slide-upload {
-    margin-bottom: 20px;
-  }
-}
-</style>

litemall-admin/src/components/Tinymce/index.vue

@@ -1,20 +1,16 @@
 <template>
   <div class="tinymce-container editor-container">
     <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
-    <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
-    </div>
   </div>
 </template>
 
 <script>
-import editorImage from './components/editorImage'
 import plugins from './plugins'
 import toolbar from './toolbar'
+import { createStorage } from '@/api/storage'
 
 export default {
   name: 'tinymce',
-  components: { editorImage },
   props: {
     id: {
       type: String
@@ -68,6 +64,7 @@ export default {
       window.tinymce.init({
         selector: `#${this.tinymceId}`,
         height: this.height,
+        language: 'zh_CN',
         body_class: 'panel-body ',
         object_resizing: false,
         toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
@@ -79,7 +76,6 @@ export default {
         code_dialog_width: 1000,
         advlist_bullet_styles: 'square',
         advlist_number_styles: 'default',
-        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
         default_link_target: '_blank',
         link_title: false,
         init_instance_callback: editor => {
@@ -91,6 +87,15 @@ export default {
             this.hasChange = true
             this.$emit('input', editor.getContent({ format: 'raw' }))
           })
+        },
+        images_upload_handler: function(blobInfo, success, failure) {
+          const formData = new FormData()
+          formData.append('file', blobInfo.blob())
+          createStorage(formData).then(res => {
+            success(res.data.data.url)
+          }).catch(() => {
+            failure('上传失败，请重新上传')
+          })
         }
         // 整合七牛上传
         // images_dataimg_filter(img) {

litemall-admin/src/components/Tinymce/plugins.js

@@ -2,6 +2,6 @@
 // Detail plugins list see https://www.tinymce.com/docs/plugins/
 // Custom builds see https://www.tinymce.com/download/custom-builds/
 
-const plugins = ['advlist anchor autolink autoresize autosave bbcode code codesample colorpicker colorpicker contextmenu directionality emoticons fullpage fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
+const plugins = ['advlist anchor autolink autoresize autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
 
 export default plugins

litemall-admin/src/styles/element-ui.scss

@@ -52,17 +52,6 @@
    margin: 0 auto;
  }
 
- //文章页textarea修改样式
- .article-textarea {
-   textarea {
-     padding-right: 40px;
-     resize: none;
-     border: none;
-     border-radius: 0px;
-     border-bottom: 1px solid #bfcbd9;
-   }
- }
-
  //element ui upload
  .upload-container {
    .el-upload {

litemall-admin/src/views/goods/goods.vue

@@ -153,8 +153,8 @@
           <el-input v-model="dataForm.goodsBrief"></el-input>
         </el-form-item> 
             
-        <el-form-item label="商品详细介绍">
-          <el-input v-model="dataForm.goodsDesc"></el-input>
+        <el-form-item style="width: 700px;" label="商品详细介绍">
+          <tinymce v-model="dataForm.goodsDesc"></tinymce>
         </el-form-item>
         
         <el-form-item label="商品主图">
@@ -199,16 +199,21 @@
     margin-right: 0;
     margin-bottom: 0;
   }
+  .el-dialog {
+    width: 800px;
+  }
+
 </style>
 
 <script>
 import { listGoods, createGoods, updateGoods, deleteGoods } from '@/api/goods'
 import waves from '@/directive/waves' // 水波纹指令
 import BackToTop from '@/components/BackToTop'
+import Tinymce from '@/components/Tinymce'
 
 export default {
   name: 'Goods',
-  components: { BackToTop },
+  components: { BackToTop, Tinymce },
   directives: { waves },
   data() {
     return {

litemall-admin/src/views/layout/components/Sidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <scroll-bar>
-    <el-menu mode="vertical" unique-opened="true" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
+    <el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
       <sidebar-item :routes="permission_routers"></sidebar-item>
     </el-menu>
   </scroll-bar>