cherry markdown
v0.8.57
Anglais | Chinois simplifié | japonais
Cherry Markdown Editor est un éditeur de Markdown JavaScript. Il présente les avantages tels que l'emploi, léger et facile à étendre. Il peut s'exécuter dans le navigateur ou le serveur (avec NodeJS).
Le développeur peut appeler et instancier l'éditeur de Markdown Cherry d'une manière très simple. L'éditeur de Markdown Cherry instancié prend en charge la syntaxe de Markdown la plus couramment utilisée (comme le titre, le TOC, l'organigramme, la formule, etc.) par défaut.
Lorsque la syntaxe que Cherry Markdown a pris en charge ne peut pas répondre à vos besoins, le développement secondaire ou l'extension de fonction peut être effectué rapidement. Dans le même temps, Cherry Markdown Editor doit être mis en œuvre par Pure JavaScript et ne doit pas compter sur la technologie des cadres tels que Angular, Vue et React. Framework fournit uniquement un environnement de conteneur.
Cherry Markdown a un crochet de sécurité intégré, en filtrant la liste blanche et Dompurify pour faire un filtre à scan.
Cherry Markdown a une variété de thèmes de style à choisir.
Cliquez ici pour plus de détails
Via le fil
yarn add cherry-markdownVia npm
npm install cherry-markdown --save Si vous devez activer les fonctions du dessin mermaid et du tableau à la table, vous devez ajouter des packages mermaid et echarts en même temps.
Actuellement, la version plug-in Cherry recommande est [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!' ) ; Parce que la taille de la bibliothèque de sirène est très grande, le produit de construction de cerises contient un package de construction de base sans sirène intégrée. La version principale peut être importée de la manière suivante.
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>Le package Core Build ne contient pas de dépendance sirène, devrait importer manuellement les plug-ins liés.
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!' ,
} ) ;Recommande d'utiliser une importation dynamique, ce qui suit est un exemple d'importation dynamique de 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!' ,
} ) ;
} ) ; voir /src/Cherry.config.js ou cliquez ici
Cliquez ici pour plus d'exemples.
En cours de développement, veuillez rester à l'écoute ou voir /client/
Cliquez ici
Cliquez ici
Jest est sélectionné comme outil de test unitaire pour son affirmation, son support asynchrone et son instantané. Le test unitaire comprend le test de marque commun et le test d'instantané.
Appelez yarn run test:commonmark pour tester les suites officielles de la marque commune. Cette commande s'exécute rapidement.
Les suites sont situées dans test/suites/commonmark.spec.json , par exemple:
{
"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 "
}, Dans ce cas, Jest comparera le HTML généré par Cherry.makeHtml(" tfootbazttbimn") avec le résultat attendu "<pre><code>footbazt tbimn</code></pre>n" . Le correspondant de Cherry Markdown a ignoré les attributs privés comme data-line .
Les spécifications et les suites Commonmark proviennent de: https://spec.commonmark.org/.
Appelez yarn run test:snapshot pour exécuter le test d'instantané. Vous pouvez écrire Snapshot Suite comme test/core/hooks/List.spec.ts À la première fois, un instantané sera généré automatiquement. Après cela, JEST peut comparer l'instantané avec le HTML généré. Si vous avez besoin de régénérer un instantané, supprimez l'ancien instantané sous test/core/hooks/__snapshots__ et exécutez à nouveau cette commande.
Le test instantané est plus lent. Il ne doit être utilisé que pour tester des crochets sujets aux erreurs et contenir une syntaxe spéciale de Markdown Cherry.
Bienvenue à nous rejoindre pour construire un éditeur de Markdown plus puissant. Bien sûr, vous pouvez nous soumettre une demande de fonctionnalité. Veuillez me lire avant de travailler dessus.
Apache-2.0
