cherry markdown
v0.8.57
Englisch | Vereinfachtes Chinesisch | japanisch
Cherry Markdown -Editor ist ein JavaScript -Markdown -Editor. Es hat die Vorteile wie Out-of-the-Box, Leicht und leicht zu erweitern. Es kann in Browser oder Server ausgeführt werden (mit NodeJS).
Der Entwickler kann Cherry Markdown -Editor auf sehr einfache Weise anrufen und instanziieren. Der instanziierte Cherry Markdown -Editor unterstützt standardmäßig am häufigsten verwendete Markdown -Syntax (wie Titel, TOC, Flowdiagramm, Formel usw.).
Wenn die Support der Cherry Markdown -Editor nicht Ihren Anforderungen entsprechen kann, kann die sekundäre Entwicklung oder Funktionserweiterung schnell durchgeführt werden. Gleichzeitig sollte der Cherry Markdown -Editor von Pure JavaScript implementiert werden und sich nicht auf Framework -Technologien wie Angular, Vue und React verlassen. Framework bietet nur eine Containerumgebung.
Cherry Markdown verfügt über einen integrierten Sicherheitshaken, indem der Whitelist und Dompurify gefiltert werden, um den Scanfilter durchzuführen.
Cherry Markdown hat eine Vielzahl von Stilthemen zur Auswahl.
Klicken Sie hier, um weitere Informationen zu erhalten
Über Garn
yarn add cherry-markdownÜber NPM
npm install cherry-markdown --save Wenn Sie die Funktionen der mermaid -Zeichnung und der Tabelle zu Chart aktivieren müssen, müssen Sie gleichzeitig mermaid und echarts -Pakete hinzufügen.
Derzeit lautet die Plug-in-Version, die Cherry empfiehlt, [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!' ) ; Da die Größe der Meerjungfraubibliothek sehr groß ist, enthält das Cherry Build-Produkt ein Kernbaupaket ohne eingebaute Meerjungfrau. Der Kernbau kann auf folgende Weise importiert werden.
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>Das Core Build-Paket enthält keine Abhängigkeit von der Meerjungfrau und sollte verwandte Plug-Ins manuell importieren.
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!' ,
} ) ;Empfehlen Sie die Verwendung von Dynamic Import, das folgende Beispiel für den dynamischen Webpack -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!' ,
} ) ;
} ) ; siehe /src/Cherry.config.js oder klicken Sie hier
Klicken Sie hier, um weitere Beispiele zu erhalten.
Bleiben Sie in der Entwicklung dran oder sehen Sie /client/
klicken Sie hier
klicken Sie hier
Der Scherz wird als Einheits -Test -Tool für seine Behauptung, asynchrone Unterstützung und Snapshot ausgewählt. Der Unit -Test umfasst den Commonmark -Test und einen Snapshot -Test.
Rufen Sie yarn run test:commonmark um die offiziellen Commonmark -Suiten zu testen. Dieser Befehl läuft schnell.
Die Suiten befinden sich in test/suites/commonmark.spec.json , zum Beispiel:
{
"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 "
}, In diesem Fall wird der Scherz die von Cherry.makeHtml(" tfootbazttbimn") mit dem erwarteten Ergebnis "<pre><code>footbazt tbimn</code></pre>n" vergleichen. Der Match von Cherry Markdown hat private Attribute wie data-line ignoriert.
Commonmark -Spezifikationen und Suiten stammen von: https://spec.commonmark.org/.
Rufen Sie yarn run test:snapshot um einen Snapshot -Test auszuführen. Sie können Snapshot Suite wie test/core/hooks/List.spec.ts schreiben. Zum ersten Mal wird automatisch ein Schnappschuss generiert. Danach kann Scherz den Schnappschuss mit dem generierten HTML vergleichen. Wenn Sie einen Schnappschuss regenerieren müssen, löschen Sie den alten Snapshot in test/core/hooks/__snapshots__ und führen Sie diesen Befehl erneut aus.
Snapshot -Test läuft langsamer. Es sollte nur verwendet werden, um zu fehleranfällige Haken zu testen und eine spezielle Syntax von Cherry Markdown enthalten.
Willkommen bei uns, um einen leistungsstärkeren Markdown -Editor zu erstellen. Natürlich können Sie uns eine Funktionsanfrage an uns senden. Bitte lesen Sie mich, bevor Sie daran arbeiten.
Apache-2.0
