cherry markdown
v0.8.57
Inglês | Chinês simplificado | japonês
O Cherry Markdown Editor é um editor de Markdown JavaScript. Possui vantagens como pronta para uso, leve e fácil de estender. Ele pode ser executado no navegador ou no servidor (com o NodeJS).
O desenvolvedor pode chamar e instanciar o editor de Markdown de Cherry de uma maneira muito simples. O editor instanciado de Markdown suporta a sintaxe de marcação mais comumente usada (como título, TOC, FlowChart, Fórmula etc.) por padrão.
Quando a sintaxe que o suporte ao editor de Markdown Cherry não pode atender às suas necessidades, o desenvolvimento secundário ou a extensão da função pode ser realizada rapidamente. Ao mesmo tempo, o Cherry Markdown Editor deve ser implementado pelo Pure JavaScript e não deve confiar na tecnologia da estrutura como Angular, Vue e React. A estrutura fornece apenas um ambiente de contêiner.
O Cherry Markdown possui um gancho de segurança embutido, filtrando a lista de permissões e a Dompurify para fazer o filtro de digitalização.
O Cherry Markdown tem uma variedade de temas de estilo para escolher.
Clique aqui para mais detalhes
Via Yarn
yarn add cherry-markdownVia npm
npm install cherry-markdown --save Se você precisar habilitar as funções do desenho mermaid e da mesa para o parto, precisará adicionar pacotes mermaid e echarts ao mesmo tempo.
Atualmente, a versão plug-in cherry recomenda é [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!' ) ; Como o tamanho da biblioteca de sereia é muito grande, o produto Cherry Build contém um pacote de construção do núcleo sem sereia embutida. A construção do núcleo pode ser importada das seguintes maneiras.
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>O pacote de construção do núcleo não contém dependência da sereia, deve importar plug-ins relacionados manualmente.
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!' ,
} ) ;Recomendar usar importação dinâmica, a seguir é um exemplo de importação dinâmica do 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!' ,
} ) ;
} ) ; Veja /src/Cherry.config.js ou clique aqui
Clique aqui para obter mais exemplos.
Em desenvolvimento, fique atento ou veja /client/
Clique aqui
Clique aqui
O JEST é selecionado como uma ferramenta de teste de unidade para sua afirmação, suporte assíncrono e instantâneo. O teste de unidade inclui teste de teste comum e teste instantâneo.
yarn run test:commonmark para testar as suítes oficiais da Commonmark. Este comando é executado rápido.
As suítes estão localizadas em test/suites/commonmark.spec.json , por exemplo:
{
"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 "
}, Nesse caso, o JEST comparará o HTML gerado por Cherry.makeHtml(" tfootbazttbimn") com o resultado esperado "<pre><code>footbazt tbimn</code></pre>n" . O Matcher de Cherry Markdown ignorou atributos privados como data-line .
As especificações e suítes comuns são de: https://spec.commonmark.org/.
Ligue para yarn run test:snapshot para executar o teste de instantâneo. Você pode escrever suíte de instantâneos como test/core/hooks/List.spec.ts . Na primeira vez, um instantâneo será gerado automaticamente. Depois disso, o Jest pode comparar o instantâneo com o HTML gerado. Se você precisar regenerar um instantâneo, exclua o instantâneo antigo em test/core/hooks/__snapshots__ e execute este comando novamente.
O teste de instantâneo funciona mais lento. Ele deve ser usado apenas para testar ganchos que são propensos a erros e conter sintaxe especial de marecha de cereja.
Bem -vindo para se juntar a nós para construir um editor de Markdown mais poderoso. Claro que você pode enviar a solicitação de recurso para nós. Por favor, leia -me antes de trabalhar nisso.
Apache-2.0
