cherry markdown
v0.8.57
Английский | Упрощенный китайский | Японский
Редактор Cherry Markdown - редактор Markdown JavaScript. Он имеет такие преимущества, как необычный, легкий и прост в расширении. Он может работать в браузере или сервере (с Nodejs).
Разработчик может вызвать и создать редактор Markdown Cherry очень простым способом. Редактор «созданный редактор Cherry Markdown» поддерживает наиболее часто используемый синтаксис Markdown (например, заголовок, TOC, блок -схема, формула и т. Д.) По умолчанию.
Когда синтаксис, который поддержка редактора Cherry Markdown не может соответствовать вашим потребностям, можно быстро выполнить вторичное развитие или расширение функций. В то же время редактор Cherry Markdown должен быть реализован Pure JavaScript и не должен полагаться на фреймворк -технологию, такую как Angular, Vue и React. Структура предоставляет только контейнерную среду.
Cherry Markdown имеет встроенный крюк безопасности, отфильтровав белый список и Dompurify для выполнения фильтра сканирования.
Cherry Markdown имеет множество тем стиля на выбор.
Нажмите здесь для получения более подробной информации
Через пряжу
yarn add cherry-markdownЧерез NPM
npm install cherry-markdown --save Если вам необходимо включить функции рисунка mermaid и таблицы до чара, вам необходимо добавить пакеты mermaid и echarts одновременно.
В настоящее время плагина-версия Cherry рекомендуется [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!' ) ; Поскольку размер библиотеки русалки очень большой, продукт вишневой сборки содержит пакет основной сборки без встроенной русалки. Основная сборка может быть импортирована следующими способами.
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>Основной пакет сборки не содержит зависимости русалки, должен импортировать связанные плагины вручную.
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!' ,
} ) ;Рекомендую использовать динамический импорт, приведен пример динамического импорта WebPack.
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!' ,
} ) ;
} ) ; См. /src/Cherry.config.js или нажмите здесь
Нажмите здесь, чтобы получить дополнительные примеры.
В разрабатывании, пожалуйста, следите за обновлениями или см. /client/
кликните сюда
кликните сюда
Jest выбирается в качестве инструмента модульного тестирования для его утверждения, асинхронной поддержки и снижения. Единый тест включает в себя тест Commonmark и тест на снимки.
Позвоните yarn run test:commonmark для проверки официальных Suites Commonmark. Эта команда работает быстро.
Сюжеты расположены в test/suites/commonmark.spec.json , например:
{
"markdown" : " t foo t baz tt bim n " ,
"html" : " <pre><code>foo t baz tt bim n </code></pre> n " ,
"example" : 2 ,
"start_line" : 363 ,
"end_line" : 368 ,
"section" : " Tabs "
}, В этом случае Jest будет сравнивать HTML, сгенерированный Cherry.makeHtml(" tfootbazttbimn") с ожидаемым результатом "<pre><code>footbazt tbimn</code></pre>n" . Матлер Cherry Markdown проигнорировал личные атрибуты, такие как data-line .
Спецификации и люксы Commonmark от: https://spec.commonmark.org/.
Вызовите yarn run test:snapshot для запуска снимка. Вы можете написать набор для снимков, например, test/core/hooks/List.spec.ts . В первый раз, снимок будет сгенерирован автоматически. После этого Jest может сравнить снимок с генерируемым HTML. Если вам нужно регенерировать снимок, удалите старый снимок под test/core/hooks/__snapshots__ и запустите эту команду снова.
Тестовые снимки пробегают медленнее. Его следует использовать только для тестирования крючков, которые подвержены ошибкам и содержат специальный синтаксис Cherry Markdown.
Добро пожаловать, чтобы присоединиться к нам, чтобы построить более мощный редактор Markdown. Конечно, вы можете отправить нам запрос на функции. Пожалуйста, прочитайте меня, прежде чем работать над этим.
Apache-2.0
