reveal.js-ace is a reveal.js plugin that allows to embed ACE editors in a reveal.js presentation.
Download and install the package in your project:
bower install Gottox/reveal.js-ace
Add the plugin to the dependencies in your presentation, as below.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'bower_components/reveal.js-ace/ace.js' }
]
});
And embed the editor
<iframe class="ace" width=600 height=500 data-onchange="console.log(editor.getValue())">
Hello World!
</iframe>
You can configure the editor for your presentation by providing a ace option in
the reveal.js initialization options. Note that all config values are optional
and will default as specified below.
Reveal.initialize({
// ...
ace: {
// Event is triggered when a new editor is created.
oninit: function(editor) {
},
// Event is triggered when the text of an editor has changed
onchange: function(event, editor) {
},
// Automatically focus an editor when it is displayed
autoFocus: false,
// defines a css class name for the ace editors
className: "ace"
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent