ngx-markdown-editor

Ensure ace.js is available globally by adding it to the <head> of your index.html file, pointing to the assets path configured in angular.json.

<html
  >
  <head>
    <script src="/assets/ace-builds/ace.js"></script>
  </head>
  <body></body>
</html

To use ngx-markdown-editor in your Angular project, follow these installation steps:

1. Install dependencies:

   npm i ace-builds bootstrap font-awesome
   npm i ngx-markdown-editor

2. Configure angular.json: Add the Ace builds assets, required styles, and scripts to your build options.

3. Add Ace to index.html: Include the ace.js script in your <head> tag.

Note: If you are using version <= 2.5.0, you must install brace instead of ace-builds and import brace and its markdown mode in polyfills.ts.

You must update your angular.json to include the necessary assets, styles, and scripts for the editor and its dependencies (Ace, Bootstrap, Font-Awesome, and Marked/Highlight.js).

{
  "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"
        ]
      }
    }
  }
}

The [options] input accepts an object to customize the editor's behavior and appearance.

Key options include:

• showPreviewPanel: (boolean) Show/hide preview panel. Default: true.
• showBorder: (boolean) Show editor component's border. Default: true.
• hideIcons: (Array<string>) List of icon names to hide (e.g., 'Bold', 'Italic', 'TogglePreview').
• fontAwesomeVersion: '4' | '5' | '6'. Default: '4'.
• resizable: (boolean) Allow user to resize the editor.
• placeholder: (string) Placeholder text.
• customRender: Object containing functions for image, table, code, or listitem to customize how marked.js renders specific elements.
• customIcons: Object to override default FontAwesome icons.

To use the editor, import LMarkdownEditorModule and FormsModule in your Angular module. You can then use the <md-editor> component in your templates.

Important: When passing functions to inputs like [upload], [preRender], or [postRender], you must bind them in your component's constructor to ensure the correct this context.

import { LMarkdownEditorModule } from 'ngx-markdown-editor';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    LMarkdownEditorModule
  ],
  // ...
})
export class AppModule { }

<md-editor 
  name="Content" 
  [(ngModel)]="content" 
  [height]="'200px'" 
  [mode]="mode" 
  [options]="options"
  (onEditorLoaded)="onEditorLoaded($event)">
</md-editor>

You can intercept the markdown content during the rendering lifecycle:

• [preRender]: A function that modifies the raw markdown content before it is processed by the parser. This does not affect the ngModel value. It must return a string.
• [postRender]: A function that modifies the HTML source code generated by marked before it is updated in the DOM. It must return a string.

// preRender: modifies raw markdown
preRenderFunc(content: string) {
  return content.replace(/something/g, 'new value');
}

// postRender: modifies generated HTML
postRenderFunc(content: string) {
  return content.replace(/<p>something<\/p>/g, '<b>something</b>');
}

The <md-editor> component emits the following events:

• (onEditorLoaded): Emits an AceEditor instance when the Ace editor is fully loaded.
• (onPreviewDomChanged): Emits an HTMLElement whenever the preview DOM is updated.

The [upload] input allows you to handle file uploads (e.g., images) manually. You must provide a function that returns a Promise<Array<UploadResult>>.

Note: You must bind the upload function in your constructor.

interface UploadResult {
  isImg: boolean
  name: string
  url: string
}

// In your component
constructor() {
  this.doUpload = this.doUpload.bind(this);
}

doUpload(files: Array<File>): Promise<Array<UploadResult>> {
  // Implement your upload logic here
  return Promise.resolve([{ name: 'xxx', url: 'xxx.png', isImg: true }]);
}

To support multiple languages, provide a locales object. This object maps language codes (e.g., 'en', 'fr') to MdEditorLocale configurations.

Each locale can define:

• Buttons: Translations for toolbar buttons. Some buttons (like Bold or CodeBlock) use MdButtonInserterLocale which includes an optional initText field (the text inserted when the button is clicked).
• Upload: Translations for the drag-and-drop upload interface (Drag and Uploading keys).

const options: MdEditorOption = {
  locales: {
    es: {
      Buttons: {
        Bold: { title: 'Negrita', initText: 'Texto en negrita' },
        Link: { title: 'Enlace' }
      },
      Upload: {
        Drag: 'Arrastra aquí',
        Uploading: 'Subiendo...'
      }
    }
  }
};