Skip to content

aminoeditor/vue-ace

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Apr 13, 2021
10868e0 · Apr 13, 2021

History

20 Commits
Apr 13, 2021
Jun 25, 2020
Jan 20, 2021
Apr 13, 2021
Apr 13, 2021
Jun 25, 2020
Jun 25, 2020

Repository files navigation

Install

npm install --save ace-builds @aminoeditor/vue-ace

Add to vue main.js

import Vue from 'vue';
import VueAce from '@aminoeditor/vue-ace';

Vue.use(VueAce);

// the rest of main.js below

Component

<template>
	<ace-editor v-model="code" @init="editorInit" lang="scss"></ace-editor>
</template>

<script>
export default {
	data () {
		return {
			code: 'body { background: blue; }',
			editorOptions: {
				showGutter: true
			}
		}
	},
	methods: {
		editorInit (editor) {
			require('ace-builds/src-min-noconflict/ext-language_tools');
			require('ace-builds/src-min-noconflict/mode-scss');
			require('ace-builds/src-min-noconflict/theme-ambiance');
			editor.session.setMode("ace/mode/scss");
			editor.commands.addCommand({
				name: "save",
				exec: this.save,
				bindKey: {mac: "cmd-s", win: "ctrl-s"}
			});
			editor.setOptions(this.editorOptions);
		}
	}
}
</script>