mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
split component and bug fix
This commit is contained in:
JimQing
parent
e68bda4ab6
commit
9a42d070eb
@ -11,7 +11,6 @@ service.interceptors.request.use(
|
||||
if (/^(post)|(put)|(delete)$/i.test(config.method)) {
|
||||
if (config.data && config.data.upload) {
|
||||
config.headers['Content-Type'] = 'multipart/form-data';
|
||||
config.headers['Access-Control-Allow-Origin'] = 'http://192.168.0.106:8080';
|
||||
}
|
||||
}
|
||||
return config;
|
||||
|
||||
@ -1,123 +1,41 @@
|
||||
<template>
|
||||
<div id="app" class="container">
|
||||
<el-container>
|
||||
<el-header class="top">
|
||||
<!-- 图片上传 -->
|
||||
<el-upload class="header__item" action="https://imgkr.com/api/files/upload" :headers="{'Content-Type': 'multipart/form-data'}"
|
||||
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
|
||||
:before-upload="beforeUpload" :on-success="uploaded">
|
||||
<el-tooltip effect="dark" content="上传图片" placement="bottom-start">
|
||||
<i class="el-icon-upload" size="medium"> </i>
|
||||
</el-tooltip>
|
||||
</el-upload>
|
||||
<!-- 下载文本文档 -->
|
||||
<el-tooltip class="header__item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
|
||||
<i class="el-icon-download" size="medium" @click="downloadEditorContent"> </i>
|
||||
</el-tooltip>
|
||||
<!-- 页面重置 -->
|
||||
<el-tooltip class="header__item" effect="dark" content="重置页面" placement="bottom-start">
|
||||
<i class="el-icon-refresh" size="medium" @click="reset"> </i>
|
||||
</el-tooltip>
|
||||
<!-- 插入表格 -->
|
||||
<el-tooltip class="header__item header__item_last" effect="dark" content="插入表格" placement="bottom-start">
|
||||
<i class="el-icon-s-grid" size="medium" @click="dialogFormVisible = true"> </i>
|
||||
</el-tooltip>
|
||||
<el-form size="mini" class="ctrl" :inline=true>
|
||||
<el-form-item>
|
||||
<el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
|
||||
<el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
|
||||
:label="font.label" :value="font.value">
|
||||
<span class="select-item-left">{{ font.label }}</span>
|
||||
<span class="select-item-right">Abc</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
|
||||
<el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
|
||||
<span class="select-item-left">{{ size.label }}</span>
|
||||
<span class="select-item-right">{{ size.desc }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
|
||||
<el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
|
||||
<span class="select-item-left">{{ color.label }}</span>
|
||||
<span class="select-item-right">{{ color.hex }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-tooltip content="自定义颜色" placement="top">
|
||||
<el-color-picker v-model="selectColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="微信外链自动转为文末引用" placement="top">
|
||||
<el-switch class="header__switch" v-model="status" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
</el-form>
|
||||
<el-tooltip class="item" effect="dark" content="自定义CSS样式" placement="left">
|
||||
<el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
|
||||
</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">
|
||||
<section id="output-wrapper">
|
||||
<div class="preview" contenteditable="true">
|
||||
<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">
|
||||
<el-form :model="config.form">
|
||||
<el-form-item label="行数(表头不计入行数)">
|
||||
<el-input v-model="config.form.rows"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="列数">
|
||||
<el-input v-model="config.form.cols"></el-input>
|
||||
</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>
|
||||
<div id="app" class="container">
|
||||
<el-container>
|
||||
<el-header class="top editor__header">
|
||||
<editor-header
|
||||
@showBox="showBox = !showBox"
|
||||
@showAboutDialog="aboutDialogVisible = true"
|
||||
@showDialogForm="dialogFormVisible = true"
|
||||
/>
|
||||
</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">
|
||||
<section id="output-wrapper">
|
||||
<div class="preview" contenteditable="true">
|
||||
<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>
|
||||
<about-dialog :aboutDialogVisible="aboutDialogVisible"
|
||||
@close="aboutDialogVisible = false" />
|
||||
<insert-form-dialog :dialogFormVisible="dialogFormVisible"
|
||||
@close="dialogFormVisible = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeMirror from 'codemirror/lib/codemirror'
|
||||
@ -132,48 +50,32 @@
|
||||
import '../scripts/format.js'
|
||||
|
||||
import fileApi from '../api/file';
|
||||
import marked from 'marked'
|
||||
import markdown from 'markdown'
|
||||
import juice from 'juice'
|
||||
import EditorHeader from './codeMirror/header';
|
||||
import editorHeader from './codeMirror/header';
|
||||
import aboutDialog from './codeMirror/aboutDialog';
|
||||
import insertFormDialog from './codeMirror/insertForm';
|
||||
import {
|
||||
setColorWithCustomTemplate,
|
||||
setColor,
|
||||
setFontSize,
|
||||
css2json,
|
||||
customCssWithTemplate,
|
||||
saveEditorContent,
|
||||
checkImage
|
||||
isImageIllegal
|
||||
} from '../scripts/util'
|
||||
import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css'
|
||||
|
||||
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: '',
|
||||
selectFont: '',
|
||||
selectSize: '',
|
||||
selectColor: '',
|
||||
status: '1'
|
||||
}
|
||||
return {
|
||||
config: config,
|
||||
showBox: false,
|
||||
aboutDialogVisible: false,
|
||||
dialogFormVisible: false,
|
||||
timeout: null,
|
||||
source: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
EditorHeader
|
||||
editorHeader, aboutDialog, insertFormDialog
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
@ -181,10 +83,7 @@
|
||||
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
|
||||
html: state=> state.html
|
||||
})
|
||||
},
|
||||
created() {
|
||||
@ -194,9 +93,6 @@
|
||||
this.initCssEditor()
|
||||
this.editorRefresh()
|
||||
})
|
||||
this.selectFont = this.currentFont
|
||||
this.selectSize = this.currentSize
|
||||
this.selectColor = this.currentColor
|
||||
},
|
||||
methods: {
|
||||
initEditor() {
|
||||
@ -215,7 +111,7 @@
|
||||
let item = e.clipboardData.items[i]
|
||||
if (item.kind === 'file') {
|
||||
const pasteFile = item.getAsFile()
|
||||
const checkImageResult = checkImage(pasteFile);
|
||||
const checkImageResult = isImageIllegal(pasteFile);
|
||||
|
||||
if (checkImageResult) {
|
||||
this.$message({
|
||||
@ -250,29 +146,6 @@
|
||||
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) {
|
||||
@ -297,32 +170,6 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
// 插入表格
|
||||
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')
|
||||
@ -344,22 +191,6 @@
|
||||
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() {
|
||||
@ -382,104 +213,16 @@
|
||||
}, 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()
|
||||
})
|
||||
},
|
||||
fontChanged(fonts) {
|
||||
this.setWxRendererOptions({
|
||||
fonts: fonts
|
||||
})
|
||||
this.setCurrentFont(fonts);
|
||||
this.editorRefresh()
|
||||
},
|
||||
sizeChanged(size) {
|
||||
let theme = setFontSize(size.replace('px', ''))
|
||||
theme = setColorWithCustomTemplate(theme, this.currentColor)
|
||||
this.setWxRendererOptions({
|
||||
size: size,
|
||||
theme: theme
|
||||
})
|
||||
this.setCurrentSize(size);
|
||||
this.editorRefresh()
|
||||
},
|
||||
colorChanged(color) {
|
||||
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'])
|
||||
...mapMutations(['initEditorState', 'initEditorEntity', 'editorRefresh', 'initCssEditorEntity'])
|
||||
},
|
||||
mounted() {
|
||||
this.leftAndRightScroll()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.header__item {
|
||||
margin: 0 3px;
|
||||
}
|
||||
.header__item_last {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.header__switch {
|
||||
margin-left: 8px;
|
||||
.main-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
34
src/components/codeMirror/aboutDialog.vue
Normal file
34
src/components/codeMirror/aboutDialog.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-dialog title="关于" :visible="aboutDialogVisible" @close="$emit('close')" 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">
|
||||
<el-button type="success" @click="onRedirect('https://github.com/doocs/md')" plain>GitHub 仓库</el-button>
|
||||
<el-button type="success" @click="onRedirect('https://gitee.com/doocs/md')" plain>Gitee 仓库</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
aboutDialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRedirect(url) {
|
||||
window.open(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-container class="top">
|
||||
<!-- 图片上传 -->
|
||||
<el-upload action="https://imgkr.com/api/files/upload" :headers="{'Content-Type': 'multipart/form-data'}"
|
||||
<el-upload class="header__item" action="https://imgkr.com/api/files/upload" :headers="{'Content-Type': 'multipart/form-data'}"
|
||||
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
|
||||
:before-upload="beforeUpload" :on-success="uploaded">
|
||||
<el-tooltip class="item" effect="dark" content="上传图片" placement="bottom-start">
|
||||
<i class="el-icon-upload" size="medium"> </i>
|
||||
<el-tooltip effect="dark" content="上传图片" placement="bottom-start">
|
||||
<i class="el-icon-upload" size="medium"></i>
|
||||
</el-tooltip>
|
||||
</el-upload>
|
||||
<!-- 下载文本文档 -->
|
||||
<el-tooltip class="item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
|
||||
<i class="el-icon-download" size="medium" @click="downloadEditorContent"> </i>
|
||||
<el-tooltip class="header__item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
|
||||
<i class="el-icon-download" size="medium" @click="downloadEditorContent"></i>
|
||||
</el-tooltip>
|
||||
<!-- 页面重置 -->
|
||||
<el-tooltip class="item" effect="dark" content="重置页面" placement="bottom-start">
|
||||
<i class="el-icon-refresh" size="medium" @click="reset"> </i>
|
||||
<el-tooltip class="header__item" effect="dark" content="重置页面" placement="bottom-start">
|
||||
<i class="el-icon-refresh" size="medium" @click="reset"></i>
|
||||
</el-tooltip>
|
||||
<!-- 插入表格 -->
|
||||
<el-tooltip class="item" effect="dark" content="插入表格" placement="bottom-start">
|
||||
<i class="el-icon-s-grid" size="medium" @click="dialogFormVisible = true"> </i>
|
||||
<el-tooltip class="header__item header__item_last" effect="dark" content="插入表格" placement="bottom-start">
|
||||
<i class="el-icon-s-grid" size="medium" @click="$emit('showDialogForm')"></i>
|
||||
</el-tooltip>
|
||||
<el-form size="mini" class="ctrl" :inline=true>
|
||||
<el-form-item>
|
||||
<el-select v-model="currentFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
|
||||
<el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
|
||||
<el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
|
||||
<el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
|
||||
:label="font.label" :value="font.value">
|
||||
<span class="select-item-left">{{ font.label }}</span>
|
||||
<span class="select-item-right">Abc</span>
|
||||
@ -31,27 +31,26 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="currentSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
|
||||
<el-option v-for="size in sizeOption" :key="size.value" :label="size.label" :value="size.value">
|
||||
<el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
|
||||
<el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
|
||||
<span class="select-item-left">{{ size.label }}</span>
|
||||
<span class="select-item-right">{{ size.desc }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="currentColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
|
||||
<el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
|
||||
<el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
|
||||
<el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
|
||||
<span class="select-item-left">{{ color.label }}</span>
|
||||
<span class="select-item-right">{{ color.hex }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-tooltip content="自定义颜色" placement="top">
|
||||
<el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
|
||||
<el-color-picker v-model="selectColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="微信外链自动转为文末引用" placement="top">
|
||||
<el-switch v-model="status" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
|
||||
<el-switch class="header__switch" v-model="citeStatus" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
</el-form>
|
||||
@ -59,19 +58,215 @@
|
||||
<el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
|
||||
</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>
|
||||
</div>
|
||||
<el-button type="success" plain size="medium" class="about" @click="$emit('showAboutDialog')">关于</el-button>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'header',
|
||||
methods: {
|
||||
|
||||
import {
|
||||
setColorWithCustomTemplate,
|
||||
setFontSize,
|
||||
css2json,
|
||||
isImageIllegal,
|
||||
customCssWithTemplate,
|
||||
} from '../../scripts/util'
|
||||
import {
|
||||
solveWeChatImage,
|
||||
solveHtml
|
||||
} from '../../scripts/converter'
|
||||
import config from '../../scripts/config'
|
||||
import DEFAULT_CSS_CONTENT from '../../scripts/themes/default-theme-css'
|
||||
import {mapState, mapMutations} from 'vuex'
|
||||
export default {
|
||||
name: 'editor-header',
|
||||
data() {
|
||||
return {
|
||||
config: config,
|
||||
citeStatus: false,
|
||||
selectFont: '',
|
||||
selectSize: '',
|
||||
selectColor: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
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
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
fontChanged(fonts) {
|
||||
this.setWxRendererOptions({
|
||||
fonts: fonts
|
||||
})
|
||||
this.setCurrentFont(fonts);
|
||||
this.editorRefresh()
|
||||
},
|
||||
sizeChanged(size) {
|
||||
let theme = setFontSize(size.replace('px', ''))
|
||||
theme = setColorWithCustomTemplate(theme, this.currentColor)
|
||||
this.setWxRendererOptions({
|
||||
size: size,
|
||||
theme: theme
|
||||
})
|
||||
this.setCurrentSize(size);
|
||||
this.editorRefresh()
|
||||
},
|
||||
colorChanged(color) {
|
||||
let theme = setFontSize(this.currentSize.replace('px', ''))
|
||||
theme = setColorWithCustomTemplate(theme, color)
|
||||
this.setWxRendererOptions({
|
||||
theme: theme
|
||||
})
|
||||
this.setCurrentColor(color);
|
||||
this.editorRefresh()
|
||||
},
|
||||
statusChanged(val) {
|
||||
this.setCiteStatus(val)
|
||||
this.editorRefresh()
|
||||
},
|
||||
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 = ``
|
||||
// 将 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'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 图片上传前的处理
|
||||
beforeUpload(file) {
|
||||
const checkImageResult = isImageIllegal(file);
|
||||
|
||||
if (checkImageResult) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: checkImageResult,
|
||||
type: 'error'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
// 复制到微信公众号
|
||||
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; // 恢复现场
|
||||
},
|
||||
// 自定义CSS样式
|
||||
async customStyle () {
|
||||
this.$emit('showBox');
|
||||
this.$nextTick(() => {
|
||||
if(!this.cssEditor) {
|
||||
this.cssEditor.refresh()
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.cssEditor.refresh()
|
||||
},50)
|
||||
let flag = await localStorage.getItem('__css_content')
|
||||
|
||||
if (!flag) {
|
||||
this.setCssEditorValue(DEFAULT_CSS_CONTENT)
|
||||
}
|
||||
},
|
||||
// 重置页面
|
||||
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.citeStatus = false;
|
||||
this.statusChanged(false);
|
||||
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()
|
||||
})
|
||||
},
|
||||
// 下载编辑器内容到本地
|
||||
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)
|
||||
},
|
||||
...mapMutations(['editorRefresh', 'clearEditorToDefault','setCurrentColor', 'setCiteStatus',
|
||||
'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
|
||||
},
|
||||
mounted() {
|
||||
this.selectFont = this.currentFont
|
||||
this.selectSize = this.currentSize
|
||||
this.selectColor = this.currentColor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.editor__header {
|
||||
width: 100%;
|
||||
}
|
||||
.header__item {
|
||||
margin: 0 3px;
|
||||
}
|
||||
.header__item_last {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.header__switch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
71
src/components/codeMirror/insertForm.vue
Normal file
71
src/components/codeMirror/insertForm.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-dialog title="插入表格" :visible="dialogFormVisible" @close="$emit('close')">
|
||||
<el-form :model="config.form">
|
||||
<el-form-item label="行数(表头不计入行数)">
|
||||
<el-input v-model="config.form.rows"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="列数">
|
||||
<el-input v-model="config.form.cols"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="success" plain @click="$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="insertTable">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '../../scripts/config'
|
||||
import {mapState, mapMutations} from 'vuex';
|
||||
export default {
|
||||
props: {
|
||||
dialogFormVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: config
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
editor: state=> state.editor
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 插入表格
|
||||
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.$emit('close')
|
||||
this.editorRefresh()
|
||||
},
|
||||
...mapMutations(['editorRefresh'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
@ -184,7 +184,7 @@ export function saveEditorContent(editor, name) {
|
||||
}
|
||||
}
|
||||
|
||||
export function checkImage(file) {
|
||||
export function isImageIllegal(file) {
|
||||
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
|
||||
return '请上传 JPG/PNG/GIF 格式的图片';
|
||||
}
|
||||
|
||||
@ -20,7 +20,8 @@ const state = {
|
||||
html: '',
|
||||
currentFont: '',
|
||||
currentSize: '',
|
||||
currentColor: ''
|
||||
currentColor: '',
|
||||
citeStatus: 0
|
||||
};
|
||||
const mutations = {
|
||||
setEditorValue(state, data) {
|
||||
@ -32,6 +33,10 @@ const mutations = {
|
||||
setWxRendererOptions(state, data) {
|
||||
state.wxRenderer.setOptions(data);
|
||||
},
|
||||
setCiteStatus(state, data) {
|
||||
state.citeStatus = data;
|
||||
localStorage.setItem('citeStatus', data)
|
||||
},
|
||||
setCurrentFont(state, data) {
|
||||
state.currentFont = data;
|
||||
localStorage.setItem('fonts', data)
|
||||
@ -48,12 +53,12 @@ const mutations = {
|
||||
state.currentFont = localStorage.getItem('fonts') || config.builtinFonts[0].value
|
||||
state.currentColor = localStorage.getItem('color') || config.colorOption[1].value
|
||||
state.currentSize = localStorage.getItem('size') || config.sizeOption[2].value
|
||||
state.status = localStorage.getItem('status') === 'true'
|
||||
state.citeStatus = localStorage.getItem('citeStatus') === 'true'
|
||||
state.wxRenderer = new WxRenderer({
|
||||
theme: setColor(state.currentColor),
|
||||
fonts: state.currentFont,
|
||||
size: state.currentSize,
|
||||
status: state.status
|
||||
status: state.citeStatus
|
||||
})
|
||||
},
|
||||
initEditorEntity(state) {
|
||||
@ -89,6 +94,7 @@ const mutations = {
|
||||
extraKeys: {
|
||||
'Ctrl-F': function autoFormat(editor) {
|
||||
const totalLines = editor.lineCount()
|
||||
|
||||
editor.autoFormatRange({
|
||||
line: 0,
|
||||
ch: 0
|
||||
@ -109,11 +115,11 @@ const mutations = {
|
||||
},
|
||||
editorRefresh(state) {
|
||||
let output = marked(state.editor.getValue(0), {
|
||||
renderer: state.wxRenderer.getRenderer(state.status)
|
||||
renderer: state.wxRenderer.getRenderer(state.citeStatus)
|
||||
})
|
||||
// 去除第一行的 margin-top
|
||||
output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"')
|
||||
if (state.status) {
|
||||
if (state.citeStatus) {
|
||||
// 引用脚注
|
||||
output += state.wxRenderer.buildFootnotes()
|
||||
// 附加的一些 style
|
||||
|
||||
Loading…
Reference in New Issue
Block a user