### Install ngx-markdown-editor Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Install the ngx-markdown-editor package from npm. ```bash npm i ngx-markdown-editor ``` -------------------------------- ### Install Ace Editor, Bootstrap, and Font Awesome Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Install the necessary dependencies for the markdown editor. These include ace-builds, bootstrap, and font-awesome. ```bash npm i ace-builds bootstrap font-awesome ``` -------------------------------- ### Install Dependencies for Versions <= 2.5.0 Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md For versions of ngx-markdown-editor less than or equal to 2.5.0, install the 'brace' package instead of 'ace-builds'. ```bash npm i brace bootstrap font-awesome ``` -------------------------------- ### Configure Angular Assets, Styles, and Scripts for <= 2.5.0 Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Configure angular.json for older versions, noting the absence of asset configuration for ace-builds. ```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" ] "...": "..." } } } "..." } ``` -------------------------------- ### Configure Angular Assets, Styles, and Scripts Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Configure your angular.json file to include the necessary assets, styles, and scripts for the editor. This ensures that Ace Editor, Bootstrap, Font Awesome, and other required files are correctly loaded. ```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 to index.html Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Include the ace.js script in your index.html file to load the Ace Editor library. ```html ``` -------------------------------- ### Import Brace in polyfills.ts for <= 2.5.0 Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Import 'brace' and its markdown mode in your polyfills.ts file for versions of ngx-markdown-editor less than or equal to 2.5.0. ```typescript import 'brace'; import 'brace/mode/markdown'; ``` -------------------------------- ### Editor Options Interface Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Defines the available settings for customizing the markdown editor's behavior and appearance. Includes options for preview panel, borders, hidden icons, font awesome versions, scrolling, click events, resizability, marked.js integration, custom rendering, custom icons, and placeholders. ```typescript { 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?: { image?: Function table?: Function code?: Function listitem?: Function }, customIcons?: { 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 } ``` -------------------------------- ### Custom File Upload Function Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Implement a custom file upload mechanism. Ensure the `doUpload` method is bound in the constructor to maintain the correct `this` context. The function should return a promise resolving to an array of upload results. ```typescript 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 } ``` -------------------------------- ### Custom Post-Render Function Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Define a function to alter the HTML output generated by the markdown parser before it's applied to the DOM. This function receives the HTML string and must return a modified HTML string. ```typescript postRenderFunc(content: string) { return content.replace(/something/g, 'new value'); // must return a string } ``` -------------------------------- ### Basic md-editor Component Usage Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Use the md-editor component in your HTML template, binding to properties like 'upload', 'preRender', 'postRender', 'ngModel', 'height', 'mode', and 'options'. Event handlers for 'onEditorLoaded' and 'onPreviewDomChanged' can also be attached. ```html ``` -------------------------------- ### Import LMarkdownEditorModule in AppModule Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Import the LMarkdownEditorModule into your AppModule to use the markdown editor component. Ensure FormsModule is also imported for ngModel to work. ```typescript 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 { } ``` -------------------------------- ### Custom Pre-Render Function Source: https://github.com/instance-oom/ngx-markdown-editor/blob/master/README.md Define a function to modify the markdown content before it is rendered. This function receives the raw markdown string and should return a modified string. It does not affect the `ngModel` value. ```typescript preRenderFunc(content: string) { return content.replace(/something/g, 'new value'); // must return a string } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.