Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/instance-oom/ngx-markdown-editor
Angular markdown editor based on ace editor
https://github.com/instance-oom/ngx-markdown-editor
ace-editor angular-x markdown-editor
Last synced: 1 day ago
JSON representation
Angular markdown editor based on ace editor
- Host: GitHub
- URL: https://github.com/instance-oom/ngx-markdown-editor
- Owner: instance-oom
- License: apache-2.0
- Created: 2017-07-05T10:42:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-21T17:12:35.000Z (21 days ago)
- Last Synced: 2024-11-22T07:03:33.983Z (20 days ago)
- Topics: ace-editor, angular-x, markdown-editor
- Language: TypeScript
- Homepage: http://lon-yang.github.io/markdown-editor/
- Size: 2.31 MB
- Stars: 174
- Watchers: 4
- Forks: 48
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-markdown-editor - Angular markdown editor based on ace editor. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-markdown-editor - Angular markdown editor based on ace editor. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-markdown-editor - Angular markdown editor based on ace editor. (Table of contents / Third Party Components)
README
# ngx-markdown-editor
Angular markdown editor based on ace editor
[](https://badge.fury.io/js/ngx-markdown-editor)
[](https://www.npmjs.com/package/ngx-markdown-editor)
[](https://github.com/lon-yang/ngx-markdown-editor/blob/master/LICENSE)
[](https://github.com/lon-yang/ngx-markdown-editor/stargazers)
[](https://codesandbox.io/s/ngx-markdown-editor-zewm1u)
[Online Demo](https://zewm1u.csb.app/)
# Usage
### Installation
Install dependencies from npm repository:
```bash
npm i ace-builds bootstrap font-awesome
```
Install `ngx-markdown-editor` from npm repository:
```bash
npm i ngx-markdown-editor
```
Add the assets、styles and scripts in `angular.json`:
```json
{
...
"architect": {
"build": {
"options": {
...
"assets": [
{
"glob": "**/*",
"input": "node_modules/ace-builds/src-min",
"output": "./assets/ace-builds/"
}
],
"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"
]
...
}
}
}
...
}
```
Add `ace.js` in `index.html`
```html
```
<=2.5.0
Install dependencies from npm repository:
```bash
npm i brace bootstrap font-awesome
```
Install `ngx-markdown-editor` from npm repository:
```bash
npm i ngx-markdown-editor
```
Add the styles and scripts in `angular.json`:
```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`
```ts
import 'brace';
import 'brace/mode/markdown';
```
### Sample
```ts
import { LMarkdownEditorModule } from 'ngx-markdown-editor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule, // make sure FormsModule is imported to make ngModel work
LMarkdownEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
```html
```
# 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
{
showPreviewPanel?: boolean // Show preview panel, Default is true
showBorder?: boolean // Show editor component's border. Default is true
hideIcons?: Array // ['Bold', 'Italic', 'Heading', 'Reference', 'Link', 'Image', 'Ul', 'Ol', 'Code', 'TogglePreview', 'FullScreen']. Default is empty
usingFontAwesome5?: boolean // Using font awesome with version 5, Default is false
fontAwesomeVersion?: '4' | '5' | '6' // FontAwesome Version, 4/5/6, default is 4
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
},
customIcons?: { // Custom icons in toolbar, default using font-awesome 4.x
Bold?: CustomIcon;
Italic?: CustomIcon;
Heading?: CustomIcon;
Reference?: CustomIcon;
Link?: CustomIcon;
Image?: CustomIcon;
UnorderedList?: CustomIcon;
OrderedList?: CustomIcon;
CodeBlock?: CustomIcon;
ShowPreview?: CustomIcon;
HidePreview?: CustomIcon;
FullScreen?: CustomIcon;
CheckBox_UnChecked?: CustomIcon;
CheckBox_Checked?: CustomIcon;
};
placeholder?: string
}
```
- upload(`Function`): For [#24](https://github.com/lon-yang/ngx-markdown-editor/issues/24), upload file by yourself
```ts
constructor() {
this.doUpload = this.doUpload.bind(this); // This is very important.
}
doUpload(files: Array): Promise> {
// do upload file by yourself
return Promise.resolve([{ name: 'xxx', url: 'xxx.png', isImg: true }]);
}
interface UploadResult {
isImg: boolean
name: string
url: string
}
```
- 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
}
```
- postRender(`Function`): Change the html souce code generated by `marked` before update the dom
```ts
postRenderFunc(content: string) {
return content.replace(/something/g, 'new value'); // must return a string
}
```
- required: for form validate
- maxlength: for form validate
> Tips: For `Function` input, please call bind at `constructor` to assign correct `this` pointer
# Event
- `onEditorLoaded: EventEmitter` Fires when the ace editor loaded.
- `onPreviewDomChanged: EventEmitter` Fires when the preview dom updated