Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script>
/**
* @property validator
**/
import Ace from "ace-builds/src-noconflict/ace";
import "ace-builds/webpack-resolver";
export default {
props: {
value: {
required: true
},
lang: {
type: String,
default: ()=> 'sh'
},
theme: {
type: String,
default: ()=> 'dracula'
}
},
data () {
return {
content: this.value
}
},
watch: {
value(value) {
if (this.content !== value) {
this.$options.editor.setValue(value, 1)
}
}
},
methods:{
init(){
this.$options.editor = Ace.edit(this.$refs.editor, {
mode: `ace/mode/${this.lang}`,
theme:`ace/theme/${this.theme}`,
maxLines: 50,
minLines: 10,
fontSize: 18
})
this.$options.editor.setValue(this.content || '#!/usr/bin/env bash', 1)
this.$options.editor.on('change', () => {
this.content = this.$options.editor.getValue()
this.$emit('input', this.content)
})
}
},
created() {
this.$nextTick(() =>this.init())
}
}
</script>
<template>
<div>
<div ref="editor" class="w-full" style="min-height: 300px"></div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.