Cherry Markdown Editor is a Javascript Markdown editor. It has the advantages such as out-of-the-box, lightweight and easy to extend. It can run in browser or server(with NodeJs).
Out-of-the-box
Developer can call and instantiate Cherry Markdown Editor in a very simple way. The instantiated Cherry Markdown Editor supports most commonly used markdown syntax (such as title, TOC, flowchart, formula, etc.) by default.
Easy to extend
When the syntax that Cherry Markdown editor support can not meet your needs, secondary development or function extention can be carried out quickly. At the same time, Cherry Markdown editor should be implemented by pure JavaScript, and should not rely on framework technology such as angular, vue and react. Framework only provide a container environment.
Feature
Syntax Feature
Image zoom, alignment and reference
Generate a chart based on the content of the table
Adjust font color and size
Font background color, superscript and subscript
Insert checklist
Insert audio or video
Multiple modes
Live preview with Scroll Sync
Preview-only mode
No toolbar mode (minimalist editing mode)
Mobile preview mode
Functional Feature
Copy from rich text and paste as markdown text
Classic line feed & regular line feed
Multi-cursor editing
Image size editing
Export as image or pdf
Float toolbar: appears at the beginning of a new line
Bubble toolbar: appears when text is selected
Performance Feature
partial rendering
partial update
Security
Cherry Markdown has a built-in security Hook, by filtering the whitelist and DomPurify to do scan filter.
Style theme
Cherry Markdown has a variety of style themes to choose from.
# Install mermaid, enable mermaid and drawing function
yarn add [email protected]# Install echarts, turn on the table-to-chart function
yarn add [email protected]
Quick start
Browser
UMD
<linkhref="cherry-editor.min.css" />
<divid="markdown-container"></div><scriptsrc="cherry-editor.min.js"></script><script>newCherry({id: 'markdown-container',value: '# welcome to cherry editor!',});</script>
ESM
importCherryfrom'cherry-markdown';constcherryInstance=newCherry({id: 'markdown-container',value: '# welcome to cherry editor!',});
Node
const{default: CherryEngine}=require('cherry-markdown/dist/cherry-markdown.engine.core.common');constcherryEngineInstance=newCherryEngine();consthtmlContent=cherryEngineInstance.makeHtml('# welcome to cherry editor!');
Lite Version
Because the size of the mermaid library is very large, the cherry build product contains a core build package without built-in Mermaid. The core build can be imported in the following ways.
Full mode (With UI Interface)
importCherryfrom'cherry-markdown/dist/cherry-markdown.core';constcherryInstance=newCherry({id: 'markdown-container',value: '# welcome to cherry editor!',});
Engine Mode (Just Syntax Compile)
// Import Cherry engine core construction// Engine configuration items are the same as Cherry configuration items, the following document content only introduces the Cherry core packageimportCherryEnginefrom'cherry-markdown/dist/cherry-markdown.engine.core';constcherryEngineInstance=newCherryEngine();consthtmlContent=cherryEngineInstance.makeHtml('# welcome to cherry editor!')// --> <h1>welcome to cherry editor!</h1>
⚠️ About mermaid
The core build package does not contain mermaid dependency, should import related plug-ins manually.
importCherryfrom'cherry-markdown/dist/cherry-markdown.core';importCherryMermaidPluginfrom'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';importmermaidfrom'mermaid';// Plug-in registration must be done before Cherry is instantiatedCherry.usePlugin(CherryMermaidPlugin,{
mermaid,// pass in mermaid object// mermaidAPI: mermaid.mermaidAPI, // Can also be passed in mermaid API// At the same time, you can configure mermaid's behavior here, please refer to the official mermaid document// theme: 'neutral',// sequence: { useMaxWidth: false, showSequenceNumbers: true }});constcherryInstance=newCherry({id: 'markdown-container',value: '# welcome to cherry editor!',});
Dynamic import
recommend Using Dynamic import, the following is an example of webpack Dynamic import.
importCherryfrom'cherry-markdown/dist/cherry-markdown.core';constregisterPlugin=async()=>{const[{default: CherryMermaidPlugin},mermaid]=awaitPromise.all([import('cherry-markdown/src/addons/cherry-code-block-mermaid-plugin'),import('mermaid'),]);Cherry.usePlugin(CherryMermaidPlugin,{
mermaid,// pass in mermaid object});};registerPlugin().then(()=>{// Plug-in registration must be done before Cherry is instantiatedconstcherryInstance=newCherry({id: 'markdown-container',value: '# welcome to cherry editor!',});});
Configuration
Default configuration
{// Third party packageexternals: {// externals},// engine configurationengine: {// Global configurationglobal: {// Enable classic new line logic// true：One line break is ignored and more than two consecutive lines break into paragraphs// false： One line break will turn into < br >, two consecutive line breaks will be divided into paragraphs, and more than three consecutive line breaks will turn into < br > and divide into paragraphsclassicBr: false,/** * global URL processor * @param {string} url 来源url * @param {'image'|'audio'|'video'|'autolink'|'link'} srcType 来源类型 * @returns */urlProcessor: callbacks.urlProcessor,/** * Additional HTML tags that allow rendering * Labels are separated by vertical lines in English，such as htmlWhiteList: 'iframe|script|style' * It is empty by default. See Src / utils / sanitize.html for the HTML allowed to be rendered by default JS whitelist property * attention： * - After enabling iframe, script and other tags, XSS injection will be generated. Please judge whether it needs to be enabled according to the actual scene * - Generally, scenes with controllable editing permissions (such as API document system) can allow iframe, script and other tags */htmlWhiteList: '',},// Built in syntax configurationsyntax: {// Syntax switch// 'hookName': false,// Syntax configuration// 'hookName': {//// }list: {listNested: false,// The sibling list type becomes a child after conversionindentSpace: 2,// Default 2 space indents},table: {enableChart: false,// chartRenderEngine: EChartsTableEngine,// externals: ['echarts'],},inlineCode: {theme: 'red',},codeBlock: {theme: 'dark',// Default to dark themewrap: true,// If it exceeds the length, whether to wrap the line. If false, the scroll bar will be displayedlineNumber: true,// Default display line numbercustomRenderer: {// Custom syntax renderer},/** * indentedCodeBlock Is the switch whether indent code block is enabled * * this syntax is not supported by default in versions before 6.X. * Because cherry's development team thinks the syntax is too ugly (easy to touch by mistake) * The development team hopes to completely replace this syntax with ` ` code block syntax * However, in the subsequent communication, the development team found that the syntax had better display effect in some scenarios * Therefore, the development team in 6 This syntax was introduced in version X * if you want to upgrade the following versions of services without users' awareness, you can remove this syntax: * indentedCodeBlock：false */indentedCodeBlock: true,},emoji: {useUnicode: true,// Whether to render using Unicode},fontEmphasis: {allowWhitespace: false,// Allow leading and trailing spaces},strikethrough: {needWhitespace: false,// Must there be a first space},mathBlock: {engine: 'MathJax',// katex or MathJaxsrc: '',plugins: true,// Default load plug-in},inlineMath: {engine: 'MathJax',// katex or MathJaxsrc: '',},toc: {/** By default, only one directory is rendered */allowMultiToc: false,},header: {/** * Style of title： * - default Default style with anchor in front of title * - autonumber There is a self incrementing sequence number anchor in front of the title * - none Title has no anchor */anchorStyle: 'default',},},},editor: {codemirror: {// depend on codemirror theme name: https://codemirror.net/demo/theme.html// manual import theme: `import 'codemirror/theme/<theme-name>.css';`theme: 'default',},// The height of the editor is 100% by default. If the height of the mount point has an inline setting, the inline style will prevailheight: '100%',// defaultModel The default mode of the editor after initialization. There are three modes: 1. Double column edit preview mode; 2. Pure editing mode; 3. Preview mode// edit&preview: Double column edit preview mode// editOnly: Pure editing mode (without preview, you can switch to double column or preview mode through toolbar)// previewOnly: Preview mode (there is no edit box, the toolbar only displays the "return to edit" button, which can be switched to edit mode through the toolbar)defaultModel: 'edit&preview',// Whether to automatically convert HTML to markdown when pastingconvertWhenPaste: true,},// toolbar configurationtoolbars: {theme: 'dark',// light or darkshowToolbar: true,// False: the top toolbar is not displayed; True: display toolbar; toolbars. Showtoolbar = false and toolbars Toolbar = false equivalenttoolbar: ['bold','italic','strikethrough','|','color','header','|','list',{insert: ['image','audio','video','link','hr','br','code','formula','toc','table','line-table','bar-table','pdf','word',],},'graph','settings',],sidebar: [],bubble: ['bold','italic','underline','strikethrough','sub','sup','quote','|','size','color'],// array or falsefloat: ['h1','h2','h3','|','checklist','quote','quickTable','code'],// array or false},fileUpload: callbacks.fileUpload,callback: {afterChange: callbacks.afterChange,afterInit: callbacks.afterInit,beforeImageMounted: callbacks.beforeImageMounted,},previewer: {dom: false,className: 'cherry-markdown',// Whether to enable the editing ability of preview area (currently supports editing picture size and table content)enablePreviewerBubble: true,},// The preview page does not need to bind eventsisPreviewOnly: false,// The preview area automatically scrolls with the editor cursorautoScrollByCursor: true,// Whether to force output to the body when the outer container does not existforceAppend: true,}
Close float menu or bubble menu
toolbars: {
... // other config bubble: false,// array or falsefloat: false,// array or false},
More Information
Click here for the full documentation of Cherry configuration.
客服电话
APP下载
官方微信
