mirror of https://github.com/Fabio286/antares.git
115 lines
2.5 KiB
Vue
115 lines
2.5 KiB
Vue
|
<template>
|
||
|
<div class="editor-wrapper">
|
||
|
<div
|
||
|
:id="`editor-${id}`"
|
||
|
class="editor"
|
||
|
:class="editorClass"
|
||
|
:style="{height: `${height}px`}"
|
||
|
/>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import * as ace from 'ace-builds';
|
||
|
import 'ace-builds/webpack-resolver';
|
||
|
import { mapGetters } from 'vuex';
|
||
|
|
||
|
export default {
|
||
|
name: 'BaseTextEditor',
|
||
|
props: {
|
||
|
value: String,
|
||
|
mode: { type: String, default: 'text' },
|
||
|
editorClass: { type: String, default: '' },
|
||
|
autoFocus: { type: Boolean, default: false },
|
||
|
readOnly: { type: Boolean, default: false },
|
||
|
height: { type: Number, default: 200 }
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
editor: null,
|
||
|
id: null
|
||
|
};
|
||
|
},
|
||
|
computed: {
|
||
|
...mapGetters({
|
||
|
editorTheme: 'settings/getEditorTheme',
|
||
|
autoComplete: 'settings/getAutoComplete',
|
||
|
lineWrap: 'settings/getLineWrap'
|
||
|
})
|
||
|
},
|
||
|
watch: {
|
||
|
mode () {
|
||
|
if (this.editor)
|
||
|
this.editor.session.setMode(`ace/mode/${this.mode}`);
|
||
|
},
|
||
|
editorTheme () {
|
||
|
if (this.editor)
|
||
|
this.editor.setTheme(`ace/theme/${this.editorTheme}`);
|
||
|
},
|
||
|
autoComplete () {
|
||
|
if (this.editor) {
|
||
|
this.editor.setOptions({
|
||
|
enableLiveAutocompletion: this.autoComplete
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
lineWrap () {
|
||
|
if (this.editor) {
|
||
|
this.editor.setOptions({
|
||
|
wrap: this.lineWrap
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
created () {
|
||
|
this.id = this._uid;
|
||
|
},
|
||
|
mounted () {
|
||
|
this.editor = ace.edit(`editor-${this.id}`, {
|
||
|
mode: `ace/mode/${this.mode}`,
|
||
|
theme: `ace/theme/${this.editorTheme}`,
|
||
|
value: this.value,
|
||
|
fontSize: '14px',
|
||
|
printMargin: false,
|
||
|
readOnly: this.readOnly
|
||
|
});
|
||
|
|
||
|
this.editor.setOptions({
|
||
|
enableBasicAutocompletion: false,
|
||
|
wrap: this.lineWrap,
|
||
|
enableSnippets: false,
|
||
|
enableLiveAutocompletion: false
|
||
|
});
|
||
|
|
||
|
this.editor.session.on('change', () => {
|
||
|
const content = this.editor.getValue();
|
||
|
this.$emit('update:value', content);
|
||
|
});
|
||
|
|
||
|
if (this.autoFocus) {
|
||
|
setTimeout(() => {
|
||
|
this.editor.focus();
|
||
|
this.editor.resize();
|
||
|
}, 20);
|
||
|
}
|
||
|
|
||
|
setTimeout(() => {
|
||
|
this.editor.resize();
|
||
|
}, 20);
|
||
|
}
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.editor-wrapper {
|
||
|
.editor {
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.ace_.mdi {
|
||
|
display: inline-block;
|
||
|
width: 17px;
|
||
|
}
|
||
|
</style>
|