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

ghiscoding/angular-markdown-editor: Angular Markdown Editor. All-in-one Markdown ...

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

开源软件名称(OpenSource Name):

ghiscoding/angular-markdown-editor

开源软件地址(OpenSource Url):

https://github.com/ghiscoding/angular-markdown-editor

开源编程语言(OpenSource Language):

TypeScript 83.1%

开源软件介绍(OpenSource Introduction):

Angular-Markdown-Editor

License: MIT TypeScript npm version NPM downloads

In this package we will use a few libraries and tools to make a more convenient "all in one" WYSIWYG Markdown Editor with preview. All of that with a simple Angular Component. This can be useful for online documentation and many other reasons (docs, blog, ...).

AngularJS (previous version)

If you still have AngularJS project, you can still get the older version 1.1.5 from NPM, however please note that support has stopped and only the new version 2.x will be supported.

Dependencies

Here is the list of dependencies, which are required

  • Bootstrap-Markdown (editor) itself
  • jQuery (required for Bootstrap-Markdown editor)
  • Bootstrap 3.x.
    • If anyone needs Bootstrap 4 support and has time to add the necessary code, PR (Pull Request) are certainly welcome.

Nice to have Dependencies

It's a "nice to have" but not a deep dependencies, which is the ngx-markdown lib. It is used in the demo of this lib, but technically you could plug any other lib you wish for dealing with the markdown preview.

Demo page

Installation

NPM Package

Angular-Markdown-Editor on NPM

Install through NPM or Yarn

npm install angular-markdown-editor

# or with Yarn
yarn add angular-markdown-editor

Modify the angular.json file

You need to add CSS Styles for the Bootstrap, Markdown Editor and Font-Awesome (the latter is optional). Also make sure to include the proper 3rd party javascript libraries in your scripts as shown below.

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap-markdown/js/bootstrap-markdown.js"
],

When using ngx-markdown and/or Prism.js

Prism.js uses separate javascript file for each language, so you'll need to add them yourself. For example, below we are adding the highlight for C#, JavaScript and TypeScript:

"styles": [
    "../node_modules/prismjs/themes/prism.css"
],
"scripts": [
    "../node_modules/prismjs/prism.js",
    "../node_modules/prismjs/components/prism-css.min.js",
    "../node_modules/prismjs/components/prism-javascript.min.js",
    "../node_modules/prismjs/components/prism-typescript.min.js"
],

Import Module

import { AngularMarkdownEditorModule } from 'angular-markdown-editor';

@NgModule({
  declarations: [],
  imports: [AngularMarkdownEditorModule]

  // or pre-define global configuration using the forRoot
  // imports: [AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' })]
});

Input attributes

You can pass the following input attribute:

attribute type required comments
textareaId string yes id of the textarea DOM element used by the lib
rows number no number of rows for the textarea, defaults to 10
options mixed no markdown Editor Options to pass to the element
locale EditorLocale no locale set that has a language and dictionary that can be added as an alternative language. Can be 1 or more dictionaries

Global Options

The library comes with it's own Global Editor Options, these propertoes can be overriden at any by the options attribute. Click to see the Global Options defined.

Event Hooks

You can hook to any of the Bootstrap Markdown Editor Events through 2 ways, just choose the one you prefer:

1. Dispatch of Custom Event

Each of the events are available in the View from a Custom Event as (onX)="doSomething()", for example:

<angular-markdown-editor
  textareaId="editor1" rows="12"
  name="markdownText" [(ngModel)]="markdownText"
  (onFullscreenExit)="hidePreview()">
</angular-markdown-editor>
export class MyComponent {
  hidePreview() { console.log(e.getContent()); }
}

You can also pass the Event returned by the Editor via $event.detail.eventData

<angular-markdown-editor
  textareaId="editor1" rows="12"
  name="markdownText" [(ngModel)]="markdownText"
  (onChange)="onChange($event.detail.eventData)">
</angular-markdown-editor>
export class MyComponent {
  ngOnInit() {
    onChange(e) { console.log(e.getContent()); }
  }
}

2. Editor Option Callbacks

The second way is to use the callback directly when defining the Editor Options.

<angular-markdown-editor
  textareaId="editor1" rows="12"
  name="markdownText" [(ngModel)]="markdownText"
  [options]="editorOptions">
</angular-markdown-editor>
import { EditorOption } from 'angular-markdown-editor';
export class MyComponent {
  ngOnInit() {
    this.editorOptions: EditorOption = {
      iconlibrary: 'fa',
      onChange: (e) => console.log(e.getContent()),
      onFullscreenExit: () => this.hidePreview()
    };
  }
}

List of Event Hooks

  • onPreview
  • onPreviewEnd
  • onSave
  • onBlur
  • onFocus
  • onFullscreen
  • onFullscreenExit
  • onChange
  • onSelect
  • onShow

API - Editor Methods

The editor API is quite dense and I will not list the entire set of methods, but you can see the entire list from the Editor Method Interface. To call any of the Editor Methods, you will have to first get a reference to the Editor's instance which you can get from the onShow callback.

Get the Editor's instance through the onShow, via the Custom Event (from the View) or Editor Option callback (just choose the one you prefer). Below shows how to get it through the latter option.

View
<button (click)="showFullScreen()">Show Full Screen</button>
<angular-markdown-editor
  textareaId="editor1" rows="12"
  name="markdownText" [(ngModel)]="markdownText"
  [options]="editorOptions">
</angular-markdown-editor>
Component
import { EditorInstance, EditorOption } from 'angular-markdown-editor';
export class MyComponent {
  bsEditorInstance: EditorInstance;

  ngOnInit() {
    this.editorOptions = {
      iconlibrary: 'fa',
      onShow: (e) => this.bsEditorInstance = e
    };
  }

  showFullScreen() {
    this.bsEditorInstance.setFullscreen(true);
  }
}

Preview Button (need a Parser)

For the "Preview" button to work, you will need to provide a parser to the Editor Options. This lib has no deep dependencies to any Markdown Parser (you could use marked.js or any other parser). But assuming we are using ngx-markdown, we can add the parser this way:

Component
import { MarkdownService } from 'ngx-markdown';

export class TestComponent implements OnInit {
  constructor(private markdownService: MarkdownService) {}

  ngOnInit() {
    this.editorOptions = {
      parser: (val) => this.markdownService.compile(val.trim())
    };
  }
}

Security - Dealing with Cross Site Scripting (XSS)

If you want to use this package for any type of users, you should consider sanatizing your data for Cross Site Scripting (XSS) attack. A good package to use for sanitizing is DOMPurify and you should sanitize your data when calling the parser as shown below. Also if you have any Markdown Preview, remember to sanitize them as well probably via the form input or control.

this.editorOptions = {  
  parser: (val: string) => {
    const sanitizedText = DOMPurify.sanitize(val.trim());
    this.markdownService.compile(sanitizedText);
  }
};

Additional Editor Buttons

I really thought that some buttons were missing to go a great job (Strikethrough & Table). So I added them directly in the Global Options. If you want to add your own, then just look at how it was done in the Global Options and read the section additionalButtons of Bootstrap Markdown website.

Adding Locale

You can add a locale to the editor but passing a locale object (and bind it in the View) which contain a language and the dictionary of words used by the editor. The entire list of words can be seen in the example below. So for example, if we want to add French locale, we will do the following (you can see demo code):

View
<button (click)="showFullScreen()">Show Full Screen</button>
<angular-markdown-editor
  textareaId="editor1" rows="12"
  name="markdownText" [(ngModel)]="markdownText"
  [locale]="locale"
  [options]="editorOptions">
</angular-markdown-editor>
Component
import { EditorInstance, EditorLocale, EditorOption } from 'angular-markdown-editor';
export class MyComponent {
  locale: EditorLocale = {
    language: 'fr',
    dictionary: {
      'Bold': 'Gras',
      'Italic': 'Italique',
      'Heading': 'Titre',
      'URL/Link': 'Insérer un lien HTTP',
      'Image': 'Insérer une image',
      'List': 'Liste à puces',
      'Ordered List': 'Liste ordonnée',
      'Unordered List': 'Liste non-ordonnée',
      'Code': 'Code',
      'Quote': 'Citation',
      'Preview': 'Prévisualiser',
      'Strikethrough': 'Caractères barrés',
      'Table': 'Table',
      'strong text': 'texte important',
      'emphasized text': 'texte souligné',
      'heading text': 'texte d\'entête',
      'enter link description here': 'entrez la description du lien ici',
      'Insert Hyperlink': 'Insérez le lien hypertexte',
      'enter image description here': 'entrez la description de l\'image ici',
      'Insert Image Hyperlink': 'Insérez le lien hypertexte de l\'image',
      'enter image title here': 'entrez le titre de l\'image ici',
      'list text here': 'texte à puce ici'
    }
  };

  // if you want to pass multiple locales, just pass it as an array
  /*
  locale: EditorLocale[] = [
    { language: 'fr', dictionary: { 'Bold': 'Gras', ...
    { language: 'en', dictionary: { 'Bold': 'Bold', ...
  ];
  */

  ngOnInit() {
    this.editorOptions = {
      language: 'fr', // also set the language option to French
      onShow: (e) => this.bsEditorInstance = e
    };
  }
}

Note I could not find a way to change the language dynamically, so it seems that we would have to destroy the component and re-create it for switching the language/locale.

License

MIT License

Use it, like it?

You like and use this great library Angular-Markdown-Editor? You can always upvote and/or contribute :)

Like my work?

If you like my work, you can also support me with caffeine


鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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