Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/chinacarlos/web-markdon-editor

web-markdon-editor
https://github.com/chinacarlos/web-markdon-editor
Last synced: 1 day ago
JSON representation
web-markdon-editor
Host: GitHub
URL: https://github.com/chinacarlos/web-markdon-editor
Owner: ChinaCarlos
License: mit
Created: 2020-05-11T06:54:56.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-12-12T18:09:50.000Z (about 2 years ago)
Last Synced: 2024-08-19T13:48:34.946Z (5 months ago)
Language: Vue
Size: 9.7 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 22
Metadata Files:
- Readme: README-EN.md
- License: LICENSE
Awesome Lists containing this project

README

        # mavonEditor

![npm](https://nodei.co/npm/mavon-editor.png?downloads=true&downloadRank=true&stars=true)

> A markdown editor based on Vue

### [中文说明](./README.md)

## Example Pictures

### PC

![PC](./img/en/en-common.png)

![PC](./img/en/en-image.gif)

> [more images...](./doc/en/images.md)

## Use Setup

### Install mavon-editor

```

$ npm install mavon-editor --save

```

### Use

`index.js`:

```javascript

    // Global Registration

    // import with ES6

    import Vue from 'vue'

    import mavonEditor from 'mavon-editor'

    import 'mavon-editor/dist/css/index.css'

    // use

    Vue.use(mavonEditor)

    new Vue({

        'el': '#main',

        data() {

            return { value: '' }

        }

    })

```

`index.html`

```html

// The same below



    



```

### Use in nuxt.js

> new file: vue-mavon-editor.js

``` javascrpt

import Vue from 'vue';

import mavonEditor from 'mavon-editor';

import 'mavon-editor/dist/css/index.css';

Vue.use(mavonEditor);

```

> nuxt.config.js

``` javascript

  plugins: [

  ...

    { src: '@/plugins/vue-mavon-editor', ssr: false }

  ],

```

> page

```vue

  


    

      

    

  


export default {

  data() {

    return {

      markdownOption: {

        bold: true,

        ... // more params

      },

      handbook: "#### how to use mavonEditor in nuxt.js"

    };

  }

};

.mavonEditor {

  width: 100%;

  height: 100%;

}

```

> [more ways...](./doc/en/use.md)

> [set markdown-it object...](./doc/en/markdown.md)

## API

### props

| name    | type    |  default value | describe  |

| -------- | :---------: | :------------: | ------- |

| value      | String      |               | Initial value |

| language   | String      |      zh-CN         | Language switch,  zh-CN: Simplified Chinese, zh-TW: Traditional Chinese, en: English， fr: French, pt-BR: Brazilian Portuguese, ru: Russian, de: German, ja: Japanese |

| fontSize     | String  |     14px      | font-size of edit area  |

| scrollStyle| Boolean     |   true       | Open the scroll bar style(Temp only support chrome) |

| boxShadow     | Boolean  |     true     | css: box-shadow  of mavonEditor              |

| subfield   | Boolean     |   true        | true: Double columns - Edit preview same screen , Single Columns - otherwise not |

| defaultOpen | String |         | edit: default show edit area , preview: default show preview area  , other = edit |

| placeholder | String |    Begin editing...     |  The default prompt text when the textarea is empty  |

| editable | Boolean     |   true       | Edit switch |

| codeStyle | String |    code-github     | markdown Style: default github, [option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js)  |

| toolbarsFlag | Boolean     |   true       | Show toolbars |

| navigation | Boolean |    false    |  Show navigation  |

| shortCut | Boolean |    true    |  shortcut switch  |

| ishljs       | Boolean |     true     | highlight code switch |

| imageFilter | Function |     null     | Image file filter Function, params is a `File Object`, you should return `Boolean` about the test result |

| imageClick | function |     null     |  Image Click Function |

| tabSize | Number |     null     |  How many spaces equals one tab, default \t |

| xssOptions     | Object  |     null     | xss options: [https://github.com/leizongmin/js-xss](https://github.com/leizongmin/js-xss)                    |

| toolbars   | Object      |   As in the following example  | toolbars |

```javascript

 /*

    The default toolbar properties are all true,

    You can customize the object to cover them.

    eg: {

         bold: true,

         italic: true,

         header: true,

    }

    At this point, the toolbar only displays the three function keys.

 */

toolbars: {

      bold: true,

      italic: true,

      header: true,

      underline: true,

      strikethrough: true,

      mark: true,

      superscript: true,

      subscript: true,

      quote: true,

      ol: true,

      ul: true,

      link: true,

      imagelink: true,

      code: true,

      table: true,

      fullscreen: true,

      readmodel: true,

      htmlcode: true,

      help: true,

      /* 1.3.5 */

      undo: true,

      redo: true,

      trash: true,

      save: true,

      /* 1.4.2 */

      navigation: true,

      /* 2.1.8 */

      alignleft: true,

      aligncenter: true,

      alignright: true,

      /* 2.2.1 */

      subfield: true,

      preview: true

  }

```

### events

| name   | params   | describe|

| -------- | :---------: | ------- |

| change   | String: value , String: reder    |  Edit area change callback event (render: Html source code) |

| save     | String: value , String: reder     |  Ctrl+s and click save button |

| fullScreen | Boolean: status , String: value     |  Fullscreen editing toggle callback event(boolean: Fullscreen status) |

| readModel |  Boolean: status , String: value    |  Reading mode toggle callback event(boolean: Reading mode status) |

| htmlCode | Boolean: status , String: value     |Html code mode toggle callback event(boolean: status) |

| subfieldToggle  |  Boolean: status , String: value     |  Double columns edit mode toggle callback event(boolean: double columns status) |

| previewToggle   | Boolean: status , String: value | Preview & Edit toggle callback event(boolean: preview status)            |

| helpToggle | Boolean: status , String: value   |  Help-me toggle callback event(boolean: help status) |

| navigationToggle | Boolean: status , String: value   |  Navigation mode toggle callback event(boolean: nav status) |

| imgAdd | String: filename, File: imgfile |  Add image file callback event(filename: write in origin md, File: File Object) |

| imgDel | String: filename |  Delete image file callback event(filename: write in origin md) |

#### Hightlight

> If you do not need code highlighting, you need set ishljs to false

Set ishljs = true

```javascript

    // default value is true

    

```

For optimize the size of pack, since **v2.4.2**, the following files will default to using `cdnjs` outside the chain:

 + `highlight.js`

 + `github-markdown-css`

 + `katex`(**v2.4.7**)

The language parsing files and code highlighting in Code Highlighting `highlight.js` will be loaded on demand.

`github-markdown-css` and` katex` will load only when mounted.

**Notice**:

[Option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js) and [Supported language](./src/lib/core/hljs/lang.hljs.js) is export from [highlight.js/9.12.0](https://github.com/isagalaev/highlight.js/tree/master/src)

> [without cdn, Click here to local on-demand loading...](./doc/en/no-cnd.md)

#### Upload images

```javascript

    

exports default {

    methods: {

        // bind @imgAdd event

        $imgAdd(pos, $file){

            // step 1. upload image to server.

           var formdata = new FormData();

           formdata.append('image', $file);

           axios({

               url: 'server url',

               method: 'post',

               data: formdata,

               headers: { 'Content-Type': 'multipart/form-data' },

           }).then((url) => {

               // step 2. replace url ![...](0) -> ![...](url)

               $vm.$img2Url(pos, url);

           })

        }

    }

}

```

> [more info about upload images ...](./doc/en/upload-images.md)

### Note

- **Default size: min-height: 300px , min-width: 300px , Can be covered**

- **z-index: 1500**

- **Just for show html of md: toolbarsFlag: false , subfield: false, defaultOpen: "preview"**

### keyboard shortcuts

| key       | keycode  |       fun          |

| ---------------- | :----------------: | :-----------------------------: |

| F8           | 119 |  toggle navigation  |

| F9           | 120   |  toggle [edit/preview]  |

| F10     | 121   | toggle fullscreen |

| F11      | 122   | toggle readModel |

| F12       | 123   | toggle [double columns / single column] |

| TAB  | 9  | \t |

| CTRL + S    | 17 + 83 | @save |

| CTRL + D    | 17 + 68 | remove selected lines |

| CTRL + Z    | 17 + 90 | prev step |

| CTRL + Y    | 17 + 89 | next step |

| CTRL + BreakSpace    | 17 + 8 | trash |

| CTRL + B       | 17 + 66 | **Bold** |

| CTRL + I | 17 + 73 | *Italic* |

| CTRL + H       | 17 + 72 | # Header |

| CTRL + U    | 17 + 85 | ++Underline++ |

| CTRL + M    | 17 + 77 | ==Mark== |

| CTRL + Q    | 17 + 81 | > Quote |

| CTRL + O    | 17 + 79 | 1. OL |

| CTRL + L    | 17 + 76 | [link]() |

| CTRL + ALT + S    | 17 + 18 + 83 | ^Superscript^ |

| CTRL + ALT + U    | 17 + 18 + 85 | - UL |

| CTRL + ALT + C    | 17 + 18 + 67 | ``` Code |

| CTRL + ALT + L    | 17 + 18 + 76 | ![Image Link]() |

| CTRL + ALT + T    | 17 + 18 + 84 | Table |

| CTRL + SHIFT + S    | 17 + 16 + 83 | ~Subscript~ |

| CTRL + SHIFT + D    | 17 + 16 + 68 | ~~Strikethrough~~ |

| CTRL + SHIFT + C    | 17 + 16 + 67 | align center |

| CTRL + SHIFT + L    | 17 + 16 + 76 | align left |

| CTRL + SHIFT + R    | 17 + 16 + 82 | align right |

| SHIFT + TAB    | 16 + 9 | remove \t |

## Dependencies

- [markdown-it](https://github.com/markdown-it/markdown-it)

- [auto-textarea](https://github.com/hinesboy/auto-textarea)

## Syntax extensions

- [emoji](https://github.com/markdown-it/markdown-it-emoji)

- [subscript](https://github.com/markdown-it/markdown-it-sub)

- [superscript](https://github.com/markdown-it/markdown-it-sup)

- [container](https://github.com/markdown-it/markdown-it-container)

- [definition list](https://github.com/markdown-it/markdown-it-deflist)

- [abbreviation](https://github.com/markdown-it/markdown-it-abbr)

- [footnote](https://github.com/markdown-it/markdown-it-footnote)

- [insert](https://github.com/markdown-it/markdown-it-ins)

- [mark](https://github.com/markdown-it/markdown-it-mark)

- [todo list](https://github.com/revin/markdown-it-task-lists)

- [highlight](https://github.com/isagalaev/highlight.js)

- [katex](https://github.com/Khan/KaTeX)

- [images preview](https://github.com/CHENXCHEN/markdown-it-images-preview)

- [toc](https://github.com/tylerlong/markdown-it-toc)

- 可通过获取[markdown-it](./doc/cn/markdown.md)对象引入[其他语法插件](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)

## Collaborators

- [CHENXCHEN](https://github.com/CHENXCHEN)

## Licence

mavonEditor is open source and released under the MIT Licence.

Copyright (c) 2017 hinesboy