feat: add reset function

添加重置功能
This commit is contained in:
yanglbme 2019-12-07 16:46:30 +08:00
parent 7d992e4a79
commit 6690d96408
2 changed files with 33 additions and 6 deletions

View File

@ -64,12 +64,7 @@ let app = new Vue({
if (localStorage.getItem("__editor_content")) {
this.editor.setValue(localStorage.getItem("__editor_content"));
} else {
axios({
method: 'get',
url: './assets/default-content.md'
}).then(resp => {
this.editor.setValue(resp.data);
})
this.setDefaultContent();
}
},
methods: {
@ -148,6 +143,23 @@ let app = new Vue({
refresh() {
this.output = this.renderWeChat(this.editor.getValue(0));
},
// 重置页面
reset() {
this.$confirm('此操作将丢失本地缓存的文本和自定义样式,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
localStorage.removeItem('__editor_content');
localStorage.removeItem('__css_content');
this.setDefaultContent();
this.editor.focus();
this.refresh();
}).catch(() => {
this.editor.focus();
});
},
// 将左侧编辑器内容保存到 LocalStorage
saveEditorContent() {
let content = this.editor.getValue(0);
@ -157,6 +169,17 @@ let app = new Vue({
localStorage.removeItem("__editor_content");
}
},
setDefaultContent() {
axios({
method: 'get',
url: './assets/default-content.md'
}).then(resp => {
console.log(resp.data)
this.editor.setValue(resp.data);
}).catch(err => {
this.editor.setValue('# Your markdown here\n');
})
},
copy() {
let clipboardDiv = document.getElementById('output');
clipboardDiv.focus();

View File

@ -43,6 +43,10 @@
<i class="el-icon-upload" size="medium">&nbsp;</i>
</el-tooltip>
</el-upload>
<!-- 页面重置 -->
<el-tooltip class="item" effect="dark" content="点击重置页面" placement="bottom-start">
<i class="el-icon-refresh" size="medium" @click="reset">&nbsp;</i>
</el-tooltip>
<el-form size="mini" class="ctrl" :inline=true>
<el-form-item label="编辑器主题">
<el-select v-model="currentEditorTheme" size="mini" placeholder="选择编辑器主题" clearable