A packaging of ace
Demos:
emmet support for html is removed after 0.0.6. because its code cannot works with strict mode.
if you want to use it. require emmet by your own.
npm install emmet@git+https://github.com/cloud9ide/emmet-core.git#41973fcc70392864c7a469cf5dcd875b88b93d4a
require(['emmet/emmet'],function (data) { // this is huge. so require it async is better
window.emmet = data.emmet;
});
Install
npm install --save-dev svelte-ace-editor
Use in a svelte component:
<div>
<AceEditor
bind:value={value}
theme="clouds_midnight"
lang={lang}
options={options}
width="100%"
height="512"
on:init={editorInit}
on:input={onEditorChange}
/>
</div>
<script>
import AceEditor from 'svelte-ace-editor'
if (process.browser) {
require('brace');
// require('brace/ext/language_tools')
// require('brace/ext/language_tools')
// require('brace/mode/pgsql')
// require('brace/mode/mysql')
// require('brace/mode/sql')
// require('brace/mode/sqlserver')
require('brace/theme/clouds_midnight')
}
let value = ''
let lang = 'sql'
let options = {}
function editorInit (editor) {
// @todo something with editor or something after init
}
function onEditorChange (newValue) {
value = newValue.detail;
}
</script>
Further Notes:
prop value
is required
prop lang
and theme
is same as ace-editor's doc
prop height
and width
could be one of these: 200
, 200px
, 50%
this component is based on this component: https://github.com/chairuosen/vue2-ace-editor/tree/91051422b36482eaf94271f1a263afa4b998f099