@lmikoto/vditor v1.4.0

💡 Introduction

Vditor is a browser-side Markdown editor, implemented using TypeScript. Support native JavaScript, Vue, React and Angular.

Welcome to Vditor Official Discussion Area to learn more.

📽️ Background

In the initial stage of developing Sym, we directly used WYSIWYG rich text editor. At that time, HTML-based editors were very popular, and it was very convenient to quote them in the project, which also conformed to the usage habits of users at that time.

Later, the rise of Markdown gradually changed everyone's typography. In addition, several of our other projects are for programmer users, so it is also a general trend to migrate to md. We chose CodeMirror, which is an excellent editor, it provides a rich programming interface for developers, and is also compatible with various browsers. it is good.

Later, as the business needs of our projects have precipitated, using CodeMirror sometimes feels more "cumbersome." For example, to implement @automatically complete the user name list, insert Emoji, upload files, etc., it requires more in-depth secondary development, and these business requirements are precisely common and necessary in many project scenarios.

Finally, we decided to start implementing the editor ourselves in Sym. With the iterations of several versions, Sym's editor has matured. In the community HacPai that we operate, people have asked us if we can separate the editor for everyone to use. At the same time, our front-end main programmer V also felt a little bit overwhelmed with maintaining the editors scattered in various projects, plus a good impression of TypeScript, so I decided Use ts to implement a new browser-side md editor.

So, Vditor was born.

✨ Features

• Support three editing modes: WYSIWYG, Instant Rendering and Split View
• Support task list, at, chart, flow chart, Gantt chart, sequence chart, stave, multimedia, voice reading, title anchor rendering
• Support Shortcut Key operation
• Support Markdown Formatting, Markdown Syntax Tree Real-time Rendering
• Emoji Automatically complete, set common emoticons, support emoticon customization
• Customize Toolbar button, prompt, insert character, shortcut key, support toolbar to add button
• Can use drag and drop, clipboard to paste upload, display real-time upload progress, support CORS cross-domain upload
• Save content in real time to prevent accidental loss
• Recording support, users can directly publish voice
• Paste HTML Automatic conversion to Markdown, if the paste contains images of external links, it can be uploaded to the server through the specified interface
• Provide real-time preview, scroll synchronization positioning
• Support main window size drag and drop, character counting
• Multi-theme support, built-in black and white themes
• Multi-language support, built-in Chinese, English, Korean text localization
• Support mainstream browsers and mobile-end

🔮 Editing Modes

WYSIWYG

WYSIWYG mode is more friendly to users who are not familiar with Markdown, and you can use it seamlessly if you are familiar with Markdown.

Instant Rendering

Instant Rendering mode should not be unfamiliar to users who are familiar with Typora. In theory, this is the most elegant Markdown editing method.

Split View

The traditional Split View mode is suitable for Markdown editing on a large screen.

🗃 Showcases

• 🎶 Sym A modern community (forum/BBS/SNS/blog) platform implemented in Java
• 🎸 Solo & 🎷 Pipe B3log distributed community blog end node, welcome to join the next generation community network
• 📕 LianDi Note A desktop note application that supports Windows, Mac and Linux
• 🌟 Starfire A distributed content-sharing and discussion community, the spark can catch fire
• 📝 Arya Based on Vue, Vditor, built online Markdown editor

🛠️ User Guide

CommonJS

• Install dependencies

npm install vditor --save

• Introduce and initialize objects in the code, you can refer to index.js

import Vditor from 'vditor'
import "~vditor/src/assets/scss/index" // Or use dark

const vditor = new Vditor(id, {options...})

HTML script

• Insert CSS and js in HTML, you can refer to static.html

<!-- ⚠️Please specify the version number in the production environment, such as https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js" defer></script>

Demo code

• CommonJS
• HTML script
• Preview
• Vue

Themes

• Support two sets of black and white themes: classic/dark
• Use the scss/css developed by yourself to fully customize the style after referring to the existing style
• Theme colors can be customized by modifying variables in index.scss
• Adding class="vditor-reset" (classic theme) or class="vditor-reset vditor-reset--dark" (black theme) attribute on the content display element can display the content more friendly

API

id

Can be filled with element id or element itselfHTMLElement

⚠️: When filling in the element's HTMLElement, you need to set options.cache.id or set options.cache.enable to false

options

options.toolbar

• Toolbar, you can use name for shorthand: toolbar: ['emoji', 'br', 'bold', '|', 'line']. See default src/ts/util/Options.ts
• name can be enumerated as: emoji , headings , bold , italic , strike , | , line , quote , list , ordered-list , check ,outdent ,indent , code , inline-code , undo , redo , upload , link , table , record , edit-mode , both , preview , format , fullscreen , devtools , info , help , br
• When name is not in the enumeration, you can add a custom button in the following format:

{  
 hotkey: '⌘-⇧-f',  
 name: 'format',  
 tipPosition: 'ne',  
 tip: 'format',  
 className: '',
 icon: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768"><path d="M342 426v-84h426v84h-426zM342 256v-86h426v86h-426zM0 0h768v86h-768v-86zM342 598v-86h426v86h-426zM0 214l170 170-170 170v-340zM0 768v-86h768v86h-768z"></path></svg>',  
 click: () => {  
   alert('custom toolbar')  
 },  
}

options.toolbarConfig

options.counter

options.cache

options.preview

options.preview.hljs

options.preview.markdown

options.preview.math

options.hint

options.upload

• The data structure of the file upload is as follows. When the data structure returned by the backend is inconsistent, you can use format for conversion.

// POST data  
xhr.send(formData);  // formData = FormData.append("file[]", File)  
// return data  
{  
 "msg": "",  
 "code": 0,  
 "data": {  
 "errFiles": ['filename', 'filename2'],  
 "succMap": {  
   "filename3": "filepath3",  
   "filename3": "filepath3"  
   }  
 }  
}

• In order to prevent the off-site pictures from being invalid, linkToImgUrl can transfer the off-site picture addresses in the clipboard to the server for saving and processing. The data structure is as follows:

// POST data  
xhr.send(JSON.stringify({url: src})); // src is the address of the image outside the station
// return data  
{  
 msg: '',  
 code: 0,  
 data : {  
   originalURL: '',  
   url: ''  
 }  
}

options.resize

options.classes

options.keymap

methods

static methods

• When no editing operation is required, just introduce method.min.js and directly call

Vditor.mermaidRender(document)

import VditorPreview from 'vditor/dist/method.min'  
VditorPreview.mermaidRender(document)

• When you need to render Markdown on the page, you can directly call the preview method with the following parameters:

previewElement: HTMLDivElement,   // Use this element for rendering
markdown: string,  // The original markdown to be rendered
options?: IPreviewOptions {  
 anchor?: boolean;  // Add an anchor to the title
 theme?: string;  // Theme: 'classic' | 'dark', default is 'classic'
 customEmoji?: { [key: string]: string };    // Custom emoji, default is {}
 lang?: (keyof II18nLang);    // Language, default is 'zh_CN'  
 emojiPath?: string;    // Emoji picture path 
 hljs?: IHljs // Refer to options.preview.hljs 
 speech?: {  // Read the selected content
  enable?: boolean
 }
 math?: IMath // Math formula rendering configuration
 transform?(html: string): string // Callback method before rendering
 cdn?: string // Self-built CDN address
}

• ⚠️method.min.js andindex.min.js cannot be introduced at the same time

🏗 Developer Guide

Principle related

• Discussion on WYSIWYG Markdown Editor
• Vditor implements Markdown WYSIWYG
• Lute is a Markdown engine optimized for Chinese context, supports Go and JavaScript

Environment

1. Install node LTS version
2. Download latest code and unzip
3. Run npm install in the root directory
4. npm run start Start the local server, open http: // localhost: 9000
5. Modify the code
6. npm run build package code to dist directory

CDN switch

Due to the on-demand loading mechanism, the default CDN is https://cdn.jsdelivr.net/npm/vditor@version number

If the code is modified or you need to use a self-built CDN, you can follow the steps below:

• The initial options andIPreviewOptions need to add cdn configuration
• highlightRender,mathRender, abcRender,chartRender, mermaidRender methods need to add cdn parameter
• Copy the dist directory in the successful build or jsDelivr to the correct location

Upgrade

Please read CHANGELOG carefully when upgrading the version.

Ⓜ️ Markdown User Guide

• Basic syntax
• Extended syntax
• Quick Reference Manual

🏘️ Community

• Forum
• Issues

📄 License

Vditor uses the MIT open source license.

🙏 Acknowledgement

• Lute: A structured Markdown engine that supports Go and JavaScript
• highlight.js: JavaScript syntax highlighter
• mermaid: Generation of diagram and flowchart from text in a similar manner as Markdown
• incubator-echarts: A powerful, interactive charting and visualization library for browser
• abcjs: JavaScript library for rendering standard music notation in a browser