编辑器上传图片

src/components/XyTinymce/EditorImage.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="upload-container">
-    <el-button icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
+  <!--  <el-button icon="el-icon-upload" size="mini" type="primary" @click="dialogVisible=true">
       上传图片
-    </el-button>
-    <el-dialog :visible.sync="dialogVisible" :modal="false">
+    </el-button> -->
+    <el-dialog :visible.sync="dialogVisible" :modal="false" @close="canceldialogVisible">
       <el-upload
         :multiple="true"
         :file-list="fileList"
@@ -19,7 +19,7 @@
           点击上传
         </el-button>
       </el-upload>
-      <el-button @click="dialogVisible = false">
+      <el-button @click="canceldialogVisible">
         取消
       </el-button>
       <el-button type="primary" @click="handleSubmit">
@@ -36,15 +36,24 @@ import { Message } from 'element-ui'
 export default {
   name: 'EditorSlideUpload',
   props: {
+    show:{
+      type:Boolean,
+      default:false
+    }
   },
   data() {
     return {
       action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
-      dialogVisible: false,
+      dialogVisible: this.show,
       listObj: {},
       fileList: []
     }
   },
+  watch:{
+    show(val){
+      this.dialogVisible = val
+    }
+  },
   methods: {
     checkAllSuccess() {
       return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
@@ -59,6 +68,12 @@ export default {
       this.listObj = {}
       this.fileList = []
       this.dialogVisible = false
+      this.$emit('updateshow',this.dialogVisible)
+      // this.show = false
+    },
+    canceldialogVisible(){
+      this.dialogVisible = false
+      this.$emit('updateshow',this.dialogVisible)
     },
     handleSuccess(response, file) {
       const uid = file.uid

src/components/XyTinymce/index.vue

@@ -2,8 +2,10 @@
   <div class="tinymce">
     <Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
     <EditorImage
+      :show="showImg"
       class="tinymce__upload"
       @successCBK="imageSuccessCBK"
+      @updateshow="updateshow"
     ></EditorImage>
   </div>
 </template>
@@ -54,18 +56,19 @@ export default {
     },
     toolbar: {
       type: [String, Array],
-      default: ` undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough  anchor | alignleft aligncenter alignright alignjustify outdent indent |
+      default: ` undo redo restoredraft | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough  anchor | alignleft aligncenter alignright alignjustify outdent indent |
                 styleselect formatselect fontselect fontsizeselect | table image  charmap emoticons hr pagebreak |bullist numlist | blockquote subscript superscript removeformat |
                  insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs`,
     },
     menubar: {
       type: String,
-      default: "edit insert view format table",
+      default: "edit insert view format table CardBtn",
     },
   },
   data() {
     return {
       myValue: this.value,
+      showImg:false,
       init: {
         language_url: "@/asset/tinymce/langs/zh_CN.js", // 这里需要单独处理
         language: "zh_CN",
@@ -75,6 +78,18 @@ export default {
         toolbar: this.toolbar,
         branding: false,
         menubar: this.menubar,
+        setup: (editor) => {
+          let _this = this
+          //定义一个名为 assignment 的toolbar
+          editor.ui.registry.addButton('assignment', {
+            text: `<i class="el-icon-position" style="font-size: 16px">上传</i>`,
+            tooltip: '图片上传',
+            onAction: () => {
+              this.showImg = true
+              // _this.showEdit = true
+            },
+          })
+        },
         //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
         //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
         // images_upload_handler: (blobInfo, success, failure) => {
@@ -85,6 +100,9 @@ export default {
     };
   },
   methods: {
+    updateshow(val){
+      this.showImg = val
+    },
     imageSuccessCBK(arr) {
       arr.forEach(
         (v) => (this.myValue += `<img class="wscnph" src="${v.url}" >`)
@@ -115,5 +133,8 @@ export default {
     right: 4px;
     top: 0px;
   }
+  ::v-deep .tox.tox-tinymce.tox-fullscreen{
+    z-index:0
+  }
 }
 </style>