amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-10-30 15:57:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: quickly insert table

Browse Source 
快速插入表格
This commit is contained in:
yanglbme 2019-12-29 21:23:47 +08:00
parent f403a7d54a
commit 1be928cad4
2 changed files with 54 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
assets/scripts/editor.js
View File

@ -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();
},

25
index.html
View File

@ -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 @@
<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>