vue2-ace-editor
A packaging of ace
require(['emmet/emmet'],function (data) { // this is huge. so require it async is better
window.emmet = data.emmet;
});
How to use
Install
npm install --save-dev vue2-ace-editor
Require it in
components
of Vue options{ data, methods, ... components: { editor: require('vue2-ace-editor'), }, }
Require the editor's mode/theme module in custom methods
{ data, methods: { editorInit: function () { require('brace/ext/language_tools') //language extension prerequsite... require('brace/mode/html') require('brace/mode/javascript') //language require('brace/mode/less') require('brace/theme/chrome') require('brace/snippets/javascript') //snippet } }, }
Use the component in template
<editor v-model="content" @init="editorInit" lang="html" theme="chrome" width="500" height="100"></editor>
prop
v-model
is requiredprop
lang
andtheme
is same as ace-editor's docprop
height
andwidth
could be one of these:200
,200px
,50%
Access the ACE's instance
<editor ref='myEditor'>
let editor = this.$refs.myEditor.editor
or
editorInit: function (editor) { }