feat: auto format markdown text(Ctrl-F)

按 Ctrl-F 自动格式化 Markdown 文章
This commit is contained in:
yanglbme 2020-05-20 18:30:01 +08:00
parent c42ac06df3
commit 1ceef62b99
2 changed files with 20 additions and 6 deletions

View File

@ -18,6 +18,7 @@
"juice": "^6.0.0", "juice": "^6.0.0",
"markdown": "^0.5.0", "markdown": "^0.5.0",
"marked": "^0.8.0", "marked": "^0.8.0",
"prettier": "^2.0.5",
"prettify": "^0.1.7", "prettify": "^0.1.7",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",

View File

@ -3,6 +3,8 @@ import Vuex from 'vuex'
import config from '../scripts/config'; import config from '../scripts/config';
import WxRenderer from '../scripts/renderers/wx-renderer' import WxRenderer from '../scripts/renderers/wx-renderer'
import marked from 'marked' import marked from 'marked'
import prettier from 'prettier/standalone'
import prettierMarkdown from 'prettier/parser-markdown'
import CodeMirror from 'codemirror/lib/codemirror' import CodeMirror from 'codemirror/lib/codemirror'
import DEFAULT_CONTENT from '../scripts/default-content' import DEFAULT_CONTENT from '../scripts/default-content'
import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css' import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css'
@ -78,7 +80,17 @@ const mutations = {
lineNumbers: false, lineNumbers: false,
lineWrapping: true, lineWrapping: true,
styleActiveLine: true, styleActiveLine: true,
autoCloseBrackets: true autoCloseBrackets: true,
extraKeys: {
'Ctrl-F': function autoFormat(editor) {
const doc = prettier.format(editor.getValue(0), {
parser: 'markdown',
plugins: [prettierMarkdown]
})
localStorage.setItem('__editor_content', doc)
editor.setValue(doc)
}
}
} }
) )
// 如果有编辑器内容被保存则读取,否则加载默认内容 // 如果有编辑器内容被保存则读取,否则加载默认内容
@ -90,7 +102,8 @@ const mutations = {
}, },
initCssEditorEntity(state) { initCssEditorEntity(state) {
state.cssEditor = CodeMirror.fromTextArea( state.cssEditor = CodeMirror.fromTextArea(
document.getElementById('cssEditor'), { document.getElementById('cssEditor'),
{
value: '', value: '',
mode: 'css', mode: 'css',
theme: 'style-mirror', theme: 'style-mirror',
@ -99,10 +112,10 @@ const mutations = {
matchBrackets: true, matchBrackets: true,
autofocus: true, autofocus: true,
extraKeys: { extraKeys: {
'Ctrl-F': function autoFormat(editor) { 'Ctrl-F': function autoFormat(editor) {
const totalLines = editor.lineCount() const totalLines = editor.lineCount()
editor.autoFormatRange({ editor.autoFormatRange({
line: 0, line: 0,
ch: 0 ch: 0
}, { }, {