import Vue from 'vue'
import vueQuillEditor from 'vue-quill-editor'
import vueCodeMirror from 'vue-codemirror-lite'
import App from './App.vue'
import router from './router'
import '@/assets/css/common.css'
import '@/assets/css/animate.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.config.productionTip = false
Vue.use(vueQuillEditor)
Vue.use(vueCodeMirror)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
<template>
<div class="code-editor">
<codemirror
:value="code"
:options="editorOption"
ref="codeEditor">
</codemirror>
</div>
</template>
<script>
require('codemirror/mode/css/css')
require('codemirror/theme/ambiance.css')
export default {
name: 'coder',
data () {
return {
code: '#a { color: #ddd; }',
editorOption: {
mode: 'css',
theme: 'ambiance',
extraKeys: {
'Ctrl-Space': 'autocomplete'
}
}
}
},
computed: {
editor() {
return this.$refs.codeEditor.editor
}
},
mounted() {
this.editor.focus()
}
}
</script>
<style scoped>
</style>