chore:增加初始化模式选择,修改事件监听

This commit is contained in:
zhaoxuhui 2018-08-24 09:52:19 +08:00
parent a040b2617c
commit fe2fb8aba1
3 changed files with 79 additions and 38 deletions

View File

@ -54,6 +54,7 @@ theme|String|代码块主题配置共有四个值分别为Light、Dark、O
autoSave|Boolean|是否自动保存|true autoSave|Boolean|是否自动保存|true
interval|Number|自动保存频率,单位毫秒|10000 interval|Number|自动保存频率,单位毫秒|10000
toolbars|Object|工具栏配置,具体功能详见工具栏功能配置表 toolbars|Object|工具栏配置,具体功能详见工具栏功能配置表
mode|Number|初始化显示模式 1 分屏显示 2 预览详情 3 全屏编辑
### 5.events ### 5.events

View File

@ -1,5 +1,11 @@
<template lang="html"> <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"> <ul class="markdown-toolbars">
<li class="title" v-if="title" :style="{titleStyle}">{{title}}</li> <li class="title" v-if="title" :style="{titleStyle}">{{title}}</li>
@ -34,32 +40,32 @@
<span @click="insertLine" class="iconfont icon-horizontal"></span> <span @click="insertLine" class="iconfont icon-horizontal"></span>
</li> </li>
<li v-if="tools.quote" name="引用"> <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>
<li v-if="tools.ul" name="无序列表"> <li v-if="tools.ul" name="无序列表">
<span @click="insertContent('- ')" class="iconfont icon-ul"></span> <span @click="insertUl" class="iconfont icon-ul"></span>
</li> </li>
<li v-if="tools.ol" name="有序列表"> <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>
<li v-if="tools.code" name="代码块"> <li v-if="tools.code" name="代码块">
<span @click="insertCode" class="iconfont icon-code"></span> <span @click="insertCode" class="iconfont icon-code"></span>
</li> </li>
<li v-if="tools.notChecked" name="未完成列表"> <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>
<li v-if="tools.checked" name="已完成列表"> <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>
<li v-if="tools.link" name="链接"> <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>
<li v-if="tools.image" name="图片"> <li v-if="tools.image" name="图片">
<span @click="insertContent('\n![image](https://noticejs.oss-cn-hangzhou.aliyuncs.com/%E6%9C%AA%E6%A0%87%E9%A2%98-3.jpg)')" class="iconfont icon-img"></span> <span @click="insertImage" class="iconfont icon-img"></span>
</li> </li>
<li v-if="tools.table" name="表格"> <li v-if="tools.table" name="表格">
<span <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`)" @click="insertTable"
class="iconfont icon-table"></span> class="iconfont icon-table"></span>
</li> </li>
<li v-if="tools.print" name="打印"> <li v-if="tools.print" name="打印">
@ -76,13 +82,13 @@
</ul> </ul>
</div> </div>
</li> </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> <span @click="preview=2" class="iconfont icon-preview"></span>
</li> </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> <span @click="preview=3" class="iconfont icon-md"></span>
</li> </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> <span @click="preview=1" class="iconfont icon-group"></span>
</li> </li>
<li class="empty"></li> <li class="empty"></li>

View File

@ -25,7 +25,7 @@ export default {
type : String, type : String,
default : '' default : ''
}, },
titleStyle : { titleStyle : {// 标题样式
type : Object, type : Object,
default() { default() {
return {} return {}
@ -60,6 +60,10 @@ export default {
initialValue : { // 初始化值 initialValue : { // 初始化值
type : String, type : String,
default : '' default : ''
},
mode : { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
type : [Number, String],
default : 1
} }
}, },
data() { data() {
@ -123,13 +127,14 @@ export default {
this.$refs.textarea.focus(); this.$refs.textarea.focus();
}) })
this.init(); this.init();
this.addListener(); //this.addListener();
}, },
methods : { methods : {
init() { init() {
this.themeName = this.theme; this.themeName = this.theme;
const {autoSave, interval, theme, initialValue} = this; const {autoSave, interval, theme, initialValue, mode} = this;
this.value = initialValue; this.value = initialValue;
this.preview = mode;
this.previewMarkdown = marked(initialValue, { this.previewMarkdown = marked(initialValue, {
sanitize : true sanitize : true
}); });
@ -229,14 +234,6 @@ export default {
range.select(); range.select();
} }
}, },
tab(e) { // 屏蔽teatarea tab默认事件
this.insertContent(' ', this);
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
insertLine() { // 插入分割线 insertLine() { // 插入分割线
this.insertContent(`\n----\n`); this.insertContent(`\n----\n`);
}, },
@ -251,6 +248,30 @@ export default {
}; };
this.insertContent(titleLevel[level]); 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![image](https://noticejs.oss-cn-hangzhou.aliyuncs.com/%E6%9C%AA%E6%A0%87%E9%A2%98-3.jpg)');
},
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 insertCode() { // 插入code
const textareaDom = this.$refs.textarea; const textareaDom = this.$refs.textarea;
const point = this.getCursortPosition(); const point = this.getCursortPosition();
@ -328,11 +349,19 @@ export default {
}; };
this.insertContent(titleLevel[level]); this.insertContent(titleLevel[level]);
}, },
save(e) { // 保存 save(e) { // ctrl+s 保存
e.preventDefault(); e.preventDefault();
this.handleSave(); this.handleSave();
}, },
handleSave() { tab(e) { // 屏蔽teatarea tab默认事件
this.insertContent(' ', this);
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
handleSave() { // 保存操作
this.$emit('on-save', { this.$emit('on-save', {
markdownValue : this.value, markdownValue : this.value,
htmlValue : this.previewMarkdown, htmlValue : this.previewMarkdown,
@ -367,12 +396,17 @@ export default {
Print(dom); Print(dom);
}, },
addListener() { // 事件监听,阻止保存 addListener() { // 事件监听,阻止保存
document.addEventListener('keydown', e => { this.removeListener();
document.addEventListener('keydown',this.listener)
},
removeListener(){
document.removeEventListener('keydown',this.listener)
},
listener(e){
if (e.keyCode === 83 && e.metaKey) { if (e.keyCode === 83 && e.metaKey) {
e.preventDefault(); e.preventDefault();
this.handleSave(); this.handleSave();
} }
})
} }
}, },
watch : { watch : {