feat: quickly insert table

快速插入表格
dantefung · Dec 29, 2019 · 1be928c · 1be928c
1 parent f403a7d
commit 1be928c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 5 deletions.
diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js
@@ -22,7 +22,12 @@ let app = new Vue({
         { label: '活力橘', value: 'rgba(250, 81, 81, 1)', hex: '热情活泼' }
       ],
       showBox: true,
-      aboutDialogVisible: false
+      aboutDialogVisible: false,
+      dialogFormVisible: false,
+      form: {
+        rows: 1,
+        cols: 1
+      }
     };
     d.currentFont = d.builtinFonts[0].value;
     d.currentSize = d.sizeOption[1].value;
@@ -196,6 +201,33 @@ let app = new Vue({
         this.editor.focus();
       });
     },
+    // 插入表格
+    insertTable() {
+      const cursor = this.editor.getCursor();
+      const rows = parseInt(this.form.rows);
+      const cols = parseInt(this.form.cols);
+      if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
+        this.$message({
+          showClose: true,
+          message: '输入的行/列数无效，请重新输入',
+          type: 'error'
+        });
+        return;
+      }
+
+      let table = '';
+      for (let i = 0; i < rows + 2; ++i) {
+        for (let j = 0; j < cols + 1; ++j) {
+          table += (j === 0 ? '|' : (i !== 1 ? '     |' : ' --- |'));
+        }
+        table += '\n';
+      }
+
+      this.editor.replaceSelection(`\n${table}\n`, cursor);
+      this.dialogFormVisible = false
+      this.refresh();
+
+    },
     statusChanged() {
       this.refresh();
     },

diff --git a/index.html b/index.html
@@ -74,18 +74,22 @@
         <!-- 图片上传 -->
         <el-upload action="https://imgkr.com/api/files/upload" headers="{'Content-Type': 'multipart/form-data'}"
           :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file" :on-success="uploaded">
-          <el-tooltip class="item" effect="dark" content="点击上传图片" placement="bottom-start">
+          <el-tooltip class="item" effect="dark" content="上传图片" placement="bottom-start">
             <i class="el-icon-upload" size="medium">&nbsp;</i>
           </el-tooltip>
         </el-upload>
         <!-- 下载文本文档 -->
-        <el-tooltip class="item" effect="dark" content="点击下载编辑框Markdown文档" placement="bottom-start">
+        <el-tooltip class="item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
           <i class="el-icon-download" size="medium" @click="downloadEditorContent">&nbsp;</i>
         </el-tooltip>
         <!-- 页面重置 -->
-        <el-tooltip class="item" effect="dark" content="点击重置页面" placement="bottom-start">
+        <el-tooltip class="item" effect="dark" content="重置页面" placement="bottom-start">
           <i class="el-icon-refresh" size="medium" @click="reset">&nbsp;</i>
         </el-tooltip>
+        <!-- 插入表格 -->
+        <el-tooltip class="item" effect="dark" content="插入表格" placement="bottom-start">
+          <i class="el-icon-s-grid" size="medium" @click="dialogFormVisible = true">&nbsp;</i>
+        </el-tooltip>
         <el-form size="mini" class="ctrl" :inline=true>
           <el-form-item>
             <el-select v-model="currentFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
@@ -167,7 +171,20 @@ <h3>一款高度简洁的微信 Markdown 编辑器</h3>
           <el-button type="success" plain>Gitee 仓库</el-button>
         </a>
       </span>
-
+    </el-dialog>
+    <el-dialog title="插入表格" :visible.sync="dialogFormVisible">
+      <el-form :model="form">
+        <el-form-item label="行数(表头不计入行数)">
+          <el-input  v-model="form.rows"></el-input>
+        </el-form-item>
+        <el-form-item label="列数">
+          <el-input v-model="form.cols"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="success" plain @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="success" @click="insertTable">确 定</el-button>
+      </div>
     </el-dialog>
   </div>