chore:选择本地文件时增加类型限制

This commit is contained in:
zhaoxuhui 2018-11-05 18:34:15 +08:00
parent 468559bf7c
commit 66099fb4b2
5 changed files with 146 additions and 127 deletions

2
dist/index.js vendored

File diff suppressed because one or more lines are too long

2
dist/index.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
{ {
"name": "vue-meditor", "name": "vue-meditor",
"description": "一款使用marked和highlight.js开发的一款markdown编辑器", "description": "一款使用marked和highlight.js开发的一款markdown编辑器",
"version": "0.8.0", "version": "0.9.0",
"author": "zhaoxuhui<1258835133@qq.com>", "author": "zhaoxuhui<1258835133@qq.com>",
"license": "MIT", "license": "MIT",
"main": "dist/index.js", "main": "dist/index.js",

View File

@ -76,7 +76,7 @@
</li> </li>
<li name="导入本地文件" class="import-file" v-show="tools.importmd"> <li name="导入本地文件" class="import-file" v-show="tools.importmd">
<span class="iconfont icon-daoru"></span> <span class="iconfont icon-daoru"></span>
<input type="file" @change="importFile($event)"> <input type="file" @change="importFile($event)" accept="text/markdown">
</li> </li>
<li name="保存到本地" v-show="tools.exportmd"> <li name="保存到本地" v-show="tools.exportmd">
<span class="iconfont icon-download" @click="exportMd"></span> <span class="iconfont icon-download" @click="exportMd"></span>

View File

@ -6,112 +6,112 @@ import Print from './js/print';
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
marked.setOptions({ marked.setOptions({
renderer : new marked.Renderer(), renderer: new marked.Renderer(),
gfm : true, gfm: true,
tables : true, tables: true,
breaks : false, breaks: false,
pedantic : false, pedantic: false,
sanitize : true, sanitize: true,
smartLists : true, smartLists: true,
highlight : function (code) { highlight: function (code) {
return hljs.highlightAuto(code).value; return hljs.highlightAuto(code).value;
} }
}); });
export default { export default {
name : 'markdown', name: 'markdown',
props : { props: {
title : { // 标题 title: { // 标题
type : String, type: String,
default : '' default: ''
}, },
titleStyle : {// 标题样式 titleStyle: { // 标题样式
type : Object, type: Object,
default() { default () {
return {} return {}
} }
}, },
theme : { // 默认主题 theme: { // 默认主题
type : String, type: String,
default : 'Light' default: 'Light'
}, },
width : {// 宽度 width: { // 宽度
type : [Number, String], type: [Number, String],
default : 'auto' default: 'auto'
}, },
height : { // 高度 height: { // 高度
type : Number, type: Number,
default : 600 default: 600
}, // 宽度 }, // 宽度
toolbars : { // 工具栏 toolbars: { // 工具栏
type : Object, type: Object,
default() { default () {
return {}; return {};
} }
}, },
autoSave : {// 是否自动保存 autoSave: { // 是否自动保存
type : Boolean, type: Boolean,
default : true default: true
}, },
interval : { // 自动保存频率 单位:毫秒 interval: { // 自动保存频率 单位:毫秒
type : Number, type: Number,
default : 10000 default: 10000
}, },
initialValue : { // 初始化值 initialValue: { // 初始化值
type : String, type: String,
default : '' default: ''
}, },
mode : { // 模式 1 分屏显示 2 预览详情 3 全屏编辑 mode: { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
type : [Number, String], type: [Number, String],
default : 1 default: 1
} }
}, },
data() { data() {
return { return {
value : '', // 输入框内容 value: '', // 输入框内容
timeoutId : null, timeoutId: null,
hljsInit : null, hljsInit: null,
indexLenth : 1, indexLenth: 1,
previewMarkdown : '', previewMarkdown: '',
preview : 1, // 是否是预览状态 preview: 1, // 是否是预览状态
isFullscreen : false, isFullscreen: false,
scrollHeight : null, scrollHeight: null,
scroll : 'markdown',// 哪个半栏在滑动 scroll: 'markdown', // 哪个半栏在滑动
allTools : { // 显示隐藏的工具栏 allTools: { // 显示隐藏的工具栏
strong : true, strong: true,
italic : true, italic: true,
overline : true, overline: true,
h1 : true, h1: true,
h2 : true, h2: true,
h3 : true, h3: true,
h4 : false, h4: false,
h5 : false, h5: false,
h6 : false, h6: false,
hr : true, hr: true,
quote : true, quote: true,
ul : true, ul: true,
ol : true, ol: true,
code : true, code: true,
link : true, link: true,
image : true, image: true,
table : true, table: true,
checked : true, checked: true,
notChecked : true, notChecked: true,
shift : true, shift: true,
fullscreen : true, fullscreen: true,
print : false, print: false,
theme: true, theme: true,
exportmd:true, exportmd: true,
importmd:true importmd: true
}, },
slideDown : false, slideDown: false,
themeName : 'Light',// 主题名称 themeName: 'Light', // 主题名称
lastInsert : '', lastInsert: '',
timerId : null,// 定时器id timerId: null, // 定时器id
}; };
}, },
computed : { computed: {
editorHeight() { editorHeight() {
if (this.isFullscreen) { if (this.isFullscreen) {
return window.innerHeight; return window.innerHeight;
@ -120,7 +120,10 @@ export default {
} }
}, },
tools() { tools() {
const {allTools, toolbars} = this; const {
allTools,
toolbars
} = this;
return Object.assign(allTools, toolbars) return Object.assign(allTools, toolbars)
} }
}, },
@ -132,14 +135,20 @@ export default {
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, mode} = this; const {
autoSave,
interval,
theme,
initialValue,
mode
} = this;
this.value = initialValue; this.value = initialValue;
this.preview = mode; this.preview = mode;
this.previewMarkdown = marked(initialValue, { this.previewMarkdown = marked(initialValue, {
sanitize : true sanitize: true
}); });
if (autoSave) { if (autoSave) {
this.timerId = setInterval(() => { this.timerId = setInterval(() => {
@ -168,11 +177,13 @@ export default {
markdownContent.scrollTop = parseInt((previewScrollTop / previewScrollHeight) * markdownScrollHeight); markdownContent.scrollTop = parseInt((previewScrollTop / previewScrollHeight) * markdownScrollHeight);
} }
}, },
mousescrollSide(side) {// 设置究竟是哪个半边在主动滑动 mousescrollSide(side) { // 设置究竟是哪个半边在主动滑动
this.scroll = side; this.scroll = side;
}, },
insertContent(str) { // 插入文本 insertContent(str) { // 插入文本
const {preview} = this; const {
preview
} = this;
if (preview === 2) { if (preview === 2) {
return; return;
} }
@ -194,7 +205,7 @@ export default {
if (document.selection) { if (document.selection) {
textDom.focus(); textDom.focus();
let selectRange = document.selection.createRange(); let selectRange = document.selection.createRange();
selectRange.moveStart('character', - this.value.length); selectRange.moveStart('character', -this.value.length);
cursorPos = selectRange.text.length; cursorPos = selectRange.text.length;
} else if (textDom.selectionStart || textDom.selectionStart == '0') { } else if (textDom.selectionStart || textDom.selectionStart == '0') {
cursorPos = textDom.selectionStart; cursorPos = textDom.selectionStart;
@ -242,12 +253,12 @@ export default {
}, },
insertTitle(level) { // 插入标题 insertTitle(level) { // 插入标题
const titleLevel = { const titleLevel = {
1 : '\n# ', 1: '\n# ',
2 : '\n## ', 2: '\n## ',
3 : '\n### ', 3: '\n### ',
4 : '\n#### ', 4: '\n#### ',
5 : '\n##### ', 5: '\n##### ',
6 : '\n###### ' 6: '\n###### '
}; };
this.insertContent(titleLevel[level]); this.insertContent(titleLevel[level]);
}, },
@ -343,12 +354,12 @@ export default {
}, },
insertTitle(level) { // 插入标题 insertTitle(level) { // 插入标题
const titleLevel = { const titleLevel = {
1 : '# ', 1: '# ',
2 : '## ', 2: '## ',
3 : '### ', 3: '### ',
4 : '#### ', 4: '#### ',
5 : '##### ', 5: '##### ',
6 : '###### ' 6: '###### '
}; };
this.insertContent(titleLevel[level]); this.insertContent(titleLevel[level]);
}, },
@ -366,23 +377,25 @@ export default {
}, },
handleSave() { // 保存操作 handleSave() { // 保存操作
this.$emit('on-save', { this.$emit('on-save', {
markdownValue : this.value, markdownValue: this.value,
htmlValue : this.previewMarkdown, htmlValue: this.previewMarkdown,
theme : this.theme theme: this.theme
}); });
}, },
insertLine() { // 插入分割线 insertLine() { // 插入分割线
this.insertContent(`\n----\n`); this.insertContent(`\n----\n`);
}, },
toggleSlideDown() { // 显示主题选项 toggleSlideDown() { // 显示主题选项
this.slideDown = ! this.slideDown; this.slideDown = !this.slideDown;
}, },
setThemes(name) { // 设置主题 setThemes(name) { // 设置主题
this.themeName = name; this.themeName = name;
this.slideDown = false; this.slideDown = false;
}, },
enter(e) { // 回车事件 enter(e) { // 回车事件
const {lastInsert} = this; const {
lastInsert
} = this;
const list = ['- ', '1. ', '- [ ] ', '- [x] '] const list = ['- ', '1. ', '- [ ] ', '- [x] ']
if (list.includes(lastInsert)) { if (list.includes(lastInsert)) {
this.insertContent(lastInsert); this.insertContent(lastInsert);
@ -400,14 +413,14 @@ export default {
}, },
addListener() { // 事件监听,阻止保存 addListener() { // 事件监听,阻止保存
this.removeListener(); this.removeListener();
document.addEventListener('keydown',this.listener) document.addEventListener('keydown', this.listener)
}, },
removeListener(){ removeListener() {
document.removeEventListener('keydown',this.listener) document.removeEventListener('keydown', this.listener)
}, },
listener(e){ listener(e) {
if (e.keyCode === 83) { if (e.keyCode === 83) {
if( e.metaKey||e.ctrlKey){ if (e.metaKey || e.ctrlKey) {
e.preventDefault(); e.preventDefault();
this.handleSave(); this.handleSave();
} }
@ -415,23 +428,29 @@ export default {
}, },
importFile(e) { // 导入文件 importFile(e) { // 导入文件
const file = e.target.files[0]; const file = e.target.files[0];
if (! file) { if (!file) {
return; return;
} }
const {type} = file; const {
type
} = file;
if (type !== 'text/markdown') { if (type !== 'text/markdown') {
this.$Notice.error('文件格式有误!'); alert('文件格式有误');
return; return;
} }
const reader = new FileReader(); const reader = new FileReader();
reader.readAsText(file, {encoding : 'utf-8'}); reader.readAsText(file, {
encoding: 'utf-8'
});
reader.onload = () => { reader.onload = () => {
this.value = reader.result; this.value = reader.result;
e.target.value = ''; e.target.value = '';
} }
}, },
exportMd() { // 导出文件到本地 exportMd() { // 导出文件到本地
const { value } = this; const {
value
} = this;
var pom = document.createElement('a'); var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=UTF-8,' + encodeURIComponent(value)); pom.setAttribute('href', 'data:text/plain;charset=UTF-8,' + encodeURIComponent(value));
pom.setAttribute('download', '未命名.md'); pom.setAttribute('download', '未命名.md');
@ -445,12 +464,12 @@ export default {
} }
} }
}, },
watch : { watch: {
value() { value() {
clearTimeout(this.timeoutId); clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => { this.timeoutId = setTimeout(() => {
this.previewMarkdown = marked(this.value, { this.previewMarkdown = marked(this.value, {
sanitize : true sanitize: true
}); });
}, 30) }, 30)
this.indexLenth = this.value.split('\n').length; this.indexLenth = this.value.split('\n').length;