At present, Markdown is everywhere in the world of programmers. For example, CSDN, Jianshu, GitCha, GitHub, Nuggets Community, etc. all support Markdown documents. In addition, many official technical documents are written in Markdown in recent years. Using Markdown can not only write blogs and technical documents very conveniently, but also directly export the corresponding website content and printable documents. In addition, the grammar of Markdown is very simple, and there is almost no cost for programmers, and once you Once you master it, you can use Markdown to write technical blogs anywhere and on any platform.
Today I will talk to you about an open source and free browser-side Markdown editor - Vditor, which is very easy to use. It not only supports desktop software, but also can be embedded into your system as a front-end Markdown editor. Now I will take you to understand Check out this awesome open source editor!
1. Introduction to the editor
Vditor is a browser-side Markdown editor that supports WYSIWYG, instant rendering (similar to Typora) and split-screen preview mode. It is implemented in TypeScript and supports native JavaScript, Vue, React and Angular. Desktop version available. Support Windows, Linux, MacOS, browser extensions, Android, and IOS versions.
Official website: https://b3log.org/vditor/
GitHub：https://github.com/Vanessa219/vditor
Desktop version download: https://b3log.org/siyuan/download.html
2. Features
● Support three editing modes: what you see is what you get (wysiwyg), instant rendering (ir), split-screen preview (sv)
● Supports outlines, mathematical formulas, brain maps, charts, flowcharts, Gantt charts, timing diagrams, staves, multimedia, audio reading, title anchors, code highlighting and copying, graphviz, and PlantUML rendering
● Built-in security filtering, export, image lazy loading, task list, multi-platform preview, multi-theme switching, copy to WeChat official account/Zhihu function
● Implement CommonMark and GFM specifications, can format Markdown and view syntax trees, and support 10+ configurations
● The toolbar contains 36+ operations. In addition to supporting extensions, you can also customize the shortcut keys, prompts, prompt positions, icons, click events, class names, and sub-toolbars in each item
● Auto-completion extensions such as emoticons/at/topics
● You can use drag and drop, clipboard to paste and upload, display real-time upload progress, and support CORS cross-domain upload
● Save content in real time to prevent accidental loss
● Recording support, users can directly publish voice
● The pasted HTML will be automatically converted to Markdown. If the paste contains external link pictures, it can be uploaded to the server through the designated interface
● Support main window size drag and drop, character counting
● Multi-theme support, built-in three sets of black, white and green themes
● Multi-language support, built-in Chinese, English, Korean localization
● Support mainstream browsers and be friendly to mobile terminals
3. Editor mode initialization setting
2.1 What you see is what you get
The instant income mode is more friendly to users who are not familiar with Markdown, and it can be used seamlessly if they are familiar with Markdown.
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 所见即所得（WYSIWYG）\n所见即所得模式对不熟悉 Markdown 的用户较为友好，熟悉 Markdown 的话也可以无缝使用。 ",
"mode": "wysiwyg"
})
2.2 Instant rendering mode
It should not be unfamiliar to users who are familiar with Typora. In theory, this is the most elegant way to edit Markdown.
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 即时渲染（IR）\n即时渲染模式对熟悉 Typora 的用户应该不会感到陌生，理论上这是最优雅的 Markdown 编辑方式。",
"mode": "ir"
})
2.3 Split screen preview (SV)
There is currently no specific usage scenario for this mode.
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 分屏预览（SV）\n传统的分屏预览模式适合大屏下的 Markdown 编辑。",
"mode": "sv",
"preview": {
"mode": "editor"
}
})
2.4 Split screen preview mode
Split-screen preview (SV)\nThe traditional split-screen preview mode is suitable for editing Markdown on a large screen
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 分屏预览（SV）\n传统的分屏预览模式适合大屏下的 Markdown 编辑。",
"mode": "sv",
"preview": {
"mode": "both"
}
})
4. Case code
Directly use the most original html to provide a complete sample code, which can be run directly.
<html>
<head>
<title>vditor编辑器</title>
<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>
</head>
<body>
<input type="button" onclick="getContent()" value="确定" />
<div id="content">
</div>
<script>
var vditor = null;
window.onload = function() {
vditor = new Vditor(document.getElementById('content'), {
cache: {
enable: false
},
"mode": "sv",
"preview": {
"mode": "both"
}
});
}
// 测试数据填充
function getContent() {
vditor.setValue("## 测试 \n ### 二级标题 ");
}
</script>
</body>
</html>
running result
