Skip to content

Instantly share code, notes, and snippets.

@DerekTBrown
Created July 27, 2016 22:50
Show Gist options
  • Save DerekTBrown/706dae91176cba97e6ef5b1cbda0e5b5 to your computer and use it in GitHub Desktop.
Save DerekTBrown/706dae91176cba97e6ef5b1cbda0e5b5 to your computer and use it in GitHub Desktop.
Simple Markdown Editor with Angular2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<textarea #simplemde></textarea>
// Angular Imports
import { Component, ElementRef, ViewChild } from '@angular/core';
// Declare Global Variable
var SimpleMDE : any = require('simplemde');
// Define Editor Component
@Component({
selector: 'mdeditor',
templateUrl: '/client/imports/ui/components/mdeditor/mdeditor.html',
})
// Export Editor Class
export class MDEditor {
@ViewChild('simplemde') textarea : ElementRef;
constructor(private elementRef:ElementRef) {
super();
}
ngAfterViewInit(){
var mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });
}
}
@dae721
Copy link

dae721 commented Aug 3, 2016

Thanks for posting. One correction: I think this line

var mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });

should use this.textarea.nativeElement. In my test app, elementRef was referring to the mdeditor directive, and SimpleMDE is expecting the textarea element within it. It does work as is because elementRef.nativeElement.value is undefined so it defaults to using the first textarea it finds. But if you try to put 2 editors on the same page, it runs into problems.

@anandchakru
Copy link

with the latest version (1.0.0.rc4)
var SimpleMDE : any = require('simplemde');

is causing

ERROR in .../..SomeComponent.ts (13,17): Cannot find name 'require'.) webpack: Failed to compile.

@anandchakru
Copy link

anandchakru commented Mar 25, 2017

changed
var SimpleMDE : any = require('simplemde');
to

declare let require: any;
var SimpleMDE = require('simplemde/dist/simplemde.min.js');

But I still feel this is just a hack'y solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment