EN
CodeMirror - how to dynamically switch modes?
2
answers
8
points
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
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
Example solution:
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