Using Pell as a Markdown WYSIWYG editor.

readme.md

Markdown editor using pell and turndown

This code reacts to user input. OnChange gets fired and the HTML generated by Pell is converted into Markdown using Turndown.

Installation

npm i --save pell;
npm i --save turndown;

Usage

  <pell-input (onChangeInput)="onChangeInput($event)"></pell-input>

  onChangeInput(event) {
    this.markdown = event;
  }

(using pell v1.0.4 and turndown v5.0.1)

pell-input.component.html

<div id="pell-editor" class="pell"></div>

pell-input.component.ts

import { Component, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs';
import pell from 'pell'
import TurndownService from 'turndown'

const turndownService  = new TurndownService({ headingStyle: 'atx' })

@Component({
  selector: 'pell-input',
  templateUrl: './pell-input.component.html',
  styles: []
})
export class PellInputComponent implements OnInit {

 @Output() onChangeInput: Subject<string> = new Subject<string>();

  constructor() {}

  ngOnInit() {
    pell.init({
      element: document.getElementById('pell-editor'),
      actions: ['bold', 'italic', 'heading1', 'heading2', 'code', 'ulist'],
      onChange: html => {
        var markdown = turndownService.turndown(html);     
        this.onChangeInput.next(markdown);
      }
    })
  }
}