The mditor is updated!

Time:2020-4-3

Only ask for perfection

[ M ] arkdown + E [ ditor ] = Mditor

Mditor is a simple, easy to integrate, easy to expand, and comfortable editor for writing markdown, and that’s all

Browser support: Chrome / Safari / Firefox / IE9+

Git Reop: https://github.com/Houfeng/md…

Online experience

Online demo

The mditor is updated!

Integrate mditor in browser

Step one:

Import mditor style file

<link rel="stylesheet" href="your-path/dist/css/mditor.min.css" />

Referencing the mditor script file

<script></script>

Of course, CDN resources can also be used

...
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mditor.min.css" />
...
<script></script>
...
The second step:

Add textarea element

<textarea name="editor" id="editor"></textarea>

Create mditor instance

var mditor =  Mditor.fromTextarea(document.getElementById('editor'));

//Gets or sets the value of the editor
mditor.on('ready',function(){
  console.log(mditor.value);
  mditor.value = '** hello **';    
});

All APIs should be called in the ready event

Mode control API:
//Open split screen or not            
Mditor. Split = true; // open
Mditor.split = false; // close

//Open preview or not            
Mditor. Preview = true; // open
Mditor. Preview = false; // close

//Full screen or not            
Mditor.fullscreen = true; // open    
Mditor.fullscreen = false; // close
Toolbar configuration API
//Mditor.toolbar.items is an array that contains information about all buttons
//Items can be manipulated directly to control the toolbar

//Keep only the first button
mditor.toolbar.items = mditor.toolbar.items.slice(0,1);
//Add a button
mditor.toolbar.addItem({...});
//Remove a button
mditor.toolbar.removeItem(name);
//Replace a button
mditor.toolbar.replaceItem(name, {...});
//Get a button
mditor.toolbar.getItem(name);

//Change button behavior
//For example, change the "picture" button configuration. Other buttons are the same way
let btn = mditor.toolbar.getItem('image');
//Replace button action
btn.handler = function(){
  //Custom processing logic
  //This points to the current mditor instance
}; 

//Other information can be replaced
BTN. Icon = '...'; // set button icon
BTN. Title = '...'; // post button title
BTN. Control = true; // displayed on the right as a control button
BTN. Key ='ctrl + D '; // set the shortcut button to create
Text editing API
//Editor related AIP is on the mditor.editor object

//Insert text before cursor
Mditor. Editor. Insertbeforetext ('text ');
//Insert text after cursor
Mditor. Editor. Insertaftertext ('text ');
//Others, description to be added
...

Render markdown on the server

Installation through NPM

npm install mditor -save

Parsing on the server

var mditor = require("mditor");
var parser = new mditor.Parser();
var html = parser.parse("** Hello mditor! **");

Display the parsed content in the page

...
<! -- reference style -- >
<link rel="stylesheet" href="your-path/dist/css/mditor.min.css" />
...
<div class="markdown-body">
<! -- here is the parsed content -- >
</div>

-end-

Recommended Today

An article gives you endless IP agents

This article contains the python external library required by the code: requests BeautifulSoup4 This article is especially suitable for people who have a certain understanding of Python crawlers, but if you are Xiaobai, you can also get some knowledge of the Internet from this article < font color = blue size = 6 > Background: […]