Skip to content

Instantly share code, notes, and snippets.

@jstoone
Created June 15, 2016 19:06
Show Gist options
  • Save jstoone/63f89829868b604382f8d912f9695807 to your computer and use it in GitHub Desktop.
Save jstoone/63f89829868b604382f8d912f9695807 to your computer and use it in GitHub Desktop.
Quick & Dirty: Vue.js (vueify) wrapper for Ace editor
<template>
<!-- Languages -->
<div class="Editor__Languages">
<button @click.prevent="changeHighlight"
data-style="ace/mode/markdown"
class="btn btn-xs btn-primary">.md</button>
<button @click.prevent="changeHighlight"
data-style="ace/mode/php"
class="btn btn-xs">.php</button>
<button @click.prevent="changeHighlight"
data-style="ace/mode/sql"
class="btn btn-xs">.sql</button>
<button @click.prevent="changeHighlight"
data-style="ace/mode/javascript"
class="btn btn-xs">.js</button>
<button @click.prevent="changeHighlight"
data-style="ace/mode/css"
class="btn btn-xs">.css</button>
<button @click.prevent="changeHighlight"
data-style="ace/mode/html"
class="btn btn-xs">.html</button>
<button @click.prevent="changeHighlight"
data-style="ace/mode/sh"
class="btn btn-xs">.sh</button>
<button @click.prevent="changeHighlight"
data-style="ace/mode/c_cpp"
class="btn btn-xs">.cpp</button>
</div>
<div id="snippet-editor"
class="Editor col-md-12"><slot># Write something awesome!</slot></div>
</template>
<script>
export default {
name: 'snippet-editor',
props: [],
data() {
return {
editor: null,
themeButtons: null,
}
},
ready() {
this.editor = ace.edit('snippet-editor');
this.editor.setTheme('ace/theme/twilight');
this.editor.getSession().setMode('ace/mode/markdown');
this.themeButtons = document.querySelectorAll('.Editor__Languages button');
},
methods: {
changeHighlight(event) {
const target = event.target;
const theme = target.getAttribute('data-style');
this.editor.session.setMode(theme);
console.log(this.themeButtons);
[...this.themeButtons].forEach( button => button.classList.remove('btn-primary') );
target.classList.add('btn-primary');
}
},
}
</script>
<style>
.Editor {
height: 250px;
}
.Editor__Languages {
padding-bottom: 1em;
}
</style>
// bootstrap Ace editor
// remember to `npm install ace-builds -S`
require('./../../../../node_modules/ace-builds/src-min/ace');
require('./../../../../node_modules/ace-builds/src-min/theme-twilight');
require('./../../../../node_modules/ace-builds/src-min/mode-markdown');
require('./../../../../node_modules/ace-builds/src-min/mode-php');
require('./../../../../node_modules/ace-builds/src-min/mode-sql');
require('./../../../../node_modules/ace-builds/src-min/mode-javascript');
require('./../../../../node_modules/ace-builds/src-min/mode-css');
require('./../../../../node_modules/ace-builds/src-min/mode-html');
require('./../../../../node_modules/ace-builds/src-min/mode-sh');
require('./../../../../node_modules/ace-builds/src-min/mode-c_cpp');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment