Added code editor mode selection

This commit is contained in:
NGPixel
2016-09-11 02:08:22 -04:00
parent 97602b51c8
commit 3212b62435
7 changed files with 51 additions and 19 deletions

View File

@@ -5,15 +5,30 @@
if($('#mk-editor').length === 1) {
require.config({paths: { "ace" : "/assets/js/ace"}});
let codeEditor = ace.edit("codeblock-editor");
codeEditor.setTheme("ace/theme/tomorrow_night");
codeEditor.getSession().setMode("ace/mode/markdown");
codeEditor.setOption('fontSize', '14px');
codeEditor.setOption('hScrollBarAlwaysVisible', false);
codeEditor.setOption('wrap', true);
let scEditor = ace.edit("codeblock-editor");
scEditor.setTheme("ace/theme/tomorrow_night");
scEditor.getSession().setMode("ace/mode/markdown");
scEditor.setOption('hScrollBarAlwaysVisible', false);
scEditor.setOption('wrap', true);
let modelist = ace.require("ace/ext/modelist");
var modelist = ace.require("ace/ext/modelist");
let vueCodeBlock = new Vue({
el: '#modal-editor-codeblock',
data: {
modes: modelist.modesByName,
modeSelected: 'text'
},
watch: {
modeSelected: (val, oldVal) => {
loadAceMode(val).done(() => {
ace.require("ace/mode/" + val);
codeEditor.getSession().setMode("ace/mode/" + val);
});
}
}
});
var mde = new SimpleMDE({
autofocus: true,
@@ -115,8 +130,8 @@ if($('#mk-editor').length === 1) {
name: "code-block",
action: (editor) => {
$('#modal-editor-codeblock').slideDown(400, () => {
scEditor.resize();
scEditor.focus();
codeEditor.resize();
codeEditor.focus();
});
},
className: "fa fa-code",
@@ -166,4 +181,23 @@ $('.btn-edit-save').on('click', (ev) => {
alerts.pushError('Something went wrong', 'Save operation failed.');
});
});
});
// ACE - Mode Loader
let modelistLoaded = [];
let loadAceMode = (m) => {
return $.ajax({
url: '/js/ace/mode-' + m + '.js',
dataType: "script",
cache: true,
beforeSend: () => {
if(_.includes(modelistLoaded, m)) {
return false;
}
},
success: () => {
modelistLoaded.push(m);
}
});
}