How to Change language CM6 Mode in Code?

v6
1

This is my second attempt at getting some help on this question for some reason the first went unanswered. I’m presenting it again because presumably I didn’t put the question in the correct way. Here is my first attempt.

It boils down to the need to change the Mode setting in CM6 having once set it in options.
This is an Angular 19 app. The example code, which is working fine except it sets the mode during initialisation and I need to be able to subsequently change the mode to a different type.

The CM is initialised with these parameter options like this:

codeMirrorOptions: any = {
	theme: 'dracula', // Changed the theme to 'dracula'
	mode: 'application/json', // Set cm language mode
	lineNumbers: true,
	lineWrapping: true,
	foldGutter: true,
	gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
	autoCloseBrackets: true,
	matchBrackets: true,
	lint: true,
	inputStyle: 'contenteditable',
	spellcheck: true
};

The app needs to load the editor with various code content (eg. text, html, js, c++, etc).
My question is simple: how can the Mode be changed AFTER it was set in the initial codeMirrorOptions?

I am not experienced with CodeMirror at all, so any response would be useful if only to point to the relevant documentation.

2

If this is version 5.x, which the shape of that options object suggests, you can call setOption to change any option, including "mode".

3

Ah thank you Marijn, the setOptions is what I was looking for. I’m using ngx-codemirror which I wrongly assumed would be using CM6, it’s actually 5.65.19. Please comment if I should be using a different approach.

My last hurdle is getting an instance handle on CM5 in order to call setOptions(‘mode’, ‘xxx’).
Various attempts using ViewChild have been unsuccessful. Also tried using the editorInitialized event but that is not firing:
Template:

<ngx-codemirror #cm5 [options]="codeMirrorOptions" [(ngModel)]="rtf.fileData"
  (ngModelChange)="setEditorContent($event)" (editorInitialized)="onInitialized($event)">
</ngx-codemirror>

TypeScript:

onInitialized(editor: any) {
	alert('onInitialized called'); // <-- NEVER FIRES
	this.cm = editor as CodeMirror.EditorFromTextArea; // get cm instance
        console.log('CodeMirror editor initialized:', editor);
}

It would be useful to see a full example, including getting the instance handle using CM5 with Angular.

Thank you again, I’m nearly there with this but any further help would be most welcome!

4

I have never used ngx-codemirror, and I won’t be able to help you with that part.