- full model
- basic
- mobile
- multiple instances
- editor without toolbar
- pure preview
- XSS(Not allowed by default)
- img wysiwyg
- table wysiwyg
- headers with auto num
- 流式输入模式(AI chart场景)
- VIM 编辑模式
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).
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.
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.
- 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
- Live preview with Scroll Sync
- Preview-only mode
- No toolbar mode (minimalist editing mode)
- Mobile preview mode
- 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
- partial rendering
- partial update
Cherry Markdown has a built-in security Hook, by filtering the whitelist and DomPurify to do scan filter.
Cherry Markdown has a variety of style themes to choose from.
click here for more details
Via yarn
yarn add cherry-markdown
Via npm
npm install cherry-markdown --save
If you need to enable the functions of mermaid
drawing and table-to-chart, you need to add mermaid
and echarts
packages at the same time.
Currently, the plug-in version Cherry recommend is [email protected]
[email protected]
.
# Install mermaid, enable mermaid and drawing function
yarn add [email protected]
# Install echarts, turn on the table-to-chart function
yarn add [email protected]
<link href="cherry-editor.min.css" />
<div id="markdown-container"></div>
<script src="cherry-editor.min.js"></script>
<script>
new Cherry({
id: 'markdown-container',
value: '# welcome to cherry editor!',
});
</script>
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';
const cherryInstance = new Cherry({
id: 'markdown-container',
value: '# welcome to cherry editor!',
});
const { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');
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.
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
const cherryInstance = new Cherry({
id: 'markdown-container',
value: '# welcome to cherry editor!',
});
// Import Cherry engine core construction
// Engine configuration items are the same as Cherry configuration items, the following document content only introduces the Cherry core package
import CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core';
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');
// --> <h1>welcome to cherry editor!</h1>
The core build package does not contain mermaid dependency, should import related plug-ins manually.
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';
// Plug-in registration must be done before Cherry is instantiated
Cherry.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 }
});
const cherryInstance = new Cherry({
id: 'markdown-container',
value: '# welcome to cherry editor!',
});
recommend Using Dynamic import, the following is an example of webpack Dynamic import.
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
const registerPlugin = async () => {
const [{ default: CherryMermaidPlugin }, mermaid] = await Promise.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 instantiated
const cherryInstance = new Cherry({
id: 'markdown-container',
value: '# welcome to cherry editor!',
});
});
see /src/Cherry.config.js
or click here
Click here for more examples.
Under development, please stay tuned or see /client/
click here
click here
Jest is selected as a unit testing tool for its assertion, asynchronous support and snapshot. Unit test includes CommonMark test and snapshot test.
Call yarn run test:commonmark
to test the official CommonMark suites. This command runs fast.
Suites are located in test/suites/commonmark.spec.json
, for example:
{
"markdown": " \tfoo\tbaz\t\tbim\n",
"html": "<pre><code>foo\tbaz\t\tbim\n</code></pre>\n",
"example": 2,
"start_line": 363,
"end_line": 368,
"section": "Tabs"
},
In this case, Jest will compare the html generated by Cherry.makeHtml(" \tfoo\tbaz\t\tbim\n")
with the expected result "<pre><code>foo\tbaz\t \tbim\n</code></pre>\n"
. Cherry Markdown's matcher has ignored private attributes like data-line
.
CommonMark specifications and suites are from: https://spec.commonmark.org/ .
Call yarn run test:snapshot
to run snapshot test. You can write snapshot suite like test/core/hooks/List.spec.ts
. At the first time, a snapshot will be automatically generated. After that, Jest can compare the snapshot with the generated HTML. If you need to regenerate a snapshot, delete the old snapshot under test/core/hooks/__snapshots__
and run this command again.
Snapshot test runs slower. It should only be used to test Hooks that are error-prone and contain Cherry Markdown special syntax.
Welcome to join us to build a more powerful Markdown editor. Of course you can submit feature request to us. Please read me before you working on it.
Apache-2.0
cherry-markdown's People
Forkers
sunsonliu xinweihe233 jiawei686 shooterrao laidaxian it-fork linecode dut3062796s hercules261188 hhy5277 pengyue-cn jm-ds khaledrakhisi davidalphafox hondrytravis kekewind pointmountain lyngai pronoy2108 joannamo kingoneyan lurongze cbhust8025 binbinao dougthompson1976 qyuewang lllllllqw whenleo winlinvip xilibi2003 toutouping mrvincelee morris-g weoking gpia kukuyu ikey4u jrainlau mapengfei53 upupor flyerangel meigy joriewong 760985933 pjkui jacol84 izchethan mohamedalirashad bai-xiaoguang xudaotutou xiaocao12306 yangligogogo forkcodeaiyc rachlegend chunyu-zhou msdest565 chenchengy object-kaz lusteng yesoce isabella232 sharmy jluwula lcy-dextry aarveis anlingxi nickjames21119 6643789wsx w1ndness lushx humyfred lyonbot doomconquer stillcalm fenqinyao rockie littlegreay lxzlx624 wqqfocks nkcc yuanyeakane kidnes perry-c 834170599 r4ggj 373518155 hibig hunya2017 ocean2sky baihongliu ken4096 serco-chen yuandonghua 1165048017 garrylai wangyang0210 han-jun john-zhh rockdong2005 iniercherry-markdown's Issues
latex代码和代码块冲突
虽然图中的 markdown 语法不正确,但是当我复制代码块中的 latex 代码粘贴后,这个问题就会出现。
局部渲染和局部更新相对于 Bytemd 来说在长文本处理时性能确实提升了不少。相对于typora这种所见即所得的编辑器,我还是更喜欢 markdown 代码和渲染分开,感觉能看见 markdown 源代码会有安全感。另外 katex 貌似比 mathjax 在初次渲染时效果会好。另外我在文档中看到某些功能pro 版本可用,请问后续是会收费吗?后面的话我还是挺想用这个替换我博客里用的bytemd的😺
编辑区和效果展示区并非完全对齐
编辑区通常都比效果展示区篇幅短,导致在编辑区编辑时若要同步查看展示效果,有时候滚动操作并非能在水平对齐点查看到匹配的结果,通常展示区要更往下滚动多点,这样体验不是很好,所以cherry markdown能否支持编辑区对应的展示效果区始终与编辑区光标在同一水平线上
sequenceDiagram 语法高亮支持
经常用Markdown画时序图,关键字有时候还是会写错,复杂的时候语法错了要排查好久。
期望能加强这方面能力
[Bug report]编辑器重复引入MathJax导致控制台报错
Describe the bug
使用src引入MathJax时,多个实例切换时控制台会报错
To Reproduce
- 在Vue 2.x环境下使用Cherry封装编辑器组件
const options = {
...
engine: {
...
syntax: {
...
mathBlock: {
engine: 'MathJax', // katex或MathJax
src: './static/mathjax/text-svg.js'
},
...
}
this.cherry = new Cherry(this.options)
- 外层页面引用封装的组件
- 外层页面切换不同的MD文档
Expected behavior
正常显示,控制台无报错
Environment (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version:0.5.14
Additional context
感觉像是Engine.js这里在动态加载script的时候没有做是否存在的判断,每次都会加载一遍对应的js文件,然后mathjax抛出了错误...
如果使用externals配置MathJax为window.MathJax同时设置mathBlock的src为空,此时可以自行控制引入js文件,但是插件(cherry配置默认引入的'input/asciimath', '[tex]/noerrors', '[tex]/cancel', '[tex]/color', '[tex]/boldsymbol')不会自动引入,需要手动一个一个去加载,感觉不太友好...
if (!window.MathJax) {
loadScript(MATH_JAX_LIB).then(() => {
this.initCherry()
})
} else {
this.initCherry()
}
设置externals时未自动加载plugins:
设置mathBlock.src时会自动加载同目录下的plugins:
Basic demo weird scroll behaviour after phone mode
After disabling phone mode left edit side becomes unscrollable.
- Turn on phone mode
- Turn off phone mode
- Scroll left side
- ???
Browser: Edge Version 95.0.1020.30 (Official build) (64-bit)
llUiopcQh0.mp4
[Bug report]每一次调用setMarkdown或者setValue,光标都被重置到最前面了,对于封装成v-model形式的vue组件非常不友好
Describe the bug
每一次调用setMarkdown或者setValue,光标都被重置到最前面了,对于封装成v-model形式的vue组件非常不友好
To Reproduce
Steps to reproduce the behavior:
- Go to '...'
- Click on '....'
- Scroll down to '....'
- See error
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
- OS: [e.g. Windows/macOS]
- Browser [e.g. Chrome, Safari]
- Version [e.g. 0.5.14]
Additional context
Add any other context about the problem here.
希望出一个VS Code 插件
如题
希望可以支持嵌入块(比如 Draw.io)的能力
比如嵌入 draw.io 等,在文本形式下存储的可以是形如
```drawio
[base64 content]
```
这样的内容
为了避免在输入框里,base64的东西太长太乱,可以使用 CodeMirror 的 markText 方案,将其折叠并替换为一个占位符。点击占位符可以打开弹窗编辑内容
行内清单图标重叠
封装一下是不是可以考虑出个pc客户端版本,最近typro开始收费了
在iwiki的cherry markdown调整图片尺寸时窗口不能固定
不确定是不是cherry的问题。
在预览窗口调整图片的尺寸时,会出现异常滚动的问题,窗口不固定。导致调整起来很费劲。
编辑-字体背景色,选择一个背景色再选择一个背景色后展示端会出现两个!!叹号
some straight line with space code seems not that straight
┏---r1----┓ ┏--------r3---------┓ ┏---r5----┓
┃ ┃ ┏--------r2---┃-----┓ ┏---r4----┓ ┃ ┃
▶─────╋──w██████┃██┃███x─────────╋─y███┃██████┃███z──╋──╋──╋─────────╋──◀
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃
A---------B ┃ E------------┃------F ┃ I---------J
C-------------------D G---------H
Maybe word-spacing issue?
[Feature request] Toolbar appears when some of code block is selected
[Bug report] 预览区和编辑区交替滚动时,编辑区无法滚动
Describe the bug
预览区和编辑区交替滚动时,编辑区无法滚动,无限回弹
To Reproduce
- 进入 demo 页 https://tencent.github.io/cherry-markdown/examples/index.html
- 滚动右侧预览区
- 惯性滚动持续时,滚动左侧编辑区
- 编辑区一直被弹回固定位置
Expected behavior
编辑区能正常滚动
Environment (please complete the following information):
- OS: [macOS]
- Browser [Chrome]
- Version [0.5.14]
标签元素渲染不出来
标题不给加粗加黑吗
[Bug report]工具栏-插入-[图片、视频等]功能失效
Describe the bug
插入-图片失效,没有选择文件的弹框
To Reproduce
Steps to reproduce the behavior:
1.点击工具栏-插入
2.点击图片
Expected behavior
弹出选择文件的弹框
Environment (please complete the following information):
- OS: [macOS]
- Browser [Chrome]
- Version [0.5.16]
Additional context
这里的代码设置input类型的时候有问题,传入的['image', 'video', 'pdf']等是无效值,此时浏览器会将其设置为默认的'text',参考MDN文档所以不会出现选择文件的弹框。0.5.14版本中默认的就是'file',不知为何后来改掉了...另外目前没有限制指定类型的字段,希望加入限制,或添加相应的配置项。
字体过大 预览覆盖了上一行,没有自动调节行距
bash的代码块反斜杠会自动变成两个
more backslash will be added when pasting code
souce code:
```swift
print("hello")
let hello = """
\\
\\
\\
\\
"""
and another ``` below
preview window without sync when editable window scrolling
预览没有以光标点的地方进行展示
预览没有以光标选中的地方进行展示,我的光标在编辑页面 返回Demo 这块时,预览并没有显示对应的光标处的预览, RTX robinddu
预览显示不全,编辑页面的信息在预览无法完整显示
toolbars support 'exclude'
exclude = ['bold']
[Bug report]
Describe the bug
when config.customSyntax is undefined, throw Error:
Uncaught TypeError: Cannot read properties of undefined (reading 'htmlBlock')
Environment (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version: 0.5.15
[Bug report] 0xA0 character not recognized as a space in table
Describe the bug
when pasting from another editor, table content not parse when paste form another md editor (contains 0xA0 as space)
To Reproduce
Steps to reproduce the behavior:
0xA0.md
- paste text from attachment
- no table show in preview
Expected behavior
can show the table in preview
Environment (please complete the following information):
- OS: macOS
- Browser chrome
- Version Version 96.0.4664.110 (Official Build) (x86_64)
wordpress的古腾堡编辑器很牛逼,建议抄一抄(借鉴)
https://github.com/WordPress/gutenberg
首先恭喜腾讯开源Markdown编辑器
另外,要提一点小建议。
目前看你们的编辑UI,可视化体验。还处于非常原始的阶段,咱们就不必继续挣扎在原始阶段,一步到位。直接借鉴wordpress 古腾堡的编辑体验。
这种所见即所得的体验,也是国内 语雀,飞书,等众多文档平台所采用的方案。极大地帮助人们快速编写文档,体验非常优秀。
DEMO在edge浏览器下,源码和预览两边对不齐
紧接着上一音频再插入音频时,会导致音频样式有误
在React环境下,是如何在弹出框中加载编辑器的?
环境:React+AntDesign
代码:
import React, { useEffect } from 'react';
import { Modal } from 'antd';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
useEffect(() => {
if (visible) {
const cherryInstance = new Cherry({
id: 'markdown-container',
value: '# welcome to cherry editor!',
});
}
}, [visible]);
<Modal
visible={visible}
title="markdown"
destroyOnClose
maskClosable={false}
width="80%"
>
<div id="markdown-container"/>
</Modal>
问题描述:我本意是想在弹窗里面加载markdown编辑器的,但是目前好像是没有识别到Modal弹窗里面的DOM节点,直接在整个页面的根节点上面自动创建了一个ID为markdown-container的DIV容器。
问题:就是想请问,是如何将编辑器加载到弹出框中的目标容器的?
Bug report: '*' in unordered list was resolved to Italic mark
【Describe the bug】
'*' in unordered list was resolved to Italic mark,and break the list
【Expected behavior】
Resolve to an unordered list correctly
【To Reproduce】
Enter these content
是否可以加入思维导图功能
preview could not match source code when contains long checklist
`<details>` render weird when with no space in a new line
引用前面有空格时无法正确识别,需要考虑下是否兼容
- [引用] 对对对
[引用]: https://github.com/Tencent/cherry-markdown
疑似自动编号带来的渲染问题
[Bug report] Copy the pasted code will add extra tags
Describe the bug
Brought extra strange style when i pasted pieces of code, this feature is completely unable to use.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
It will add the '**' tag what I don't need in my statement.
Environment (please complete the following information):
- OS: macOS
- Browser Safari
- Version 15.2
Additional context
Excess markers will appear from copying from Xcode.
希望可以支持拖拽上传图片
希望可以支持 md或者pdf文档导入功能
npm 包 404 了
error Couldn't find package "cherry-markdown" on the "npm" registry.
[Feature request] Plantuml support just like mermaid
For most cases, mermaid should be enough, but for some people, they would like to use plantuml
** What does the proposed API look like**
Just like mermaid:
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
const registerPlugin = async () => {
const [{ default: CherryPlantumlPlugin }, plantuml] = await Promise.all([
import('cherry-markdown/src/addons/cherry-code-block-plantuml-plugin'),
import('plantuml'),
]);
Cherry.usePlugin(CherryPlantumlPlugin, {
plantuml, // pass in plantuml object
});
};
registerPlugin().then(() => {
// Plug-in registration must be done before Cherry is instantiated
const cherryInstance = new Cherry({
id: 'markdown-container',
value: '# welcome to cherry editor!',
});
});
Can't open demo in Safari
Awesome markdown tool~ but when I open the demo page
https://tencent.github.io/cherry-markdown/examples/index.html
it comes blank page, with no error in console
Any idea deal with it?
insert null when clicking color palette's padding
分割线误将上一行渲染成h2
下面这一段语法渲染不符合预期
[Bug report] 使用vite开发时报错,引入jsdom导致,可以动态引入
[Bug report]
Describe the bug
在vite下无法使用
To Reproduce
Steps to reproduce the behavior:
- npm install cherry-markdown
- import Cherry from 'cherry-markdown';
Expected behavior
可以正确import
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
- OS: [e.g. Windows/macOS]
- Browser [e.g. Chrome, Safari]
- Version [e.g. 0.5.14]
Additional context
Add any other context about the problem here.
global export api
export('pdf')
export('screenShot')
for
preview
mode
[Bug report]打字被输入法遮挡问题
怎么捕捉编辑器内内容变化的事件?
多谢,解决我的问题了。
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.