amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

beta version

Browse Source
This commit is contained in:
JimQing 2020-05-02 12:33:44 +08:00
parent 2cd6eb54c8
commit 7aae308859
2 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/CodemirrorEditor.vue
View File

@ -3,6 +3,7 @@
<el-container> <el-container>
<el-header class="top editor__header"> <el-header class="top editor__header">
<editor-header <editor-header
@cssChanged="cssChanged"
@showBox="showBox = !showBox" @showBox="showBox = !showBox"
@showAboutDialog="aboutDialogVisible = true" @showAboutDialog="aboutDialogVisible = true"
@showDialogForm="dialogFormVisible = true" @showDialogForm="dialogFormVisible = true"
@ -38,32 +39,35 @@
</div> </div>
</template> </template>
<script> <script>
import CodeMirror from 'codemirror/lib/codemirror' import CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/mode/css/css' import 'codemirror/mode/css/css'
import 'codemirror/mode/markdown/markdown' import 'codemirror/mode/markdown/markdown'
import 'codemirror/addon/edit/matchbrackets' import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line' import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/hint/show-hint.js' import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/css-hint.js' import 'codemirror/addon/hint/css-hint.js'
import '../scripts/format.js' import '../scripts/format.js'
import fileApi from '../api/file'; import fileApi from '../api/file';
import editorHeader from './codeMirror/header'; import editorHeader from './codeMirror/header';
import aboutDialog from './codeMirror/aboutDialog'; import aboutDialog from './codeMirror/aboutDialog';
import insertFormDialog from './codeMirror/insertForm'; import insertFormDialog from './codeMirror/insertForm';
import { import {
setFontSize,
css2json,
customCssWithTemplate,
saveEditorContent, saveEditorContent,
isImageIllegal isImageIllegal
} from '../scripts/util' } from '../scripts/util'
require('codemirror/mode/javascript/javascript') require('codemirror/mode/javascript/javascript')
import '../scripts/closebrackets' import '../scripts/closebrackets'
import $ from 'jquery' import $ from 'jquery'
import config from '../scripts/config' import config from '../scripts/config'
import {mapState, mapMutations} from 'vuex'; import {mapState, mapMutations} from 'vuex';
export default { export default {
data() { data() {
return { return {
config: config, config: config,
@ -83,6 +87,8 @@
output: state=> state.output, output: state=> state.output,
editor: state=> state.editor, editor: state=> state.editor,
cssEditor: state=> state.cssEditor, cssEditor: state=> state.cssEditor,
currentSize: state=> state.currentSize,
currentColor: state=> state.currentColor,
html: state=> state.html html: state=> state.html
}) })
}, },
@ -146,6 +152,16 @@
saveEditorContent(this.cssEditor, '__css_content') saveEditorContent(this.cssEditor, '__css_content')
}) })
}, },
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) { uploaded(response, file, fileList) {
if (response.success) { if (response.success) {
@ -213,7 +229,8 @@
}, 100) }, 100)
}) })
}, },
...mapMutations(['initEditorState', 'initEditorEntity', 'editorRefresh', 'initCssEditorEntity']) ...mapMutations(['initEditorState', 'initEditorEntity', 'setWxRendererOptions',
'editorRefresh', 'initCssEditorEntity'])
}, },
mounted() { mounted() {
this.leftAndRightScroll() this.leftAndRightScroll()

15
src/components/codeMirror/header.vue
View File

@ -67,9 +67,7 @@
import { import {
setColorWithCustomTemplate, setColorWithCustomTemplate,
setFontSize, setFontSize,
css2json, isImageIllegal
isImageIllegal,
customCssWithTemplate,
} from '../../scripts/util' } from '../../scripts/util'
import { import {
solveWeChatImage, solveWeChatImage,
@ -131,15 +129,6 @@ export default {
this.setCiteStatus(val) this.setCiteStatus(val)
this.editorRefresh() 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) { uploaded(response, file, fileList) {
if (response.success) { if (response.success) {
@ -229,7 +218,7 @@ export default {
this.fontChanged(this.config.builtinFonts[0].value) this.fontChanged(this.config.builtinFonts[0].value)
this.colorChanged(this.config.colorOption[1].value) this.colorChanged(this.config.colorOption[1].value)
this.sizeChanged(this.config.sizeOption[2].value) this.sizeChanged(this.config.sizeOption[2].value)
this.cssChanged() this.$emit('cssChanged')
}).catch(() => { }).catch(() => {
this.editor.focus() this.editor.focus()
}) })