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

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

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