feat: add images upload function

添加图片上传功能

README.md

@@ -19,9 +19,10 @@
 ## 功能特性
 - [x] 支持 Markdown 所有基础语法
 - [x] 支持单独进行字体、字号设置
-- [x] **支持色盘取色**，并一键替换颜色
+- [x] 支持色盘取色，并一键替换颜色
 - [x] 支持链接微信图文，外链自动转为文末索引
 - [x] 支持一键复制并粘贴到公众号后台
+- [x] 支持图片上传并将 URL 插入编辑器光标定位处
 
 ![select-and-replace-color-theme](./assets/images/select-and-replace-color-theme.gif)
 

assets/scripts/editor.js

@@ -54,6 +54,7 @@ let app = new Vue({
       this.refresh();
       this.saveEditorContent();
     });
+
     this.wxRenderer = new WxRenderer({
       theme: setColor(this.currentColor),
       fonts: this.currentFont,
@@ -106,6 +107,35 @@ let app = new Vue({
       });
       this.refresh();
     },
+
+    // 图片上传结束
+    uploaded(response, file, fileList) {
+      if (response.success) {
+        // 上传成功
+        const cursor = this.editor.getCursor();
+        const imageUrl = response.data.url
+        const markdownImage = `![](${imageUrl})`
+        this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
+        this.refresh();
+
+        this.$message({
+          showClose: true,
+          message: '图片插入成功',
+          type: 'success'
+        });
+
+      } else {
+        // 上传失败
+        this.$message({
+          showClose: true,
+          message: response.message,
+          type: 'error'
+        });
+      }
+    },
+    failed(error, file, fileList) {
+      console.log(error)
+    },
     // 刷新右侧预览
     refresh() {
       this.output = this.renderWeChat(this.editor.getValue(0));
@@ -127,7 +157,7 @@ let app = new Vue({
       range.setStartBefore(clipboardDiv.firstChild);
       range.setEndAfter(clipboardDiv.lastChild);
       window.getSelection().addRange(range);
-
+      this.refresh()
       try {
         if (document.execCommand('copy')) {
           this.$notify({

index.html

@@ -6,7 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs">
   <meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>微信 Markdown 编辑器</title>
   <link rel="shortcut icon" href="assets/images/favicon.png">
   <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
@@ -33,9 +34,15 @@
   <div id="app" class="container">
     <el-container>
       <el-header class="top">
+        <el-upload action="https://cors-anywhere.herokuapp.com/https://sm.ms/api/v2/upload"
+          headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false" name="smfile" :on-success="uploaded"
+          :on-error="failed">
+          <i class="el-icon-upload" size="medium">&nbsp;</i>
+        </el-upload>
         <el-form size="mini" class="ctrl" :inline=true>
           <el-form-item label="编辑器主题">
-            <el-select v-model="currentEditorTheme" size="mini" placeholder="选择编辑器主题" clearable @change="editorThemeChanged">
+            <el-select v-model="currentEditorTheme" size="mini" placeholder="选择编辑器主题" clearable
+              @change="editorThemeChanged">
               <el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label"
                 :value="editorTheme.value">
               </el-option>
@@ -123,4 +130,5 @@
   <script src="assets/scripts/loading.js"></script>
 
 </body>
+
 </html>