refactor: client structure + editor preview logic
This commit is contained in:
parent
37c28691ff
commit
4fa7ed4e93
@ -137,7 +137,7 @@ let bootstrap = () => {
|
||||
// Load Icons
|
||||
// ====================================
|
||||
|
||||
import(/* webpackChunkName: "icons" */ '../svg/icons.svg').then(icons => {
|
||||
import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
|
||||
document.body.insertAdjacentHTML('beforeend', icons)
|
||||
})
|
||||
}
|
@ -62,9 +62,10 @@
|
||||
.editor-code-main
|
||||
.editor-code-editor
|
||||
.editor-code-editor-title Editor
|
||||
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready="onCmReady")
|
||||
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
|
||||
.editor-code-preview
|
||||
.editor-code-preview-title Preview
|
||||
.editor-code-preview-content(v-html='previewHTML')
|
||||
v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', :fixed='true', :right='!isMobile', :left='isMobile', :bottom='true')
|
||||
v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
|
||||
v-icon add_circle
|
||||
@ -87,6 +88,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
|
||||
@ -106,6 +109,16 @@ import 'codemirror/addon/search/matchesonscrollbar.js'
|
||||
import 'codemirror/addon/search/searchcursor.js'
|
||||
import 'codemirror/addon/search/match-highlighter.js'
|
||||
|
||||
// Markdown-it
|
||||
import MarkdownIt from 'markdown-it'
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
typography: true
|
||||
})
|
||||
|
||||
export default {
|
||||
components: {
|
||||
codemirror
|
||||
@ -127,7 +140,8 @@ export default {
|
||||
annotateScrollbar: true
|
||||
},
|
||||
viewportMargin: 50
|
||||
}
|
||||
},
|
||||
previewHTML: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -156,7 +170,11 @@ export default {
|
||||
self.$parent.save()
|
||||
}
|
||||
})
|
||||
}
|
||||
this.onCmInput(this.code)
|
||||
},
|
||||
onCmInput: _.debounce(function (newContent) {
|
||||
this.previewHTML = md.render(newContent)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
@ -199,7 +199,7 @@ export default {
|
||||
<style lang="scss">
|
||||
.login {
|
||||
background-color: mc('blue', '800');
|
||||
background-image: url('../../static/svg/login-bg-motif.svg');
|
||||
background-image: url('../static/svg/login-bg-motif.svg');
|
||||
background-repeat: repeat;
|
||||
background-size: 200px;
|
||||
width: 100%;
|
||||
@ -221,7 +221,7 @@ export default {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('../../static/svg/login-bg.svg');
|
||||
background-image: url('../static/svg/login-bg.svg');
|
||||
background-position: center bottom;
|
||||
background-size: cover;
|
||||
top: 0;
|
@ -2,6 +2,6 @@
|
||||
|
||||
require('vuetify/src/stylus/main.styl')
|
||||
require('./scss/app.scss')
|
||||
require('./js/compatibility.js')
|
||||
require('./helpers/compatibility.js')
|
||||
require('offline-plugin/runtime').install()
|
||||
require('./js/app.js')
|
||||
require('./app.js')
|
||||
|
Loading…
Reference in New Issue
Block a user