ace-editor线上代码编辑器
Posted misterhe
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ace-editor线上代码编辑器相关的知识，希望对你有一定的参考价值。
package.json
{
"name": "vue-cli",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "[email protected]",
"private": true,
"scripts": {
...
},
"dependencies": {
...
},
"devDependencies": {
...
"brace": "^0.11.0",
"emmet": "git+https://github.com/cloud9ide/emmet-core.git",
...
},
"engines": {
...
},
"browserslist": [
...
]
}
component文件夹——>editor.vue文件
<template>
<div style="width: 100%;height: 330px"></div>
</template>
<script>
require([‘emmet/emmet‘], function (data) {
window.emmet = data.emmet
});
const ace = require(‘brace‘);
export default {
name: ‘editor‘,
props: {
value: {
type: String,
required: true
}
},
data () {
return {
editor: null,
contentBackup: ‘‘
}
},
watch: {
value (val) {
if (this.contentBackup !== val) {
this.editor.setValue(val, 1)
}
},
theme: function (newTheme) {
this.editor.setTheme(‘ace/theme/‘ + newTheme)
},
lang: function (newLang) {
this.editor.getSession().setMode(‘ace/mode/‘ + newLang)
}
},
mounted () {
let vm = this
require(‘brace/ext/emmet‘)
require(‘brace/ext/language_tools‘)
let editor = vm.editor = ace.edit(this.$el)
this.$emit(‘init‘, editor)
let staticWordCompleter = {
getCompletions: function (editor, session, pos, prefix, callback) {
vm.$emit(‘setCompletions‘, editor, session, pos, prefix, callback)
}
}
editor.completers = [staticWordCompleter]
editor.setOptions({
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
})
editor.$blockScrolling = Infinity
editor.setFontSize(16)
editor.setOption(‘enableEmmet‘, true)
editor.getSession().setMode(‘ace/mode/mysql‘)
editor.setTheme(‘ace/theme/xcode‘)
editor.setValue(this.value, 1)
editor.on(‘change‘, function () {
let content = editor.getValue()
vm.$emit(‘input‘, content)
vm.contentBackup = content
})
}
}
</script>
<style scoped>
</style>
view文件夹的 你的页面文件
<editor v-model="formDynamic" @init="editorInit" @setCompletions="setCompletions"></editor>
methods:{
editorInit(){
require(‘brace/mode/mysql‘)
require(‘brace/theme/xcode‘)
},
setCompletions (editor, session, pos, prefix, callback) {//自动提示方法
callback(null, this.wordList.map(function (word) {
return {
caption: word.vl,
value: word.vl,
meta: word.meta
}
}))
},
}
mounted(){
if(!!configHighlight){//输入提示
for (let i of configHighlight.split(‘|‘)) {
this.wordList.push({‘vl‘: i, ‘meta‘: ‘关键字‘})
}
}
}
以上是关于ace-editor线上代码编辑器的主要内容，如果未能解决你的问题，请参考以下文章