cherry markdown
v0.8.57
الإنجليزية | تبسيط الصينية | اليابانية
محرر Markdown Cherry هو محرر تخفيضات JavaScript. لديها مزايا مثل خارج الصندوق وخفيفة الوزن وسهلة تمديدها. يمكن تشغيله في المتصفح أو الخادم (مع NodeJS).
يمكن للمطور استدعاء محرر تخفيف الكرز وتثبيته بطريقة بسيطة للغاية. يدعم محرر تخفيض مائل الكرز الذي تم إنشاءه الأكثر استخدامًا بناء جملة التخفيضات الأكثر استخدامًا (مثل العنوان ، TOC ، مخطط انسيابي ، الصيغة ، إلخ) بشكل افتراضي.
عندما لا يمكن أن يلبي بناء الجملة الذي يدعمه تحرير الكرز احتياجاتك ، يمكن تنفيذ التطوير الثانوي أو تمديد الوظيفة بسرعة. في الوقت نفسه ، يجب تنفيذ محرر تخفيض مائل الكرز بواسطة JavaScript Pure ، ويجب ألا يعتمد على تكنولوجيا الإطار مثل Angular و Vue و React. يوفر الإطار بيئة حاوية فقط.
يحتوي Cherry Markdown على خطاف أمان مدمج ، عن طريق تصفية القائمة البيضاء والانجراف لإجراء مرشح المسح.
يحتوي 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!' ) ; نظرًا لأن حجم مكتبة Mermaid كبيرة جدًا ، فإن منتج Build Cherry يحتوي على حزمة بناء أساسية دون حورية البحر المدمجة. يمكن استيراد البناء الأساسي بالطرق التالية.
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 كأداة اختبار للوحدة لتأكيدها ودعمها غير المتزامن واللقطة. يتضمن اختبار الوحدة اختبار المميزة واختبار اللقطة.
استدعاء yarn run test: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 Marmdown سمات خاصة مثل data-line .
المواصفات والأجنحة المشتركة من: https://spec.commonmark.org/.
استدعاء yarn run test:snapshot لتشغيل اختبار اللقطة. يمكنك كتابة مجموعة لقطة مثل test/core/hooks/List.spec.ts في المرة الأولى ، سيتم إنشاء لقطة تلقائيًا. بعد ذلك ، يمكن لـ Jest مقارنة اللقطة مع HTML التي تم إنشاؤها. إذا كنت بحاجة إلى تجديد لقطة ، فقم بحذف اللقطة القديمة ضمن test/core/hooks/__snapshots__ وقم بتشغيل هذا الأمر مرة أخرى.
اختبار لقطة يعمل أبطأ. يجب استخدامه فقط لاختبار السنانير المعرضة للخطأ ويحتوي على بناء جملة خاص للكرز.
مرحبًا بك للانضمام إلينا لإنشاء محرر تخفيض أقوى. بالطبع يمكنك إرسال طلب الميزات لنا. من فضلك اقرأني قبل أن تعمل عليها.
Apache-2.0
