Languages

CodeMirror - how to dynamically switch modes?

8 points
Asked by:
Peter-Mortensen
408

Hi there!

Is it possible to switch mode on exising CodeMirror editor?

I whould like to switch between JavaScript and HTML.

2 answers
10 points
Answered by:
Peter-Mortensen
408

Yes, It is.

editor.setOption('mode', 'text/javascript');
editor.setOption('mode', 'text/html');

 

Practical example:

var element = document.getElementById('editor')

var editor = CodeMirror.fromTextArea(element , {
    theme: 'eclipse',
    mode: 'text/javascript',
    value: 'console.log(123)',
    lineNumbers: true
});

editor.setOption('mode', 'text/html');
editor.setValue('<html>...</html>');

/*
editor.setOption('mode', 'text/javascript');
editor.setValue('console.log(123)');
*/

 

Example modes (check all modes here):

plain/text                        // text
text/x-sh  or  application/x-sh   // bash
text/coffeescript                 // coffeescript
text/x-c++src                     // cpp
text/x-csharp                     // csharp
text/x-java                       // java
text/x-objectivec                 // objectivec
text/css                          // css
text/x-scss                       // scss
text/x-diff                       // diff
application/xml                   // xml
text/html                         // html
message/http                      // http
text/x-ini                        // ini
application/json                  // json
text/javascript                   // javascript
text/typescript                   // typescript
text/jsx                          // jsx
text/typescript-jsx               // tsx
text/x-cmake                      // makefile
text/x-markdown                   // markdown
text/x-nginx-conf                 // nginx
text/x-perl                       // perl
application/x-httpd-php           // php
text/x-python                     // python
text/x-ruby                       // ruby
text/x-sql                        // sql
text/vbscript                     // vbscript

 

0 comments Add comment
7 points
Answered by:
Peter-Mortensen
408

Example solution:

CodeMirror mode dynamic changing on existing editor.
CodeMirror mode dynamic changing on existing editor.

Runnable example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/eclipse.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <!-- JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>
    <!-- HTML -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/xml/xml.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/htmlmixed/htmlmixed.min.js"></script>
  </head>
<body>
  <button onclick="useJavaScript()">Use JavaScript</button>
  <button onclick="useHtml()">Use HTML</button>
  <div id="placeholder"></div>
  <script>

    var placeholder = document.getElementById('placeholder');

    var editor = CodeMirror(placeholder, {
      	theme: 'eclipse',
        mode: 'text/javascript',
    	value: 'console.log(true ? "True" : "False")',
        readOnly: false,
        lineNumbers: true,
        lineWrapping: false
    });
    
    function useJavaScript() {
      	editor.setOption('mode', 'text/javascript');
    	editor.setValue('console.log(true ? "True" : "False")');
    }
    
    function useHtml() {
      	editor.setOption('mode', 'text/html');
    	editor.setValue('<html>\n<body>\n  Body here ...\n</body>\n</html>');
    }

  </script>
</body>
</html>

Resources

Other modes -> CDN with CodeMirror scripts.

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join