chore:增加初始化模式选择，修改事件监听
This commit is contained in:
zhaoxuhui
parent
a040b2617c
commit
fe2fb8aba1
|
|
@ -54,6 +54,7 @@ theme|String|代码块主题配置，共有四个值，分别为Light、Dark、O
|
|||
autoSave|Boolean|是否自动保存|true
|
||||
interval|Number|自动保存频率，单位毫秒|10000
|
||||
toolbars|Object|工具栏配置，具体功能详见工具栏功能配置表
|
||||
mode|Number|初始化显示模式 1 分屏显示 2 预览详情 3 全屏编辑
|
||||
|
||||
### 5.events
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template lang="html">
|
||||
<div :class="isFullscreen?'markdown fullscreen':'markdown' " ref="markdown" :style="{height:`${editorHeight}px`}">
|
||||
<div
|
||||
:class="isFullscreen?'markdown fullscreen':'markdown' "
|
||||
ref="markdown"
|
||||
:style="{height:`${editorHeight}px`}"
|
||||
@mouseover="addListener"
|
||||
@mouseout="removeListener"
|
||||
>
|
||||
<!-- 头部工具栏 -->
|
||||
<ul class="markdown-toolbars">
|
||||
<li class="title" v-if="title" :style="{titleStyle}">{{title}}</li>
|
||||
|
|
@ -15,52 +21,52 @@
|
|||
<li v-if="tools.h1" name="标题1">
|
||||
<span @click="insertTitle(1)">h1</span>
|
||||
</li>
|
||||
<li v-if="tools.h2"name="标题2">
|
||||
<li v-if="tools.h2" name="标题2">
|
||||
<span @click="insertTitle(2)">h2</span>
|
||||
</li>
|
||||
<li v-if="tools.h3"name="标题3">
|
||||
<li v-if="tools.h3" name="标题3">
|
||||
<span @click="insertTitle(3)">h3</span>
|
||||
</li>
|
||||
<li v-if="tools.h4"name="标题4">
|
||||
<li v-if="tools.h4" name="标题4">
|
||||
<span @click="insertTitle(4)">h4</span>
|
||||
</li>
|
||||
<li v-if="tools.h5"name="标题5">
|
||||
<li v-if="tools.h5" name="标题5">
|
||||
<span @click="insertTitle(5)">h5</span>
|
||||
</li>
|
||||
<li v-if="tools.h6"name="标题6">
|
||||
<li v-if="tools.h6" name="标题6">
|
||||
<span @click="insertTitle(6)">h6</span>
|
||||
</li>
|
||||
<li v-if="tools.hr" name="分割线">
|
||||
<span @click="insertLine" class="iconfont icon-horizontal"></span>
|
||||
</li>
|
||||
<li v-if="tools.quote" name="引用">
|
||||
<span @click="insertContent('\n> ')" class="iconfont icon-quote"></span>
|
||||
<span @click="insertQuote" class="iconfont icon-quote"></span>
|
||||
</li>
|
||||
<li v-if="tools.ul" name="无序列表">
|
||||
<span @click="insertContent('- ')" class="iconfont icon-ul"></span>
|
||||
<span @click="insertUl" class="iconfont icon-ul"></span>
|
||||
</li>
|
||||
<li v-if="tools.ol" name="有序列表">
|
||||
<span @click="insertContent('1. ')" class="iconfont icon-ol"></span>
|
||||
<span @click="insertOl" class="iconfont icon-ol"></span>
|
||||
</li>
|
||||
<li v-if="tools.code" name="代码块">
|
||||
<span @click="insertCode" class="iconfont icon-code"></span>
|
||||
</li>
|
||||
<li v-if="tools.notChecked" name="未完成列表">
|
||||
<span @click="insertContent('- [ ] ')" class="iconfont icon-checked-false"></span>
|
||||
<span @click="insertNotFinished" class="iconfont icon-checked-false"></span>
|
||||
</li>
|
||||
<li v-if="tools.checked" name="已完成列表">
|
||||
<span @click="insertContent('- [x] ')" class="iconfont icon-checked"></span>
|
||||
<span @click="insertFinished" class="iconfont icon-checked"></span>
|
||||
</li>
|
||||
<li v-if="tools.link" name="链接">
|
||||
<span @click="insertContent('\n[插入链接](https://github.com/coinsuper)')" class="iconfont icon-link"></span>
|
||||
<span @click="insertLink" class="iconfont icon-link"></span>
|
||||
</li>
|
||||
<li v-if="tools.image" name="图片">
|
||||
<span @click="insertContent('\n')" class="iconfont icon-img"></span>
|
||||
<span @click="insertImage" class="iconfont icon-img"></span>
|
||||
</li>
|
||||
<li v-if="tools.table" name="表格">
|
||||
<span
|
||||
@click="insertContent(`\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n`)"
|
||||
class="iconfont icon-table"></span>
|
||||
@click="insertTable"
|
||||
class="iconfont icon-table"></span>
|
||||
</li>
|
||||
<li v-if="tools.print" name="打印">
|
||||
<span class="iconfont icon-dayin" @click="print"></span>
|
||||
|
|
@ -76,13 +82,13 @@
|
|||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="tools.shift&&preview===1" name="预览">
|
||||
<li v-if="tools.shift&&preview==1" name="预览">
|
||||
<span @click="preview=2" class="iconfont icon-preview"></span>
|
||||
</li>
|
||||
<li v-if="tools.shift&&preview===2" name="编辑">
|
||||
<li v-if="tools.shift&&preview==2" name="编辑">
|
||||
<span @click="preview=3" class="iconfont icon-md"></span>
|
||||
</li>
|
||||
<li v-if="tools.shift&&preview===3" name="分屏显示">
|
||||
<li v-if="tools.shift&&preview==3" name="分屏显示">
|
||||
<span @click="preview=1" class="iconfont icon-group"></span>
|
||||
</li>
|
||||
<li class="empty"></li>
|
||||
|
|
@ -91,7 +97,7 @@
|
|||
<span @click="isFullscreen=!isFullscreen" class="iconfont icon-full-screen"></span>
|
||||
</li>
|
||||
<li v-if="tools.fullscreen&&isFullscreen" name="退出全屏">
|
||||
<span @click="isFullscreen=!isFullscreen" class="iconfont icon-exit-full-screen"></span>
|
||||
<span @click="isFullscreen=!isFullscreen" class="iconfont icon-exit-full-screen"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 编辑器 -->
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default {
|
|||
type : String,
|
||||
default : ''
|
||||
},
|
||||
titleStyle : {
|
||||
titleStyle : {// 标题样式
|
||||
type : Object,
|
||||
default() {
|
||||
return {}
|
||||
|
|
@ -60,6 +60,10 @@ export default {
|
|||
initialValue : { // 初始化值
|
||||
type : String,
|
||||
default : ''
|
||||
},
|
||||
mode : { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
|
||||
type : [Number, String],
|
||||
default : 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -123,13 +127,14 @@ export default {
|
|||
this.$refs.textarea.focus();
|
||||
})
|
||||
this.init();
|
||||
this.addListener();
|
||||
//this.addListener();
|
||||
},
|
||||
methods : {
|
||||
init() {
|
||||
this.themeName = this.theme;
|
||||
const {autoSave, interval, theme, initialValue} = this;
|
||||
const {autoSave, interval, theme, initialValue, mode} = this;
|
||||
this.value = initialValue;
|
||||
this.preview = mode;
|
||||
this.previewMarkdown = marked(initialValue, {
|
||||
sanitize : true
|
||||
});
|
||||
|
|
@ -229,14 +234,6 @@ export default {
|
|||
range.select();
|
||||
}
|
||||
},
|
||||
tab(e) { // 屏蔽teatarea tab默认事件
|
||||
this.insertContent(' ', this);
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
e.returnValue = false;
|
||||
}
|
||||
},
|
||||
insertLine() { // 插入分割线
|
||||
this.insertContent(`\n----\n`);
|
||||
},
|
||||
|
|
@ -251,6 +248,30 @@ export default {
|
|||
};
|
||||
this.insertContent(titleLevel[level]);
|
||||
},
|
||||
insertQuote() { // 引用
|
||||
this.insertContent('\n> ');
|
||||
},
|
||||
insertUl() { // 无需列表
|
||||
this.insertContent('- ');
|
||||
},
|
||||
insertOl() { // 有序列表
|
||||
this.insertContent('1. ');
|
||||
},
|
||||
insertFinished() { // 已完成列表
|
||||
this.insertContent('- [x] ');
|
||||
},
|
||||
insertNotFinished() { // 未完成列表
|
||||
this.insertContent('- [ ] ');
|
||||
},
|
||||
insertLink() { // 插入链接
|
||||
this.insertContent('\n[插入链接](https://github.com/coinsuper)');
|
||||
},
|
||||
insertImage() { // 插入图片
|
||||
this.insertContent('\n');
|
||||
},
|
||||
insertTable() { // 插入表格
|
||||
this.insertContent(`\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n`);
|
||||
},
|
||||
insertCode() { // 插入code
|
||||
const textareaDom = this.$refs.textarea;
|
||||
const point = this.getCursortPosition();
|
||||
|
|
@ -328,11 +349,19 @@ export default {
|
|||
};
|
||||
this.insertContent(titleLevel[level]);
|
||||
},
|
||||
save(e) { // 保存
|
||||
save(e) { // ctrl+s 保存
|
||||
e.preventDefault();
|
||||
this.handleSave();
|
||||
},
|
||||
handleSave() {
|
||||
tab(e) { // 屏蔽teatarea tab默认事件
|
||||
this.insertContent(' ', this);
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
e.returnValue = false;
|
||||
}
|
||||
},
|
||||
handleSave() { // 保存操作
|
||||
this.$emit('on-save', {
|
||||
markdownValue : this.value,
|
||||
htmlValue : this.previewMarkdown,
|
||||
|
|
@ -367,12 +396,17 @@ export default {
|
|||
Print(dom);
|
||||
},
|
||||
addListener() { // 事件监听，阻止保存
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.keyCode === 83 && e.metaKey) {
|
||||
e.preventDefault();
|
||||
this.handleSave();
|
||||
}
|
||||
})
|
||||
this.removeListener();
|
||||
document.addEventListener('keydown',this.listener)
|
||||
},
|
||||
removeListener(){
|
||||
document.removeEventListener('keydown',this.listener)
|
||||
},
|
||||
listener(e){
|
||||
if (e.keyCode === 83 && e.metaKey) {
|
||||
e.preventDefault();
|
||||
this.handleSave();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch : {
|
||||
|
|
|
|||
Loading…
Reference in New Issue