Network Processor Module

ngx-markdown-editor

1.1.7 • Public • Published

ngx-markdown-editor

Angular markdown editor based on ace editor

peerDependencies Status npm version licence

Usage

  • Add Acemarkedhighlight and fortawesome lib
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/agate.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ace/1.2.8/ace.js"></script>
<script src="https://cdn.bootcss.com/marked/0.3.6/marked.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  • Install ngx-markdown-editor
npm i ngx-markdown-editor
  • Use markdown-editor component
import { LMarkdownEditorModule } from 'ngx-markdown-editor';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LMarkdownEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
<md-editor name="Content" [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
    {
      "hideIcons": ['Bold', 'Italic', 'Heading', 'Refrence', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen']  // default is empty, the value is case-sensitive
    }
  • 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
    }
  • required: for form validate
  • maxlength: for form validate

install

npm i ngx-markdown-editor

Downloadsweekly downloads

543

version

1.1.7

license

Apache License 2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability