ngx-hh-md-editor
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.21 • Public • Published

    ngx-markdown-editor

    Angular markdown editor based on ace editor

    peerDependencies Status npm version npm GitHub license

    Usage

    • Add Acemarkedhighlight and font-awesome 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" 
      [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

      {  
        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
        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
      }
    • preRender(Function): For #13, this will not effect ngModel's value, just rendered value

      preRenderFunc(contentstring) {
        return content.replace(/something/g, 'new value'); // must return a string
      }
    • upload(Function): For #24, upload file by yourself

      doUpload(filesArray<File>)Promise<Array<UploadResult>> {
        // do upload file
      }
      interface UploadResult {
        isImg: boolean
        name: string
        url: string
      }
    • required: for form validate

    • maxlength: for form validate

    Install

    npm i ngx-hh-md-editor

    DownloadsWeekly Downloads

    6

    Version

    1.0.21

    License

    Apache License 2.0

    Unpacked Size

    594 kB

    Total Files

    27

    Last publish

    Collaborators

    • huizarmx