Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details

All Projects → lon-yang → Ngx Markdown Editor

lon-yang / Ngx Markdown Editor

Licence: apache-2.0

Angular markdown editor based on ace editor

Programming Languages

typescript

32286 projects

Labels

markdown-editor

Projects that are alternatives of or similar to Ngx Markdown Editor

Nice Mail

💌 Nice Mail 是一款以 Markdown 为基础的邮件编辑器。

Stars: ✭ 69 (-43.9%)

Mutual labels: markdown-editor

Bookeditor

Stars: ✭ 86 (-30.08%)

Mutual labels: markdown-editor

✍ 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 所有基础语法、色盘取色、一键复制并粘贴到公众号后台、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性

Stars: ✭ 2,242 (+1722.76%)

Mutual labels: markdown-editor

Macdown

Open source Markdown editor for macOS.

Stars: ✭ 8,855 (+7099.19%)

Mutual labels: markdown-editor

Cutemarked

Qt Markdown Editor

Stars: ✭ 1,210 (+883.74%)

Mutual labels: markdown-editor

Markdown Electron

⚛️Electron version of Markdown app

Stars: ✭ 99 (-19.51%)

Mutual labels: markdown-editor

Hexoeditor

this markdown Editor for hexo blog

Stars: ✭ 1,141 (+827.64%)

Mutual labels: markdown-editor

Mook

Markdown editor based on Electron and React

Stars: ✭ 117 (-4.88%)

Mutual labels: markdown-editor

Hypermd

A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

Stars: ✭ 1,258 (+922.76%)

Mutual labels: markdown-editor

Retext

ReText: Simple but powerful editor for Markdown and reStructuredText

Stars: ✭ 1,500 (+1119.51%)

Mutual labels: markdown-editor

React Mde

📝 React Markdown Editor

Stars: ✭ 1,196 (+872.36%)

Mutual labels: markdown-editor

Markdownmonster

An extensible Markdown Editor, Viewer and Weblog Publisher for Windows

Stars: ✭ 1,203 (+878.05%)

Mutual labels: markdown-editor

Foam

A personal knowledge management and sharing system for VSCode

Stars: ✭ 10,993 (+8837.4%)

Mutual labels: markdown-editor

Oh My Macdown

MacDown's editor themes, preview themes, etc.

Stars: ✭ 70 (-43.09%)

Mutual labels: markdown-editor

Dendron

The personal knowledge management (PKM) tool that grows as you do!

Stars: ✭ 2,538 (+1963.41%)

Mutual labels: markdown-editor

Lepton

💻 Democratizing Snippet Management (macOS/Win/Linux)

Stars: ✭ 9,067 (+7271.54%)

Mutual labels: markdown-editor

Susnote

Susnote is a notebook which support markdown, UML and Chart.

Stars: ✭ 97 (-21.14%)

Mutual labels: markdown-editor

Mindforger

Thinking notebook and Markdown editor.

Stars: ✭ 1,695 (+1278.05%)

Mutual labels: markdown-editor

Markvis

make visualization in markdown. 📊📈

Stars: ✭ 1,509 (+1126.83%)

Mutual labels: markdown-editor

Markor

Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, ..

Stars: ✭ 1,394 (+1033.33%)

Mutual labels: markdown-editor

View All Similar Projects ➔

ngx-markdown-editor

Angular markdown editor based on ace editor

Usage

Installation

>=3.0.0

Install dependencies from npm repository:

npm i ace-builds bootstrap font-awesome

Install ngx-markdown-editor from npm repository:

npm i ngx-markdown-editor

Add the assets、styles and scripts in angular.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>
  <head>
    <script src="/assets/ace-builds/ace.js"></script>
  </head>
  <body></body>
</html>

<=2.5.0

Install dependencies from npm repository:

npm i brace bootstrap font-awesome

Install ngx-markdown-editor from npm repository:

npm i ngx-markdown-editor

Add the styles and scripts in angular.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

import 'brace';
import 'brace/mode/markdown';

Sample

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

<md-editor name="Content" 
  [upload]="doUpload" 
  [preRender]="preRenderFunc" 
  [postRender]="postRenderFunc"
  [(ngModel)]="content" 
  [height]="'200px'" 
  [mode]="mode" 
  [options]="options" 
  (onEditorLoaded)="onEditorLoaded($event)"
  (onPreviewDomChanged)="onPreviewDomChanged($event)"
  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

{  
  showPreviewPanel?: boolean    // Show preview panel, Default is true
  showBorder?: boolean          // Show editor component's border. Default is true
  hideIcons?: Array<string>     // ['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
  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
  }
}

upload(Function): For #24, upload file by yourself

constructor() {
  this.doUpload = this.doUpload.bind(this);  // This is very important.
}

doUpload(files: Array<File>): Promise<Array<UploadResult>> {
  // 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, this will not effect ngModel's value, just rendered value

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

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<AceEditor> Fires when the ace editor loaded.
onPreviewDomChanged: EventEmitter<HTMLElement> Fires when the preview dom updated

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 123

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (1) 🔗