• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

lon-yang/ngx-markdown-editor: Angular markdown editor based on ace editor

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

lon-yang/ngx-markdown-editor

开源软件地址(OpenSource Url):

https://github.com/lon-yang/ngx-markdown-editor

开源编程语言(OpenSource Language):

TypeScript 75.1%

开源软件介绍(OpenSource Introduction):

ngx-markdown-editor

Angular markdown editor based on ace editor

npm version peerDependencies Status npm GitHub license GitHub stars GitHub issues StackBlitz

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



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap