Integrating CodeMirror with Angular2 (typescript)

Question

I'm currently working on adding a CodeMirror editor to a project, an Angular2 project more precisely. But Im' having trouble doing it. The instantiation of my editor doesn't seem to work correctly. My code is the following:

editor.component.ts

import {Component} from 'angular2/core'
import {BrowserDomAdapter} from 'angular2/platform/browser'

declare var CodeMirror: any;

@Component({
    selector: 'editor',
    templateUrl: './meang2app/partials/editor.html'
})

export class Editor{
    dom: BrowserDomAdapter;
    editor: any;
    constructor(){
        this.dom = new BrowserDomAdapter();
        this.editor = new CodeMirror.fromTextArea(this.dom.query("textarea"), {lineNumbers: true, mode: {name: "javascript", globalVars: true}});
    }
}

editor.html

<textarea id="code" name="code">
    <!-- Where a CodeMirror instance should be rendered -->
</textarea>

In my index.html file, I do something like this:

<html>
<head>

    <title>Angular 2</title>

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="codemirror/lib/codemirror.js"></script>
    <script src="codemirror/addon/hint/show-hint.js"></script>
    <script src="codemirror/addon/hint/javascript-hint.js"></script>
    <script src="codemirror/mode/javascript/javascript.js"></script>

    <script>
        System.config({
            packages: {        
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/dist/boot')
            .then(null, console.error.bind(console));
    </script>

</head>

<body>
        <app>Loading</app>
</body>

</html>

I'm bootstrapping my app this way, but I don't think that's where the issue comes from.

boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

When I try and run the app, firefox tells me that 'EXCEPTION: Error during instantiation of Editor!.', and that 'ORIGINAL EXCEPTION: TypeError: textarea is null' as well. Any idea about what's going on, and how to fix this?

With all my gratitude

Youri · Accepted Answer · 2016-05-08 12:36:41Z

Thank you so much for your help, I followed some of the tips given in your link and made it by using a directive. I went through some issues after that too, but no big deal: I just didn't know loading a link tag via a component wasn't possible. If you're reading this and encountered with a similar problem, here was my solution:

editor.component.ts

import {Component, ElementRef} from 'angular2/core'
import {EditorDirective} from './editor.directive'

@Component({
    selector: 'editor',
    template: `
    <textarea editor id="code" name="code">
        // Some content
    </textarea>
`,
    directives: [EditorDirective]
})


export class EditorComponent{
    constructor(){}
}

editor.directive.ts

import {Directive, ElementRef, Renderer} from 'angular2/core'

declare var CodeMirror: any;

@Directive({
    selector: '[editor]'
})

export class EditorDirective {
    editor: any;
    constructor(public element: ElementRef, public renderer: Renderer){
        this.editor = new CodeMirror.fromTextArea(element.nativeElement, {lineNumbers: true, mode: {name: "javascript", globalVars: true}});
    }
}

And to finish with, index.html:

<html>
    <head>

    <title>Angular 2 and CodeMirror</title>

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="codemirror-5.14.2/lib/codemirror.js"></script>
    <script src="codemirror-5.14.2/addon/hint/show-hint.js"></script>
    <script src="codemirror-5.14.2/addon/hint/javascript-hint.js"></script>
    <script src="codemirror-5.14.2/mode/javascript/javascript.js"></script>
    <script src="codemirror-5.14.2/mode/markdown/markdown.js"></script>

    <link rel=stylesheet href="codemirror-5.14.2/doc/docs.css">
    <link rel="stylesheet" href="codemirror-5.14.2/lib/codemirror.css">
    <link rel="stylesheet" href="codemirror-5.14.2/addon/hint/show-hint.css">

    <script>
        System.config({
            packages: {        
                meang2app: {
                format: 'register',
                defaultExtension: 'js'
                }
            }
        });
      System.import('meang2app/dist/editor.component')
          .then(null, console.error.bind(console));
    </script>

    </head>

  <body>
      <app>Loading</app>
  </body>

</html>

that was very helpful thank you so much! , for future viewers,directives was removed from component. See the following: stackoverflow.com/a/39410642/5487673

Sibiraj · Accepted Answer · 2018-01-17 08:20:25Z

3

You should refrain from using ElementRef as per angular 2 documentation. Particularly, you should avoid:

tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker.

Use Renderer2 instead:

editor.directive.ts

@Directive({
  selector: '[editor]'
})
export default class EditorDirective {
  editor: any;

  constructor(private _renderer: Renderer) {}

  ngAfterViewInit() {
    this.editor = CodeMirror.fromTextArea(
      this._renderer.selectRootElement('[editor]'),
      {
        lineNumbers: true, 
        mode: {name: "javascript", globalVars: true}
      }
    );
  }
}

edited Jan 17, 2018 at 8:20

Sibiraj

4,7868 gold badges37 silver badges59 bronze badges

answered May 24, 2016 at 17:20

Sunil Sandhu

3854 silver badges13 bronze badges

Comments

michal.jakubeczy · Accepted Answer · 2021-03-03 14:12:00Z

1

There is an Angular wrapper over codemirror - ngx-codemirror - https://github.com/scttcper/ngx-codemirror.

answered Mar 3, 2021 at 14:12

michal.jakubeczy

9,7771 gold badge71 silver badges84 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:02:22Z

0

The problem might be that you don't fetch the correct DOM element through the BrowserDomAdapter (I guess it will look up the textarea from the html root and not from the current component context, which isn't known to it) and thereby the textbox gets null.

Here are some ways that describe how you can get a reference to an element inside the template and use that inside your component code (e.g. in order to instantiate codemirror): Angular2: What is the best way to get a reference of a template element

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 7, 2016 at 23:54

Matthias247

10.5k1 gold badge26 silver badges31 bronze badges

Collectives™ on Stack Overflow

Integrating CodeMirror with Angular2 (typescript)

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related