ace-editor线上代码编辑器

package.json

{
"name": "vue-cli",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "lizhi@camelotchina.com",
"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': '关键字'})
　　　　}
　　}
}

转载于:https://www.cnblogs.com/MisterHe/p/10465963.html