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",
"markdown": "^0.5.0",
"marked": "^0.8.0",
"prettier": "^2.0.5",
"prettify": "^0.1.7",
"vue": "^2.6.10",
"vue-router": "^3.1.3",

View File

@ -3,6 +3,8 @@ import Vuex from 'vuex'
import config from '../scripts/config';
import WxRenderer from '../scripts/renderers/wx-renderer'
import marked from 'marked'
import prettier from 'prettier/standalone'
import prettierMarkdown from 'prettier/parser-markdown'
import CodeMirror from 'codemirror/lib/codemirror'
import DEFAULT_CONTENT from '../scripts/default-content'
import DEFAULT_CSS_CONTENT from '../scripts/themes/default-theme-css'
@ -78,7 +80,17 @@ const mutations = {
lineNumbers: false,
lineWrapping: 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) {
state.cssEditor = CodeMirror.fromTextArea(
document.getElementById('cssEditor'), {
document.getElementById('cssEditor'),
{
value: '',
mode: 'css',
theme: 'style-mirror',
@ -99,10 +112,10 @@ const mutations = {
matchBrackets: true,
autofocus: true,
extraKeys: {
'Ctrl-F': function autoFormat(editor) {
const totalLines = editor.lineCount()
'Ctrl-F': function autoFormat(editor) {
const totalLines = editor.lineCount()
editor.autoFormatRange({
editor.autoFormatRange({
line: 0,
ch: 0
}, {