zhaoxuhui
parent
d0428e6729
commit
a036667426
|
|
@ -134,3 +134,10 @@ const config = {
|
|||
},
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 更新日志
|
||||
v0.7.0
|
||||
|
||||
1.修复主题无法更新的问题
|
||||
2.修复文档初始化值无法动态切换的问题
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "vue-meditor",
|
||||
"description": "一款使用marked和highlight.js开发的一款markdown编辑器",
|
||||
"version": "0.1.1",
|
||||
"version": "0.7.0",
|
||||
"author": "zhaoxuhui<1258835133@qq.com>",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
|
|
|||
|
|
@ -6,110 +6,110 @@ import Print from './js/print';
|
|||
hljs.initHighlightingOnLoad();
|
||||
|
||||
marked.setOptions({
|
||||
renderer : new marked.Renderer(),
|
||||
gfm : true,
|
||||
tables : true,
|
||||
breaks : false,
|
||||
pedantic : false,
|
||||
sanitize : true,
|
||||
smartLists : true,
|
||||
highlight : function (code) {
|
||||
renderer: new marked.Renderer(),
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: false,
|
||||
pedantic: false,
|
||||
sanitize: true,
|
||||
smartLists: true,
|
||||
highlight: function (code) {
|
||||
return hljs.highlightAuto(code).value;
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
name : 'markdown',
|
||||
props : {
|
||||
title : { // 标题
|
||||
type : String,
|
||||
default : ''
|
||||
name: 'markdown',
|
||||
props: {
|
||||
title: { // 标题
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleStyle : {// 标题样式
|
||||
type : Object,
|
||||
default() {
|
||||
titleStyle: { // 标题样式
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
theme : { // 默认主题
|
||||
type : String,
|
||||
default : 'Light'
|
||||
theme: { // 默认主题
|
||||
type: String,
|
||||
default: 'Light'
|
||||
},
|
||||
width : {// 宽度
|
||||
type : [Number, String],
|
||||
default : 'auto'
|
||||
width: { // 宽度
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
height : { // 高度
|
||||
type : Number,
|
||||
default : 600
|
||||
height: { // 高度
|
||||
type: Number,
|
||||
default: 600
|
||||
}, // 宽度
|
||||
toolbars : { // 工具栏
|
||||
type : Object,
|
||||
default() {
|
||||
toolbars: { // 工具栏
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
autoSave : {// 是否自动保存
|
||||
type : Boolean,
|
||||
default : true
|
||||
autoSave: { // 是否自动保存
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
interval : { // 自动保存频率 单位：毫秒
|
||||
type : Number,
|
||||
default : 10000
|
||||
interval: { // 自动保存频率 单位：毫秒
|
||||
type: Number,
|
||||
default: 10000
|
||||
},
|
||||
initialValue : { // 初始化值
|
||||
type : String,
|
||||
default : ''
|
||||
initialValue: { // 初始化值
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
mode : { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
|
||||
type : [Number, String],
|
||||
default : 1
|
||||
mode: { // 模式 1 分屏显示 2 预览详情 3 全屏编辑
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value : '', // 输入框内容
|
||||
timeoutId : null,
|
||||
hljsInit : null,
|
||||
indexLenth : 1,
|
||||
previewMarkdown : '',
|
||||
preview : 1, // 是否是预览状态
|
||||
isFullscreen : false,
|
||||
scrollHeight : null,
|
||||
scroll : 'markdown',// 哪个半栏在滑动
|
||||
allTools : { // 显示隐藏的工具栏
|
||||
strong : true,
|
||||
italic : true,
|
||||
overline : true,
|
||||
h1 : true,
|
||||
h2 : true,
|
||||
h3 : true,
|
||||
h4 : false,
|
||||
h5 : false,
|
||||
h6 : false,
|
||||
hr : true,
|
||||
quote : true,
|
||||
ul : true,
|
||||
ol : true,
|
||||
code : true,
|
||||
link : true,
|
||||
image : true,
|
||||
table : true,
|
||||
checked : true,
|
||||
notChecked : true,
|
||||
shift : true,
|
||||
fullscreen : true,
|
||||
print : true,
|
||||
theme : true
|
||||
value: '', // 输入框内容
|
||||
timeoutId: null,
|
||||
hljsInit: null,
|
||||
indexLenth: 1,
|
||||
previewMarkdown: '',
|
||||
preview: 1, // 是否是预览状态
|
||||
isFullscreen: false,
|
||||
scrollHeight: null,
|
||||
scroll: 'markdown', // 哪个半栏在滑动
|
||||
allTools: { // 显示隐藏的工具栏
|
||||
strong: true,
|
||||
italic: true,
|
||||
overline: true,
|
||||
h1: true,
|
||||
h2: true,
|
||||
h3: true,
|
||||
h4: false,
|
||||
h5: false,
|
||||
h6: false,
|
||||
hr: true,
|
||||
quote: true,
|
||||
ul: true,
|
||||
ol: true,
|
||||
code: true,
|
||||
link: true,
|
||||
image: true,
|
||||
table: true,
|
||||
checked: true,
|
||||
notChecked: true,
|
||||
shift: true,
|
||||
fullscreen: true,
|
||||
print: true,
|
||||
theme: true
|
||||
},
|
||||
slideDown : false,
|
||||
themeName : 'Light',// 主题名称
|
||||
lastInsert : '',
|
||||
timerId : null,// 定时器id
|
||||
slideDown: false,
|
||||
themeName: 'Light', // 主题名称
|
||||
lastInsert: '',
|
||||
timerId: null, // 定时器id
|
||||
|
||||
};
|
||||
},
|
||||
computed : {
|
||||
computed: {
|
||||
editorHeight() {
|
||||
if (this.isFullscreen) {
|
||||
return window.innerHeight;
|
||||
|
|
@ -118,7 +118,10 @@ export default {
|
|||
}
|
||||
},
|
||||
tools() {
|
||||
const {allTools, toolbars} = this;
|
||||
const {
|
||||
allTools,
|
||||
toolbars
|
||||
} = this;
|
||||
return Object.assign(allTools, toolbars)
|
||||
}
|
||||
},
|
||||
|
|
@ -129,14 +132,20 @@ export default {
|
|||
this.init();
|
||||
//this.addListener();
|
||||
},
|
||||
methods : {
|
||||
methods: {
|
||||
init() {
|
||||
this.themeName = this.theme;
|
||||
const {autoSave, interval, theme, initialValue, mode} = this;
|
||||
const {
|
||||
autoSave,
|
||||
interval,
|
||||
theme,
|
||||
initialValue,
|
||||
mode
|
||||
} = this;
|
||||
this.value = initialValue;
|
||||
this.preview = mode;
|
||||
this.previewMarkdown = marked(initialValue, {
|
||||
sanitize : true
|
||||
sanitize: true
|
||||
});
|
||||
if (autoSave) {
|
||||
this.timerId = setInterval(() => {
|
||||
|
|
@ -165,11 +174,13 @@ export default {
|
|||
markdownContent.scrollTop = parseInt((previewScrollTop / previewScrollHeight) * markdownScrollHeight);
|
||||
}
|
||||
},
|
||||
mousescrollSide(side) {// 设置究竟是哪个半边在主动滑动
|
||||
mousescrollSide(side) { // 设置究竟是哪个半边在主动滑动
|
||||
this.scroll = side;
|
||||
},
|
||||
insertContent(str) { // 插入文本
|
||||
const {preview} = this;
|
||||
const {
|
||||
preview
|
||||
} = this;
|
||||
if (preview === 2) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -191,7 +202,7 @@ export default {
|
|||
if (document.selection) {
|
||||
textDom.focus();
|
||||
let selectRange = document.selection.createRange();
|
||||
selectRange.moveStart('character', - this.value.length);
|
||||
selectRange.moveStart('character', -this.value.length);
|
||||
cursorPos = selectRange.text.length;
|
||||
} else if (textDom.selectionStart || textDom.selectionStart == '0') {
|
||||
cursorPos = textDom.selectionStart;
|
||||
|
|
@ -239,12 +250,12 @@ export default {
|
|||
},
|
||||
insertTitle(level) { // 插入标题
|
||||
const titleLevel = {
|
||||
1 : '\n# ',
|
||||
2 : '\n## ',
|
||||
3 : '\n### ',
|
||||
4 : '\n#### ',
|
||||
5 : '\n##### ',
|
||||
6 : '\n###### '
|
||||
1: '\n# ',
|
||||
2: '\n## ',
|
||||
3: '\n### ',
|
||||
4: '\n#### ',
|
||||
5: '\n##### ',
|
||||
6: '\n###### '
|
||||
};
|
||||
this.insertContent(titleLevel[level]);
|
||||
},
|
||||
|
|
@ -340,12 +351,12 @@ export default {
|
|||
},
|
||||
insertTitle(level) { // 插入标题
|
||||
const titleLevel = {
|
||||
1 : '# ',
|
||||
2 : '## ',
|
||||
3 : '### ',
|
||||
4 : '#### ',
|
||||
5 : '##### ',
|
||||
6 : '###### '
|
||||
1: '# ',
|
||||
2: '## ',
|
||||
3: '### ',
|
||||
4: '#### ',
|
||||
5: '##### ',
|
||||
6: '###### '
|
||||
};
|
||||
this.insertContent(titleLevel[level]);
|
||||
},
|
||||
|
|
@ -363,23 +374,25 @@ export default {
|
|||
},
|
||||
handleSave() { // 保存操作
|
||||
this.$emit('on-save', {
|
||||
markdownValue : this.value,
|
||||
htmlValue : this.previewMarkdown,
|
||||
theme : this.theme
|
||||
markdownValue: this.value,
|
||||
htmlValue: this.previewMarkdown,
|
||||
theme: this.themeName
|
||||
});
|
||||
},
|
||||
insertLine() { // 插入分割线
|
||||
this.insertContent(`\n----\n`);
|
||||
},
|
||||
toggleSlideDown() { // 显示主题选项
|
||||
this.slideDown = ! this.slideDown;
|
||||
this.slideDown = !this.slideDown;
|
||||
},
|
||||
setThemes(name) { // 设置主题
|
||||
this.themeName = name;
|
||||
this.slideDown = false;
|
||||
},
|
||||
enter(e) { // 回车事件
|
||||
const {lastInsert} = this;
|
||||
const {
|
||||
lastInsert
|
||||
} = this;
|
||||
const list = ['- ', '1. ', '- [ ] ', '- [x] ']
|
||||
if (list.includes(lastInsert)) {
|
||||
this.insertContent(lastInsert);
|
||||
|
|
@ -397,26 +410,26 @@ export default {
|
|||
},
|
||||
addListener() { // 事件监听，阻止保存
|
||||
this.removeListener();
|
||||
document.addEventListener('keydown',this.listener)
|
||||
document.addEventListener('keydown', this.listener)
|
||||
},
|
||||
removeListener(){
|
||||
document.removeEventListener('keydown',this.listener)
|
||||
removeListener() {
|
||||
document.removeEventListener('keydown', this.listener)
|
||||
},
|
||||
listener(e){
|
||||
listener(e) {
|
||||
if (e.keyCode === 83) {
|
||||
if( e.metaKey||e.ctrlKey){
|
||||
if (e.metaKey || e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
this.handleSave();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch : {
|
||||
watch: {
|
||||
value() {
|
||||
clearTimeout(this.timeoutId);
|
||||
this.timeoutId = setTimeout(() => {
|
||||
this.previewMarkdown = marked(this.value, {
|
||||
sanitize : true
|
||||
sanitize: true
|
||||
});
|
||||
}, 30)
|
||||
this.indexLenth = this.value.split('\n').length;
|
||||
|
|
@ -424,6 +437,12 @@ export default {
|
|||
const height_2 = this.$refs.textarea.scrollHeight;
|
||||
const height_3 = this.$refs.preview.scrollHeight;
|
||||
this.scrollHeight = Math.max(height_1, height_2, height_3);
|
||||
},
|
||||
initialValue() {
|
||||
this.value = this.initialValue;
|
||||
},
|
||||
theme() {
|
||||
this.themeName = this.theme;
|
||||
}
|
||||
},
|
||||
destroyed() { // 销毁时清除定时器
|
||||
|
|
|
|||
Loading…
Reference in New Issue