|
|
|
|
@ -27,100 +27,102 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let codeEditor
|
|
|
|
|
let ace
|
|
|
|
|
let codeEditor
|
|
|
|
|
let ace
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'editor-codeblock',
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
modes: [],
|
|
|
|
|
modeSelected: 'text',
|
|
|
|
|
modelistLoaded: [],
|
|
|
|
|
isLoading: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
content () {
|
|
|
|
|
return this.$store.state.editorCodeblock.content
|
|
|
|
|
},
|
|
|
|
|
isShown () {
|
|
|
|
|
return this.$store.state.editorCodeblock.shown
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
modeSelected(val, oldVal) {
|
|
|
|
|
this.loadMode(val)
|
|
|
|
|
}
|
|
|
|
|
export default {
|
|
|
|
|
name: 'editor-codeblock',
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
modes: [],
|
|
|
|
|
modeSelected: 'text',
|
|
|
|
|
modelistLoaded: [],
|
|
|
|
|
isLoading: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
content() {
|
|
|
|
|
return this.$store.state.editorCodeblock.content
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init () {
|
|
|
|
|
let self = this
|
|
|
|
|
self._.delay(() => {
|
|
|
|
|
codeEditor = ace.edit('codeblock-editor')
|
|
|
|
|
codeEditor.setTheme('ace/theme/tomorrow_night')
|
|
|
|
|
codeEditor.getSession().setMode('ace/mode/' + self.modeSelected)
|
|
|
|
|
codeEditor.setOption('fontSize', '14px')
|
|
|
|
|
codeEditor.setOption('hScrollBarAlwaysVisible', false)
|
|
|
|
|
codeEditor.setOption('wrap', true)
|
|
|
|
|
codeEditor.setOption('showPrintMargin', false)
|
|
|
|
|
isShown() {
|
|
|
|
|
return this.$store.state.editorCodeblock.shown
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
modeSelected(val, oldVal) {
|
|
|
|
|
this.loadMode(val)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init() {
|
|
|
|
|
let self = this
|
|
|
|
|
self._.delay(() => {
|
|
|
|
|
codeEditor = ace.edit('codeblock-editor')
|
|
|
|
|
codeEditor.setTheme('ace/theme/tomorrow_night')
|
|
|
|
|
codeEditor.getSession().setMode('ace/mode/' + self.modeSelected)
|
|
|
|
|
codeEditor.setOption('fontSize', '14px')
|
|
|
|
|
codeEditor.setOption('hScrollBarAlwaysVisible', false)
|
|
|
|
|
codeEditor.setOption('wrap', true)
|
|
|
|
|
codeEditor.setOption('useSoftTabs', true)
|
|
|
|
|
codeEditor.setOption('tabSize', 2)
|
|
|
|
|
codeEditor.setOption('showPrintMargin', false)
|
|
|
|
|
|
|
|
|
|
codeEditor.setValue(self.content)
|
|
|
|
|
codeEditor.setValue(self.content)
|
|
|
|
|
|
|
|
|
|
codeEditor.focus()
|
|
|
|
|
codeEditor.renderer.updateFull()
|
|
|
|
|
}, 100)
|
|
|
|
|
},
|
|
|
|
|
loadMode (m) {
|
|
|
|
|
let self = this
|
|
|
|
|
if (self._.includes(self.modelistLoaded, m)) {
|
|
|
|
|
codeEditor.getSession().setMode('ace/mode/' + m)
|
|
|
|
|
} else {
|
|
|
|
|
self.isLoading = true
|
|
|
|
|
self.$http.get('/js/ace/mode-' + m + '.js').then(resp => {
|
|
|
|
|
if(resp.ok) {
|
|
|
|
|
eval(resp.bodyText)
|
|
|
|
|
self.modelistLoaded.push(m)
|
|
|
|
|
ace.acequire('ace/mode/' + m)
|
|
|
|
|
codeEditor.getSession().setMode('ace/mode/' + m)
|
|
|
|
|
self._.delay(() => { self.isLoading = false }, 500)
|
|
|
|
|
} else {
|
|
|
|
|
this.$store.dispatch('alert', {
|
|
|
|
|
style: 'red',
|
|
|
|
|
icon: 'square-cross',
|
|
|
|
|
msg: self.$t('editor.codeblockloadingerror')
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
his.$store.dispatch('alert', {
|
|
|
|
|
codeEditor.focus()
|
|
|
|
|
codeEditor.renderer.updateFull()
|
|
|
|
|
}, 100)
|
|
|
|
|
},
|
|
|
|
|
loadMode(m) {
|
|
|
|
|
let self = this
|
|
|
|
|
if (self._.includes(self.modelistLoaded, m)) {
|
|
|
|
|
codeEditor.getSession().setMode('ace/mode/' + m)
|
|
|
|
|
} else {
|
|
|
|
|
self.isLoading = true
|
|
|
|
|
self.$http.get('/js/ace/mode-' + m + '.js').then(resp => {
|
|
|
|
|
if (resp.ok) {
|
|
|
|
|
eval(resp.bodyText)
|
|
|
|
|
self.modelistLoaded.push(m)
|
|
|
|
|
ace.acequire('ace/mode/' + m)
|
|
|
|
|
codeEditor.getSession().setMode('ace/mode/' + m)
|
|
|
|
|
self._.delay(() => { self.isLoading = false }, 500)
|
|
|
|
|
} else {
|
|
|
|
|
this.$store.dispatch('alert', {
|
|
|
|
|
style: 'red',
|
|
|
|
|
icon: 'square-cross',
|
|
|
|
|
msg: 'Error: ' + err.body.msg
|
|
|
|
|
msg: self.$t('editor.codeblockloadingerror')
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
his.$store.dispatch('alert', {
|
|
|
|
|
style: 'red',
|
|
|
|
|
icon: 'square-cross',
|
|
|
|
|
msg: 'Error: ' + err.body.msg
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
cancel () {
|
|
|
|
|
codeEditor.destroy()
|
|
|
|
|
this.$store.dispatch('editorCodeblock/close')
|
|
|
|
|
},
|
|
|
|
|
insertCode () {
|
|
|
|
|
let codeBlockText = '\n```' + this.modeSelected + '\n' + codeEditor.getValue() + '\n```\n'
|
|
|
|
|
this.$store.dispatch('editor/insert', codeBlockText)
|
|
|
|
|
this.$store.dispatch('alert', {
|
|
|
|
|
style: 'blue',
|
|
|
|
|
icon: 'inbox',
|
|
|
|
|
msg: this.$t('editor.codeblocksuccess')
|
|
|
|
|
})
|
|
|
|
|
this.cancel()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
FuseBox.import('/js/ace/ace.js', (acePkg) => {
|
|
|
|
|
ace = acePkg
|
|
|
|
|
this.modes = ace.acequire('ace/ext/modelist').modesByName
|
|
|
|
|
cancel() {
|
|
|
|
|
codeEditor.destroy()
|
|
|
|
|
this.$store.dispatch('editorCodeblock/close')
|
|
|
|
|
},
|
|
|
|
|
insertCode() {
|
|
|
|
|
let codeBlockText = '\n```' + this.modeSelected + '\n' + codeEditor.getValue() + '\n```\n'
|
|
|
|
|
this.$store.dispatch('editor/insert', codeBlockText)
|
|
|
|
|
this.$store.dispatch('alert', {
|
|
|
|
|
style: 'blue',
|
|
|
|
|
icon: 'inbox',
|
|
|
|
|
msg: this.$t('editor.codeblocksuccess')
|
|
|
|
|
})
|
|
|
|
|
this.$root.$on('editorCodeblock/init', this.init)
|
|
|
|
|
this.cancel()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
FuseBox.import('/js/ace/ace.js', (acePkg) => {
|
|
|
|
|
ace = acePkg
|
|
|
|
|
this.modes = ace.acequire('ace/ext/modelist').modesByName
|
|
|
|
|
})
|
|
|
|
|
this.$root.$on('editorCodeblock/init', this.init)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
NGPixel
8 years ago
committed by
