Change Codemirror mode on the fly through a select menu

Question

I am trying to change a codemirror mode on the fly using the methode below, but it is unfortunately not working and your help is welcome

I have a select menu such :

<select name="idLanguage" id="select" onChange="selectMode()">
<option value="1">Python</option>
<option value="10">JavaScript</option>
<option value="33">Asterisk dialplan</option>
<option value="34">Clojure</option>
<option value="35">Common Lisp</option>
<option value="36">D</option>
<option value="37">ECL</option>
<option value="38">Go</option>
<option value="39">Haskell</option>
<option value="40">HTML</option>
<option value="41">Jinja2</option>
<option value="42">LiveScript</option>
<option value="43">mIRC</option>
</select>

and then I use this javascript method :

var modeInput = document.getElementById("select");
function selectMode() {
  var myindex  = modeInput.selectedIndex;
  var modefly = modeInput.options[myindex].text.toLowerCase();
  alert(modefly); // This is giving me the exact mode on the screen
  editor.setOption("mode", modefly);// no change in the mode
  CodeMirror.autoLoadMode(editor, modefly);//no change in the mode
  //editor.refresh();
   }

Although the alert() is giving the right answer, the mode is not changed

Any idea ?

Thank you

UPDATE :

I am loading all the modes in the header (python, javascript etc ..) I changed the structure of codemirror assets, I have a single directory called assets that contain a folder js with all the javascripts including codemirror modes so I am thinking that this is no longuer valid

CodeMirror.modeURL = "../mode/%N/%N.js";

how should I fix it ? with the configuration of folders I have right now, even the lazy mode example is not working

Answer 1

Update I just remembered that my mode changer would never work unless I provided the mime type code mirror expects, not the mode name. i.e. pass it text/x-markdown and not markdown

I'm using the latest release of codemirror on my site http://pste.me.

Via a select menu, the mode can be changed using:

$('#mode').change(function(){
   editor.setOption("mode", $(this).val() );
});

Where editor is a reference to an CodeMirror.fromTextArea object.

I'm not a codemirror expert but I believe the addition mode/autoload methods are no longer used. I'm not having any problem with it auto-loading the needed files, but you could always dynamically build a new script tag and append it to the document head before setting the mode.

That's the method we use for the editor themes:

// Append the theme styles
var link = document.createElement('link');
link.onload = function(){
    pste.editor.setOption("theme", theme);
};
link.rel = "stylesheet";
link.media = "all";
link.href = INTERFACE_URL+"/codemirror/theme/"+theme+".css";
document.getElementsByTagName('head')[0].appendChild(link);

Answer 2

This solution is working for me, hope you find this useful.

In html file load these scripts

<script
  type="text/javascript"
  src="/node_modules/codemirror/lib/codemirror.js"
></script>
<script
  src="/node_modules/codemirror/addon/mode/loadmode.js"
  defer
></script>

And int your script.js

CodeMirror.modeURL = "/node_modules/codemirror/mode/%N/%N.js";
let editor = CodeMirror.fromTextArea(document.querySelector("textarea"), {
  lineNumbers: true,
  value: "",
  matchBrackets: true,
  autoCloseBrackets: true,
});

var modeInput = document.getElementById("select");
function selectMode() {
  var myindex  = modeInput.selectedIndex;
  var modefly = modeInput.options[myindex].text.toLowerCase();
  alert(modefly); 
  //Make sure to use valid MIME type according to the selected input
  editor.setOption("mode", modefly);
  CodeMirror.autoLoadMode(editor, modefly);
  //editor.refresh();
}