# ngx-hh-md-editor

> Fork of Angular markdown editor based on ace editor

Latest version **1.0.21** (published 2019-05-23) · Apache License 2.0 license · 0 weekly downloads

## Install

```sh
npm install ngx-hh-md-editor
pnpm add ngx-hh-md-editor
yarn add ngx-hh-md-editor
bun add ngx-hh-md-editor
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.21 |
| Published | 2019-05-23 |
| First published | 2019-05-10 |
| Weekly downloads | 0 |
| License | Apache License 2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 580.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lon.L.Yang |
| Maintainers | huizarmx |
| Keywords | markdown, markdown editor, md editor, ace, angular, angular x |

## Links

- npm: https://www.npmjs.com/package/ngx-hh-md-editor
- Repository: https://github.com/huizarmx/ngx-hh-md-editor
- Homepage: https://github.com/huizarmx/ngx-hh-md-editor#readme
- Issues: https://github.com/huizarmx/ngx-hh-md-editor/issues
- npm.io page: https://npm.io/package/ngx-hh-md-editor

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.0.21 (latest) — 2019-05-23
- 1.0.20 — 2019-05-23
- 1.0.19 — 2019-05-23
- 1.0.18 — 2019-05-18
- 1.0.17 — 2019-05-15
- 1.0.16 — 2019-05-15
- 1.0.15 — 2019-05-13
- 1.0.13 — 2019-05-13
- 1.0.12 — 2019-05-13
- 1.0.10 — 2019-05-11
- 1.0.9 — 2019-05-11
- 1.0.8 — 2019-05-11
- 1.0.7 — 2019-05-11
- 1.0.6 — 2019-05-11
- 1.0.5 — 2019-05-10
- … 5 more at https://npm.io/package/ngx-hh-md-editor/versions

## README

# ngx-markdown-editor
Angular markdown editor based on ace editor

[![peerDependencies Status](https://david-dm.org/lon-yang/ngx-markdown-editor/peer-status.svg)](https://david-dm.org/lon-yang/ngx-markdown-editor?type=peer)
[![npm version](https://badge.fury.io/js/ngx-markdown-editor.svg)](https://badge.fury.io/js/ngx-markdown-editor)
[![npm](https://img.shields.io/npm/dt/ngx-markdown-editor.svg)](https://www.npmjs.com/package/ngx-markdown-editor)
[![GitHub license](https://img.shields.io/github/license/lon-yang/ngx-markdown-editor.svg)](https://github.com/lon-yang/ngx-markdown-editor/blob/master/LICENSE)

# Usage

- Add `Ace`、`marked`、`highlight` and `font-awesome` lib

```html
<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`

```bash
npm i ngx-markdown-editor
```

- Use markdown-editor component

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LMarkdownEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
```html
<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
  ```ts
  {  
    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](https://github.com/lon-yang/ngx-markdown-editor/issues/13), this will not effect `ngModel`'s value, just rendered value
  ```ts
  preRenderFunc(content: string) {
    return content.replace(/something/g, 'new value'); // must return a string
  }
  ```
- upload(`Function`): For [#24](https://github.com/lon-yang/ngx-markdown-editor/issues/24), upload file by yourself
  ```ts
  doUpload(files: Array<File>): Promise<Array<UploadResult>> {
    // do upload file
  }
  interface UploadResult {
    isImg: boolean
    name: string
    url: string
  }
  ```

- required: for form validate
- maxlength: for form validate

---
_Source: https://npm.io/package/ngx-hh-md-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._