编辑器

src/components/my-editor.vue

+<template>
+  <div class="modelContent" v-loading="tableloading">
+    <quill-editor style="height: 200px;" v-model="initData" ref="myQuillEditor" @change="onEditorChange($event)"></quill-editor>
+    <el-upload
+      :action="$ImageUploadUrl"
+      :on-progress='onProgress'
+      :on-success='upScuccess'
+      ref="upload"
+      style="display: none"
+      :before-upload="beforeAvatarUpload"
+      :accept='myaccept'
+      :multiple="multiple"
+    >
+      <el-button id="imgInput" element-loading-text="插入中,请稍候">点击上传</el-button>
+    </el-upload>
+  </div>
+</template>
+<script>
+  import { quillEditor } from 'vue-quill-editor'
+  // import vEditorBtn from '@/components/common/editorBtn.vue'
+  export default {
+    data () {
+      return {
+        tableloading: false,
+        data: {
+          sourceInfo: ''
+        },
+        uploadType: 'image',
+        editor: null,
+        length: 0,
+        loading: false,
+        fileList: [],
+        myaccept: 'image/*',
+        multiple: false
+      }
+    },
+    props: {
+      isReset: {
+        default: false
+      },
+      initData: {
+        default: ''
+      }
+    },
+    methods: {
+      // 上传文件之前的钩子，
+      beforeAvatarUpload (file) {
+        console.log(file)
+        if (this.uploadType === 'image') {
+          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpge' || file.type === 'image/gif'
+          const isLt2M = file.size / 1024 / 1024 < 100
+          if (!isJPG) {
+            this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+          }
+          if (!isLt2M) {
+            this.$message.error('上传图片大小不能超过 100MB!')
+          }
+          if (isJPG && isLt2M) {
+            this.tableloading = true
+          }
+          return isJPG && isLt2M
+        } else if (this.uploadType === 'video') {
+
+        }
+        this.tableloading = true
+      },
+      /* 上传图片 start */
+      onEditorFocus (editor) {
+        this.editor = editor   // 当content获取到焦点的时候就 存储editor
+      },
+      onEditorReady (editor) {
+        this.editor = editor // 当quill实例化完先 存储editor
+      },
+      customButtonClick () {
+        if (this.editor.getLength() != null) {
+          this.length = this.editor.getLength() - 1   // content获取到焦点，计算光标所在位置，目的为了在该位置插入img
+        } else {
+          this.length = this.content ? this.content.length : 0  // content没有获取到焦点时候 目的是为了在content末尾插入img
+        }
+        this.$el.querySelector('.custom-input').click()   // 打开file 选择图片
+      },
+      upload (event) {
+        if (!event.target.files[0]) return
+        var that = this
+        that.tableloading = true
+        let formData = new FormData()
+        formData.append('name', 'file')
+        formData.append('file', event.target.files[0])
+        const config = {
+          headers: { 'content-type': 'multipart/form-data' }
+        }
+        that.$axios.post(that.$imgUrl, formData, config)
+          .then(function (response) {
+            that.tableloading = false
+            that.contentImg = response // + '&imgalias/phoenix'
+            that.editor.insertEmbed(that.length, 'image', that.contentImg)
+          })
+          .catch(function (error) {
+            that.tableloading = false
+            that.showAlert(error)
+          })
+      },
+
+      // 图片上传成功回调   插入到编辑器中
+      onProgress () {
+        this.tableloading = true
+      },
+      upScuccess (e, file, fileList) {
+        console.log(e, file, fileList)
+        let that = this
+        let url = e.data
+        if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
+          let value = url.indexOf('http') !== -1 ? url : 'http:' + url
+          var img = new Image()
+          img.src = value
+          let length = that.$refs.myQuillEditor.quill.getLength() ? that.$refs.myQuillEditor.quill.getLength() - 1 : 0
+          that.$refs.myQuillEditor.quill.insertEmbed(length, that.uploadType, value)
+          that.tableloading = false
+          that.tableloading = true
+          img.onload = function () {
+            that.tableloading = false
+          }
+          img.onerror = function () {
+            that.tableloading = false
+          }
+        } else {
+          this.$message.error(`${that.uploadType}插入失败`)
+          that.tableloading = false
+        }
+      },
+
+      // 点击图片ICON触发事件
+      imgHandler (state) {
+        this.$refs['upload'].clearFiles() // 插入成功后清除input的内容
+        this.myaccept = 'image/*'
+        this.multiple = true
+        this.uploadType = 'image'
+        this.$forceUpdate()
+        setTimeout(() => {
+          this.$forceUpdate()
+          if (state) {
+            let fileInput = document.getElementById('imgInput')
+            fileInput.click() // 加一个触发事件
+          }
+        }, 300)
+      },
+      videoHandler (state) {
+        this.$refs['upload'].clearFiles() // 插入成功后清除input的内容
+        this.myaccept = 'video/*'
+        this.multiple = false
+        this.uploadType = 'video'
+        this.$forceUpdate()
+        setTimeout(() => {
+          this.$forceUpdate()
+          if (state) {
+            let fileInput = document.getElementById('imgInput')
+            fileInput.click() // 加一个触发事件
+          }
+        }, 300)
+      },
+      /* 上传图片 end */
+      onEditorChange ({ editor, html, text }) {
+        // console.log('editor change!', editor, html, text)
+        this.$emit('parentEditorChange', { editor, html, text })
+      }
+    },
+    // if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
+    // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
+    computed: {
+    },
+    mounted () {
+     
+      this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
+      this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件
+    },
+    components: {
+      quillEditor,
+      // vEditorBtn
+    },
+    watch: {
+      isReset: function (newV) {
+        console.log('newV1', newV)
+        if (newV) {
+          this.$refs.myQuillEditor.quill.setContents('')
+        }
+      },
+      initData: function (newV) {
+        console.log('newV', newV)
+        this.data.sourceInfo = newV
+      }
+    }
+
+  }
+</script>
+<style type="text/css" lang="less" scoped>
+  .ql-editor{
+    /*min-height: 400px;*/
+  }
+
+  .modelDiv{
+    margin-bottom: 15px;
+    .title{
+      font-size: 18px;
+      line-height: 40px;
+    }
+    .modelContent{
+      border:1px solid #ddd;
+      padding:10px;
+      overflow: hidden;
+    }
+    .width100{
+      width: 100%;
+    }
+    .width30{
+      width: 27%;
+      display: inline-block;
+      text-align: right;
+      padding-right: 3%;
+    }
+    .width70{
+      width: 66%;
+    }
+    .mt5{
+      margin-bottom: 8px;
+    }
+    .size{
+      font-size: 14px;
+      color: #333;
+      margin: 8px 0;
+    }
+    .tab{
+      padding-top: 20px;
+      clear: both;
+      margin: 0 8%;
+    }
+    .el-tabs__header{
+      margin:0;
+    }
+    .el-tabs__content{
+      border:1px solid rgb(209, 223, 229);
+      border-top:none;
+      padding-top:15px;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+    .width2{
+      left: -50px;
+    }
+    .width3{
+      left: -63px;
+    }
+  }
+  .el-upload .el-icon-plus{
+    width: 145px;
+    height: 145px;
+    line-height: 145px;
+  }
+</style>

src/views/flowerManage/flowerAdd.vue

@@ -53,12 +53,18 @@
           </el-form-item>            
         </el-col>
         <el-col :span="24">
-          <quill-editor 
+          <!-- <quill-editor 
               class="edit_class"
               v-model="addForm.description" 
               ref="myQuillEditor" 
               @change="onEditorChange($event)">
-            </quill-editor>
+
+            </quill-editor> -->
+            <my-editor class="edit_class" 
+              @parentEditorChange="onQuillEditorChange" 
+              :initData="addForm.description" 
+              :isReset="isEditorReset">
+            </my-editor>
         </el-col>
       </el-form>
     </el-row>
@@ -72,6 +78,7 @@
 </template>
 <script>
 import moment from 'moment'
+import myEditor from "../../components/my-editor.vue";
 import { quillEditor } from 'vue-quill-editor'
 export default {
   name: 'cookDetail',
@@ -79,22 +86,26 @@ export default {
     return {
       addForm: {
       },
-      imageUrl: ''
+      imageUrl: '',
+      isEditorReset: false
     }
   },
   created (){
     this.$route.params.item.description = this.$route.params.item.description.replace(/\$\{\(domainUrlUtil.EJS_IMAGE_RESOURCES\)\!\}/g, 'https://www.i-sirius.com/ejsimage')
     this.addForm = this.$route.params.item
-    console.log(this.$route.params.item.description)
     this.imageUrl = this.$route.params.item.masterImg
   },
   components: {
-    quillEditor
+    quillEditor,
+    myEditor
   },
   methods: {
     onEditorChange ({ editor, html, text }) {
       console.log('editor change!', editor, html, text)
     },
+    onQuillEditorChange (res) {
+      this.addForm.description = res.html
+    },
     saveBtn () {
       var params = {
         id: this.addForm.id,