1.0.21 • Published 5 years ago
ngx-hh-md-editor v1.0.21
ngx-markdown-editor
Angular markdown editor based on ace editor
Usage
- Add
Ace
、marked
、highlight
andfont-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 iseditor
- 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 effectngModel
's value, just rendered valuepreRenderFunc(content: string) { return content.replace(/something/g, 'new value'); // must return a string }
upload(
Function
): For #24, upload file by yourselfdoUpload(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
1.0.21
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago