mrtoth/baseimage-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/baseimage-tutorial-framework synced 2024-11-22 14:31:32 +00:00
Code Issues Releases Wiki Activity

Replace roll-your-own basic WebIDE with Ace Editor

Browse Source
This commit is contained in:
Bálint Bokros 2017-12-11 13:54:38 +01:00
parent 642ca7f54c
commit cb625bf116
4 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -11,6 +11,7 @@ downloaded from the following locations:
* [Popper.js](https://github.com/FezVrasta/popper.js#installation) * [Popper.js](https://github.com/FezVrasta/popper.js#installation)
* [Highlight.js](https://highlightjs.org/download/) * [Highlight.js](https://highlightjs.org/download/)
* [Showdown](https://github.com/showdownjs/showdown/releases) * [Showdown](https://github.com/showdownjs/showdown/releases)
* [ace](https://github.com/ajaxorg/ace-builds/releases)
## Building and running with Docker ## Building and running with Docker

8
src/app/static/ws_listener.js
View File

@ -1,6 +1,11 @@
let ws = new WebSocket('ws://' + document.location.host + '/ws'); let ws = new WebSocket('ws://' + document.location.host + '/ws');
let converter = new showdown.Converter(); let converter = new showdown.Converter();
// TODO: don't hardcode anchor id
let editor = ace.edit('anchor_webide');
editor.setTheme('ace/theme/monokai');
editor.getSession().setMode('ace/mode/python');
editor.$blockScrolling = Infinity;
$('#container').on('click', '.anchor', ( function (event) { $('#container').on('click', '.anchor', ( function (event) {
let anchorName = $(this).attr('id').replace('_event', ''); let anchorName = $(this).attr('id').replace('_event', '');
@ -42,8 +47,7 @@ ws.onmessage = function (messageEvent) {
console.log(message); console.log(message);
let $anchor = $('#' + message['anchor']); let $anchor = $('#' + message['anchor']);
if (message['anchor'] === 'anchor_webide') { if (message['anchor'] === 'anchor_webide') {
let code = hljs.highlightAuto(message['data']); editor.setValue(message['data'], -1);
$anchor.html(code.value);
} }
else { else {
let formatted_message = converter.makeHtml(message['data']); let formatted_message = converter.makeHtml(message['data']);

1
src/app/templates/index.html
View File

@ -42,6 +42,7 @@
<script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script> <script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script>
<script src="{{ static_url('vendor/js/highlight.min.js') }} defer"></script> <script src="{{ static_url('vendor/js/highlight.min.js') }} defer"></script>
<script src="{{ static_url('vendor/js/showdown.min.js') }} defer"></script> <script src="{{ static_url('vendor/js/showdown.min.js') }} defer"></script>
<script src="{{ static_url('vendor/js/ace/ace.js') }} defer"></script>
<script src="{{ static_url('ws_listener.js') }}" defer></script> <script src="{{ static_url('ws_listener.js') }}" defer></script>
</body> </body>
</html> </html>

7
src/app/templates/module-webide.html
View File

@ -1,9 +1,6 @@
<h1>Source code</h1> <h1>Source code</h1>
<pre> <div id="{{ anchor_id }}" class="mt-3 mb-3">
<code id="{{ anchor_id }}"> </div>
&nbsp;
</code>
</pre>
<button type="button" class="btn btn-outline-primary anchor" id="{{ anchor_id }}_event"> <button type="button" class="btn btn-outline-primary anchor" id="{{ anchor_id }}_event">
Next Next
</button> </button>