The article uses the Mditor editor

[M] ArkDown + E [ditor] = Mditor Mditor is a simple, easy to integrate, easy to extend, expect comfortable markdown editor, nothing more… Support for the browser: chrome/safari/firefox/ie 9 +

Importing a resource File

  1. Introduction of CDN resources

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mditor.min.css" />
<script src="https://unpkg.com/[email protected]/dist/js/mditor.min.js"></script>
Copy the code

    Using the above method, it is found that there is no obvious effect, possibly the resource resource version is too low. So the following is recommended. You can also push local resources to your own CDN for use.

  2. Importing local Resources

    <link rel="stylesheet" href="mditor/css/mditor.min.css" />
<script src="mditor/js/mditor.min.js"></script>
Copy the code

    Copy https://github.com/Houfeng/mditor/tree/master/packages/embed/dist directory of resources to the local, packaged into mditor directory, again for reference.

Add the textarea element to the control and create an instance of Mditor

class App extends Component {
  render() {
    return (
      <div>
        <textarea id="md_editor"></textarea>
      </div>
    );
  }

  componentDidMount(){
    var ele_textarea = document.getElementById('md_editor'); var mditor = Mditor.fromTextarea(ele_textarea); }}Copy the code

Preview effect:

The toolbar

mditor.on('ready'.function(){
    mditor.toolbar.items.map(item => {
        console.log('key:',item.key, ' name:',item.name)
    })
});
Copy the code

key: shift+alt+b name: bold key: shift+alt+i name: italic key: shift+alt+e name: underline key: shift+alt+d name: strikethrough key: shift+alt+1 name: header key: shift+alt+q name: quote key: shift+alt+c name: code key: shift+alt+o name: list-ol key: shift+alt+u name: list-ul key: shift+alt+l name: link key: shift+alt+t name: table key: shift+alt+h name: line key: shift+alt+p name: image key: shift+alt+/ name: help key: shift+alt+f name: toggleFullScreen key: shift+alt+v name: togglePreview key: shift+alt+s name: toggleSplit

You can add, replace, and delete the listener for the button in the toolbar. For details, refer to the original API

The Markdown content is parsed and displayed

  1. Install using NPM

    npm install mditor --save
Copy the code
      "dependencies": {
    "mditor": "^ 1.3.3." "
  }
Copy the code

  2. Parse the MarkDown content into HTML code for presentation

```
var mditor = require("mditor");
Copy the code

var parser = new mditor.Parser(); var html = parser.parse(“** Hello mditor! * * “); ` ` `