JeecgBoot 2.4 微服务正式版本发布，基于SpringBoot的低代码平台

ant-design-vue-jeecg/src/components/jeecg/JMarkdownEditor/index.vue

@@ -1,5 +1,28 @@
 <template>
-  <div class="j-markdown-editor" :id="id"/>
+  <div>
+    <div class="j-markdown-editor" :id="id"/>
+    <div v-if="isShow">
+      <j-modal
+        title="图片上传"
+        :visible.sync="dialogVisible"
+        width="30%"
+        :before-close="handleClose"
+        @ok="handleOk">
+        <a-tabs default-active-key="1" @change="handleChange">
+          <a-tab-pane tab="本地图片上传" key="1" :forceRender="true">
+            <j-upload v-model="fileList" :number="1"></j-upload>
+            <div style="margin-top: 20px">
+              <a-input v-model="remark" placeholder="请填写备注"></a-input>
+            </div>
+          </a-tab-pane>
+          <a-tab-pane tab="网络图片地址" key="2" :forceRender="true">
+            <a-input v-model="networkPic" placeholder="请填写网络图片地址"></a-input>
+            <a-input style="margin-top: 20px" v-model="remark" placeholder="请填写备注"></a-input>
+          </a-tab-pane>
+        </a-tabs>
+      </j-modal>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -9,9 +32,14 @@ import '@toast-ui/editor/dist/i18n/zh-cn';
 
 import Editor from '@toast-ui/editor';
 import defaultOptions from './default-options'
+import JUpload from '@/components/jeecg/JUpload'
+import { getFileAccessHttpUrl } from '@/api/manage'
 
 export default {
   name: 'JMarkdownEditor',
+  components: {
+    JUpload,
+  },
   props: {
     value: {
       type: String,
@@ -47,7 +75,16 @@ export default {
   },
   data() {
     return {
-      editor: null
+      editor: null,
+      isShow:false,
+      activeIndex:"1",
+      dialogVisible:false,
+      index:"1",
+      fileList:[],
+      remark:"",
+      imageName:"",
+      imageUrl:"",
+      networkPic:""
     }
   },
   computed: {
@@ -94,6 +131,40 @@ export default {
       this.editor.on('change', () => {
         this.$emit('change', this.editor.getMarkdown())
       })
+      //--begin 添加自定义上传按钮
+      /*
+       * 添加自定义按钮
+       */
+      //获取编辑器上的功能条
+      let toolbar = this.editor.getUI().getToolbar();
+      let fileDom = this.$refs.files;
+      //添加图片点击事件
+      this.editor.eventManager.addEventType('isShowClickEvent');
+      this.editor.eventManager.listen('isShowClickEvent', () => {
+        this.isShow = true
+        this.dialogVisible = true
+      });
+      //addImageBlobHook图片上传、剪切、拖拽都会走此方法
+      // 删除默认监听事件
+      this.editor.eventManager.removeEventHandler('addImageBlobHook')
+      // 添加自定义监听事件
+      this.editor.eventManager.listen('addImageBlobHook', (blob, callback) => {
+        this.upload(blob, url => {
+          callback(url)
+        })
+      })
+      // 添加自定义按钮 第二个参数代表位置，不传默认放在最后
+      toolbar.insertItem(15,{
+        type: 'button',
+        options:{
+          name: 'customize',
+          className: 'tui-image tui-toolbar-icons',
+          event: 'isShowClickEvent',
+          tooltip: '上传图片',
+        }
+        //
+      });
+      //--end 添加自定义上传按钮
     },
     destroyEditor() {
       if (!this.editor) return
@@ -111,7 +182,57 @@ export default {
     },
     getHtml() {
       return this.editor.getHtml()
-    }
+    },
+    handleOk(){
+      if(this.index=='1'){
+        this.imageUrl = getFileAccessHttpUrl(this.fileList)
+        if(this.remark){
+          this.addImgToMd(this.imageUrl,this.remark)
+        }else{
+          this.addImgToMd(this.imageUrl,"")
+        }
+      }else{
+        if(this.remark){
+          this.addImgToMd(this.networkPic,this.remark)
+        }else{
+          this.addImgToMd(this.networkPic,"")
+        }
+      }
+      this.index="1"
+      this.fileList=[]
+      this.imageName="";
+      this.imageUrl="";
+      this.remark=""
+      this.networkPic=""
+      this.dialogVisible=false
+      this.isShow=false;
+    },
+    handleClose(done) {
+      done();
+    },
+    handleChange(val){
+      this.fileList=[]
+      this.remark=""
+      this.imageName=""
+      this.imageUrl=""
+      this.networkPic=""
+      this.index=val
+    },
+    //添加图片到markdown
+    addImgToMd(data,name) {
+      let editor = this.editor.getCodeMirror();
+      let editorHtml = this.editor.getCurrentModeEditor();
+      let isMarkdownMode = this.editor.isMarkdownMode();
+      if (isMarkdownMode) {
+        editor.replaceSelection(`![${name}](${data})`);
+      } else {
+        let range = editorHtml.getRange();
+        let img = document.createElement('img');
+        img.src = `${data}`;
+        img.alt = name;
+        range.insertNode(img);
+      }
+    },
   },
   model: {
     prop: 'value',