md/src/components/CodemirrorEditor.vue

486 lines
18 KiB
Vue
Raw Normal View History

2020-02-11 17:51:04 +08:00
<template>
<div id="app" class="container">
<el-container>
<el-header class="top">
<!-- 图片上传 -->
2020-05-01 22:35:39 +08:00
<el-upload class="header__item" action="https://imgkr.com/api/files/upload" :headers="{'Content-Type': 'multipart/form-data'}"
2020-05-01 21:30:25 +08:00
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
:before-upload="beforeUpload" :on-success="uploaded">
2020-05-01 22:35:39 +08:00
<el-tooltip effect="dark" content="上传图片" placement="bottom-start">
2020-02-11 17:51:04 +08:00
<i class="el-icon-upload" size="medium">&nbsp;</i>
2020-05-01 21:30:25 +08:00
</el-tooltip>
2020-02-11 17:51:04 +08:00
</el-upload>
<!-- 下载文本文档 -->
2020-05-01 22:35:39 +08:00
<el-tooltip class="header__item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
2020-05-01 21:30:25 +08:00
<i class="el-icon-download" size="medium" @click="downloadEditorContent">&nbsp;</i>
2020-02-11 17:51:04 +08:00
</el-tooltip>
<!-- 页面重置 -->
2020-05-01 22:35:39 +08:00
<el-tooltip class="header__item" effect="dark" content="重置页面" placement="bottom-start">
2020-05-01 21:30:25 +08:00
<i class="el-icon-refresh" size="medium" @click="reset">&nbsp;</i>
2020-02-11 17:51:04 +08:00
</el-tooltip>
<!-- 插入表格 -->
2020-05-01 22:35:39 +08:00
<el-tooltip class="header__item header__item_last" effect="dark" content="插入表格" placement="bottom-start">
2020-05-01 21:30:25 +08:00
<i class="el-icon-s-grid" size="medium" @click="dialogFormVisible = true">&nbsp;</i>
2020-02-11 17:51:04 +08:00
</el-tooltip>
<el-form size="mini" class="ctrl" :inline=true>
2020-05-01 21:30:25 +08:00
<el-form-item>
2020-05-01 22:35:39 +08:00
<el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
2020-05-01 21:30:25 +08:00
<el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
2020-02-11 17:51:04 +08:00
:label="font.label" :value="font.value">
<span class="select-item-left">{{ font.label }}</span>
<span class="select-item-right">Abc</span>
2020-05-01 21:30:25 +08:00
</el-option>
2020-02-11 17:51:04 +08:00
</el-select>
2020-05-01 21:30:25 +08:00
</el-form-item>
<el-form-item>
2020-05-01 22:35:39 +08:00
<el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
2020-05-01 21:30:25 +08:00
<el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
2020-02-11 17:51:04 +08:00
<span class="select-item-left">{{ size.label }}</span>
<span class="select-item-right">{{ size.desc }}</span>
2020-05-01 21:30:25 +08:00
</el-option>
2020-02-11 17:51:04 +08:00
</el-select>
2020-05-01 21:30:25 +08:00
</el-form-item>
<el-form-item>
2020-05-01 22:35:39 +08:00
<el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
2020-05-01 21:30:25 +08:00
<el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
2020-02-11 17:51:04 +08:00
<span class="select-item-left">{{ color.label }}</span>
<span class="select-item-right">{{ color.hex }}</span>
2020-05-01 21:30:25 +08:00
</el-option>
2020-02-11 17:51:04 +08:00
</el-select>
2020-05-01 21:30:25 +08:00
</el-form-item>
<el-tooltip content="自定义颜色" placement="top">
2020-05-01 22:35:39 +08:00
<el-color-picker v-model="selectColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
2020-05-01 21:30:25 +08:00
</el-tooltip>
<el-tooltip content="微信外链自动转为文末引用" placement="top">
2020-05-01 22:35:39 +08:00
<el-switch class="header__switch" v-model="status" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
2020-02-11 17:51:04 +08:00
</el-switch>
2020-05-01 21:30:25 +08:00
</el-tooltip>
2020-02-11 17:51:04 +08:00
</el-form>
<el-tooltip class="item" effect="dark" content="自定义CSS样式" placement="left">
2020-05-01 21:30:25 +08:00
<el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
2020-02-11 17:51:04 +08:00
</el-tooltip>
<el-button type="success" plain size="medium" @click="copy">复制</el-button>
<el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button>
</el-header>
<el-main class="main-body">
<el-row :gutter="10" class="main-section">
<el-col :span="12">
<textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source">
</textarea>
</el-col>
<el-col :span="12" class="preview-wrapper" id="preview">
2020-03-14 23:12:04 +08:00
<section id="output-wrapper">
2020-05-01 21:30:25 +08:00
<div class="preview" contenteditable="true">
2020-02-11 17:51:04 +08:00
<section id="output" v-html="output">
</section>
</div>
</section>
</el-col>
<transition name="custom-classes-transition" enter-active-class="animated bounceInRight">
<el-col id="cssBox" :span="12" v-show="showBox">
<textarea id="cssEditor" type="textarea" placeholder="Your custom css here.">
</textarea>
</el-col>
</transition>
</el-row>
</el-main>
</el-container>
<el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
<div style="text-align: center;">
<h3>一款高度简洁的微信 Markdown 编辑器</h3>
</div>
<div style="text-align: center;margin-top:10px;">
<p>扫码关注我的公众号原创技术文章第一时间推送</p>
<img src="assets/images/qrcode-for-doocs.jpg" style="width: 40%; display: block; margin: 20px auto 10px;">
</div>
<span slot="footer" class="dialog-footer">
<a href="https://github.com/doocs/md" target="_blank">
<el-button type="success" plain>GitHub 仓库</el-button>
</a>
<a href="https://gitee.com/doocs/md" target="_blank">
<el-button type="success" plain>Gitee 仓库</el-button>
</a>
</span>
</el-dialog>
<el-dialog title="插入表格" :visible.sync="dialogFormVisible">
2020-05-01 21:30:25 +08:00
<el-form :model="config.form">
2020-02-11 17:51:04 +08:00
<el-form-item label="行数(表头不计入行数)">
2020-05-01 21:30:25 +08:00
<el-input v-model="config.form.rows"></el-input>
2020-02-11 17:51:04 +08:00
</el-form-item>
<el-form-item label="列数">
2020-05-01 21:30:25 +08:00
<el-input v-model="config.form.cols"></el-input>
2020-02-11 17:51:04 +08:00
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="success" plain @click="dialogFormVisible = false"> </el-button>
<el-button type="success" @click="insertTable"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
2020-05-01 21:30:25 +08:00
import CodeMirror from 'codemirror/lib/codemirror'
2020-02-13 21:50:27 +08:00
2020-05-01 21:30:25 +08:00
import 'codemirror/mode/css/css'
import 'codemirror/mode/markdown/markdown'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'
2020-02-13 21:50:27 +08:00
2020-05-01 21:30:25 +08:00
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/css-hint.js'
import '../scripts/format.js'
2020-02-11 17:51:04 +08:00
2020-05-01 21:30:25 +08:00
import fileApi from '../api/file';
import marked from 'marked'
import markdown from 'markdown'
import juice from 'juice'
import EditorHeader from './codeMirror/header';
import {
setColorWithCustomTemplate,
setColor,
setFontSize,
css2json,
customCssWithTemplate,
saveEditorContent,
checkImage
} from '../scripts/util'
import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css'
2020-02-11 17:51:04 +08:00
2020-05-01 21:30:25 +08:00
require('codemirror/mode/javascript/javascript')
import '../scripts/closebrackets'
import $ from 'jquery'
import {
solveWeChatImage,
solveHtml,
copySafari
} from '../scripts/converter'
import config from '../scripts/config'
import {mapState, mapMutations} from 'vuex';
export default {
data() {
return {
config: config,
showBox: false,
aboutDialogVisible: false,
dialogFormVisible: false,
timeout: null,
source: '',
2020-05-01 22:35:39 +08:00
selectFont: '',
selectSize: '',
selectColor: '',
2020-05-01 21:30:25 +08:00
status: '1'
2020-02-11 17:51:04 +08:00
}
},
2020-05-01 21:30:25 +08:00
components: {
EditorHeader
2020-02-11 17:51:04 +08:00
},
2020-05-01 21:30:25 +08:00
computed: {
...mapState({
wxRenderer: state=> state.wxRenderer,
output: state=> state.output,
editor: state=> state.editor,
cssEditor: state=> state.cssEditor,
html: state=> state.html,
currentFont: state=> state.currentFont,
currentSize: state=> state.currentSize,
currentColor: state=> state.currentColor
2020-02-11 17:51:04 +08:00
})
},
2020-05-01 21:30:25 +08:00
created() {
this.initEditorState()
this.$nextTick(() => {
this.initEditor()
this.initCssEditor()
this.editorRefresh()
2020-02-11 17:51:04 +08:00
})
2020-05-01 22:35:39 +08:00
this.selectFont = this.currentFont
this.selectSize = this.currentSize
this.selectColor = this.currentColor
2020-02-11 17:51:04 +08:00
},
2020-05-01 21:30:25 +08:00
methods: {
initEditor() {
this.initEditorEntity();
this.editor.on('change', (cm, e) => {
this.editorRefresh()
saveEditorContent(this.editor, '__editor_content')
});
2020-02-11 17:51:04 +08:00
2020-05-01 21:30:25 +08:00
// 粘贴上传图片并插入
this.editor.on('paste', (cm, e) => {
if (!(e.clipboardData && e.clipboardData.items)) {
return
}
for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
let item = e.clipboardData.items[i]
if (item.kind === 'file') {
const pasteFile = item.getAsFile()
const checkImageResult = checkImage(pasteFile);
2020-02-11 17:51:04 +08:00
2020-05-01 21:30:25 +08:00
if (checkImageResult) {
this.$message({
showClose: true,
message: checkImageResult,
type: 'error'
});
return;
}
let data = new FormData()
data.append('file', pasteFile)
fileApi.fileUpload(data).then(res => {
this.uploaded(resp.data)
}).catch(err => {
console.log(err.message)
})
}
}
});
},
initCssEditor() {
this.initCssEditorEntity();
// 自动提示
this.cssEditor.on('keyup', (cm, e) => {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
cm.showHint(e)
}
});
this.cssEditor.on('update', (instance) => {
this.cssChanged()
saveEditorContent(this.cssEditor, '__css_content')
})
},
// 图片上传前的处理
beforeUpload(file) {
const checkImageResult = checkImage(file);
if (checkImageResult) {
this.$message({
showClose: true,
message: checkImageResult,
type: 'error'
});
return false;
}
return true;
},
cssChanged() {
let json = css2json(this.cssEditor.getValue(0))
let theme = setFontSize(this.currentSize.replace('px', ''))
theme = customCssWithTemplate(json, this.currentColor, theme)
this.setWxRendererOptions({
theme: theme
});
this.editorRefresh()
},
// 图片上传结束
uploaded(response, file, fileList) {
if (response.success) {
// 上传成功,获取光标
const cursor = this.editor.getCursor()
const imageUrl = response.data
const markdownImage = `![](${imageUrl})`
// 将 Markdown 形式的 URL 插入编辑框光标所在位置
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor)
this.$message({
showClose: true,
message: '图片插入成功',
type: 'success'
})
this.editorRefresh()
} else {
// 上传失败
this.$message({
showClose: true,
message: response.message,
type: 'error'
})
}
},
// 插入表格
insertTable() {
const cursor = this.editor.getCursor()
const rows = parseInt(this.config.form.rows)
const cols = parseInt(this.config.form.cols)
if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
this.$message({
showClose: true,
message: '输入的行/列数无效,请重新输入',
type: 'error'
})
return
}
let table = ''
for (let i = 0; i < rows + 2; ++i) {
for (let j = 0; j < cols + 1; ++j) {
table += (j === 0 ? '|' : (i !== 1 ? ' |' : ' --- |'))
}
table += '\n'
}
this.editor.replaceSelection(`\n${table}\n`, cursor)
this.dialogFormVisible = false
this.editorRefresh()
},
// 复制渲染后的内容到剪贴板
copy12() {
let clipboardDiv = document.getElementById('output')
clipboardDiv.focus()
window.getSelection().removeAllRanges()
let range = document.createRange()
range.setStartBefore(clipboardDiv.firstChild)
range.setEndAfter(clipboardDiv.lastChild)
window.getSelection().addRange(range)
document.execCommand('copy')
2020-03-14 23:12:04 +08:00
// 输出提示
2020-05-01 21:30:25 +08:00
this.$notify({
showClose: true,
message: '已复制渲染后的文章到剪贴板,可直接到公众号后台粘贴',
offset: 80,
duration: 1600,
type: 'success'
})
},
// 复制到微信公众号
copy() {
let clipboardDiv = document.getElementById('output')
const clipboardHTML = clipboardDiv.innerHTML
// solveWeChatImage()
this.html = solveHtml();
// 输出提示
this.$notify({
showClose: true,
message: '已复制渲染后的文章到剪贴板,可直接到公众号后台粘贴',
offset: 80,
duration: 1600,
type: 'success'
})
clipboardDiv.innerHTML = clipboardHTML; // 恢复现场
},
// 左右栏同步滚动
leftAndRightScroll() {
$('div.CodeMirror-scroll, #preview').on('scroll', function callback() {
clearTimeout(this.timeout)
2020-02-13 21:50:27 +08:00
2020-05-01 21:30:25 +08:00
let source = $(this)
let target = $(source.is('#preview') ? 'div.CodeMirror-scroll' : '#preview')
2020-02-13 21:50:27 +08:00
2020-05-01 21:30:25 +08:00
target.off('scroll')
2020-02-13 21:50:27 +08:00
2020-05-01 21:30:25 +08:00
let source0 = source[0]
let target0 = target[0]
2020-02-13 21:50:27 +08:00
2020-05-01 21:30:25 +08:00
let percentage = source0.scrollTop / (source0.scrollHeight - source0.offsetHeight)
let height = percentage * (target0.scrollHeight - target0.offsetHeight)
target0.scrollTo(0, height)
2020-02-13 21:50:27 +08:00
2020-05-01 21:30:25 +08:00
this.timeout = setTimeout(() => {
target.on('scroll', callback)
}, 100)
})
},
// 下载编辑器内容到本地
downloadEditorContent () {
let downLink = document.createElement('a')
downLink.download = 'content.md'
downLink.style.display = 'none'
let blob = new Blob([this.editor.getValue(0)])
downLink.href = URL.createObjectURL(blob)
document.body.appendChild(downLink)
downLink.click()
document.body.removeChild(downLink)
},
// 重置页面
reset() {
this.$confirm('此操作将丢失本地缓存的文本和自定义样式,是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
confirmButtonClass: 'el-button--success',
cancelButtonClass: 'el-button--success is-plain',
type: 'warning',
center: true
}).then(() => {
localStorage.clear()
this.clearEditorToDefault();
this.editor.focus()
this.status = '1';
this.fontChanged(this.config.builtinFonts[0].value)
this.colorChanged(this.config.colorOption[1].value)
this.sizeChanged(this.config.sizeOption[2].value)
this.cssChanged()
}).catch(() => {
this.editor.focus()
})
},
2020-05-01 22:35:39 +08:00
fontChanged(fonts) {
2020-05-01 21:30:25 +08:00
this.setWxRendererOptions({
fonts: fonts
})
this.setCurrentFont(fonts);
this.editorRefresh()
},
2020-05-01 22:35:39 +08:00
sizeChanged(size) {
2020-05-01 21:30:25 +08:00
let theme = setFontSize(size.replace('px', ''))
theme = setColorWithCustomTemplate(theme, this.currentColor)
this.setWxRendererOptions({
size: size,
theme: theme
})
this.setCurrentSize(size);
this.editorRefresh()
},
2020-05-01 22:35:39 +08:00
colorChanged(color) {
2020-05-01 21:30:25 +08:00
let theme = setFontSize(this.currentSize.replace('px', ''))
theme = setColorWithCustomTemplate(theme, color)
this.setWxRendererOptions({
theme: theme
})
this.setCurrentColor(color);
this.editorRefresh()
},
statusChanged () {
localStorage.setItem('status', this.status)
this.editorRefresh()
},
// 自定义CSS样式
async customStyle () {
this.showBox = !this.showBox
this.$nextTick(() => {
if(!this.cssEditor) {
this.cssEditor.refresh()
// this.initCssEditor()
}
})
setTimeout(() => {
this.cssEditor.refresh()
},50)
let flag = await localStorage.getItem('__css_content')
if (!flag) {
this.setCssEditorValue(DEFAULT_CSS_CONTENT)
}
},
...mapMutations(['initEditorState', 'initEditorEntity', 'editorRefresh', 'clearEditorToDefault',
'setCurrentFont', 'setCurrentSize', 'setCurrentColor', 'setEditorValue', 'setCssEditorValue',
'initCssEditorEntity', 'setWxRendererOptions'])
},
mounted() {
this.leftAndRightScroll()
2020-02-11 17:51:04 +08:00
}
}
2020-05-01 21:30:25 +08:00
2020-02-11 17:51:04 +08:00
</script>
2020-05-01 22:35:39 +08:00
<style lang="less" scoped>
.header__item {
margin: 0 3px;
}
.header__item_last {
margin-right: 8px;
}
.header__switch {
margin-left: 8px;
}
2020-02-11 17:51:04 +08:00
</style>