ngx-markdown-editor

Angular markdown editor based on ace editor

FOR TO SUPPORT TELEGRAM FLAVOURS

GitHub issues

Usage

Installation

Tips: This is a new way to add dependencies since 2.1.0, and the old way is work fine too.

Install dependencies from npm repository:

npm i brace bootstrap font-awesome

Install ngx-markdown-editor from npm repository:

npm i ngx-markdown-editor

Add the styles and scripts in angular.json:

{
  ...
  "architect": {
    "build": {
      "options": {
        ...
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.min.css",
          "node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css"
        ],
        "scripts": [
          "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
          "node_modules/ngx-markdown-editor/assets/marked.min.js"
        ]
        ...
      }
    }
  }
  ...    
}

Import brace in polyfills.ts

import 'brace';
import 'brace/mode/markdown';

Sample

import { LMarkdownEditorModule } from 'ngx-markdown-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LMarkdownEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<md-editor name="Content" 
  [upload]="doUpload" 
  [preRender]="preRenderFunc" 
  [(ngModel)]="content" 
  [height]="'200px'" 
  [mode]="mode" 
  [options]="options" 
  required 
  maxlength="500">
</md-editor>

Options

ngModel: markdown original content
height: editor height
hideToolbar: hide toolbar, default is false
mode: editor | preview, default is editor

options: other settings for editor

{  
  showPreviewPanel?: boolean    // Show preview panel, Default is true
  showBorder?: boolean          // Show editor component's border. Default is true
  hideIcons?: Array<string>     // ['Bold', 'Italic', 'Heading', 'Refrence', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen']. Default is empty
  usingFontAwesome5?: boolean   // Using font awesome with version 5, Default is false
  scrollPastEnd?: number        // The option for ace editor. Default is 0
  enablePreviewContentClick?: boolean  // Allow user fire the click event on the preview panel, like href etc. Default is false
  resizable?: boolean           // Allow resize the editor
  markedjsOpt?: MarkedjsOption  // The markedjs option, see https://marked.js.org/#/USING_ADVANCED.md#options
  customRender?: {              // Custom markedjs render
    image?: Function     // Image Render
    table?: Function     // Table Render
    code?: Function      // Code Render
    listitem?: Function  // Listitem Render
  }
}

preRender(Function): For #13, this will not effect ngModel's value, just rendered value

preRenderFunc(content: string) {
  return content.replace(/something/g, 'new value'); // must return a string
}

upload(Function): For #24, upload file by yourself

constructor() {
  this.doUpload = this.doUpload.bind(this);  // This is very important.
}

doUpload(files: Array<File>): Promise<Array<UploadResult>> {
  // do upload file by yourself
  return Pormise.resolve([{ name: 'xxx', url: 'xxx.png', isImg: true }]);
}

interface UploadResult {
  isImg: boolean
  name: string
  url: string
}

required: for form validate
maxlength: for form validate

2.4.0

Support custom render image/table/code/listitem

2.3.0

Support ng add

2.1.3

Fix #44

2.1.2

Add showPreviewPanel Option. (Default: true)
Fix #43

2.1.1

Add usingFontAwesome5 Option. (Default: false)
Fix #42

2.1.0

Support markedjs 0.7.0
Change the dependency import method. From link、script to npm

2.0.0

Support Angular8

1.2.0

Fix #27, Support resizeable for component

1.1.11

Fix #25, Support config markedjs

1.1.10

Fix #24

1.1.9

Fix scrollPastEnd option's bug
Add enablePreviewContentClick option to enable preview panel content's click #22

1.1.8

Support for ace editor scrollPastEnd option

1.1.7

Fix #14

1.1.6

Support preRender feature

1.1.5

Support markdown syntax highlighting

1.1.4

Fix Issue #10

1.1.3

Merge #9

1.1.2

Support task list

Package detail

ngx-markdown-editor-telegram

readme