editorjs html

EditorJS-HTML

فائدة لتحرير محررات تنظيف البيانات إلى HTML.

• استخدمه مع JavaScript/TypeScript العادي ، رد فعل ، زاوي ، VUE أو أي محرك/إطار عمل من اختيارك.
• سريع وفعال وخفيف الوزن.
• قابلة للتخصيص بالكامل إلى القلب.
• يدعم كتل EditorJS الأساسية التي يمكن تخصيصها أيضًا.
• تمتد لتحليل الكتل الخاصة بك.

ما هو جديد في V4؟

• إعادة كتابة كاملة ، أحدث التبعيات مع الحد الأدنى من التغييرات API.
• تتم إزالة parseStrict() والتحقق validate() .
• الوضع الصارم قابل للتكوين عبر الخيارات.
• أخطاء وحدة التحكم إذا لم تكن وظائف المحلل المحلل للكتلة غير قابلة للتشكيل. الوضع الصارم يرمي الأخطاء.
• الكود أكثر قابلية للقراءة ، وحدات. سيجعل من الأسهل المساهمة وتتبع التغييرات.
• اكتب التعريفات التي تم جلبها مباشرة من Editor.js ، لذلك يصبح التطوير أسهل.
• وحدة اختبار مع Jest.

تثبيت

مضيف ذاتي ، إصدارات مسبقة.

• المتصفح - get /.

• Nodejs - get /.build/edjshtml.node.js

• لكل من المتصفح والعقدة - get /.build/edjshtml.js

NPM

npm install editorjs-html

CDN

• https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.js
• (Browser Build Only): https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.browser.js

الاستخدام

متصفح

  const edjsParser = edjsHTML ( ) ;
  let html = edjsParser . parse ( editorjs_clean_data ) ;
  console . log ( html ) ;

Nodejs

  const edjsHTML = require ( "editorjs-html" ) ;
  const edjsParser = edjsHTML ( ) ;
  const html = edjsParser . parse ( editorjs_clean_data ) ;

  console . log ( html ) ; 

التحديثات

انظر الإصدارات

مستندات

أنواع الكتلة المدعومة

• رأس (H1-H6)
• قوائم (مرتبة وغير مرتبة)
• قوائم متداخلة
• صورة
• محدد
• فقرة
• يقتبس
• شفرة
• تضمين

تحليل كائن بيانات Editorjs بأكمله

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns array of html strings per block
  console . log ( HTML ) ; 

تحليل كائن بيانات Editorjs بالكامل (وضع صارم)

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns an error
  if ( HTML instanceof Error ) throw HTML ;

  // in case of success, returns an array of strings
  console . log ( HTML ) ; 

تحليل كتلة بيانات نظيفة واحدة

  const edjsParser = edjsHTML ( ) ;
  const blockHTML = edjsParser . parseBlock ( editorjs_data_block ) ;
  // returns string of html for this block
  console . log ( blockHTML ) ; 

وضع صارم

  const edjsParser = edjsHTML ( { } , { strict : true } ) ;
  // returns the list of missing parser functions
  const blockHTML = edjsParser . parse ( editorjs_data ) ;
  console . log ( blockHTML ) ;

تمتد للكتل المخصصة

يدعم editorjs-html وظائف تمديد وتجاوزات المحللون للكتل.

  // Example Custom or Unrecognised Block
  {
    type : "custom" ,
    data : {
      text : "Hello World"
    }
 } 

  // Parse this block in editorjs-html
  function customParser ( block ) {
    return `<custom-tag> ${ block . data . text } </custom-tag>` ;
  }

  const plugins = {
    // The keyname must match with the type of block you want to parse with this funcion
    custom : customParser
    // ... add more or overwrite
  }

  const edjsParser =  edjsHTML ( plugins ) ; 

مساهمة

يرجى إضافة مشكلة ، أو فتح العلاقات العامة لأي أخطاء أو مراجعة أو اقتراحات.

وظائف محلل جديد

1. للحصول على وظائف محلل إضافي ، يرجى إضافتها إلى parsers/block-name . تحقق من الوظائف الحالية للاقتراحات.
2. اختبار Everyting يعمل بشكل جيد ، مع pnpm test && pnpm build .
3. افتح العلاقات العامة ، للمراجعة.
4. إضافة اختبارات في دليل tests . تأكد من أن الاختبارات الخاصة بك تمر بتغطية مناسبة.

الاقتراحات والتوصيات

أحب الحصول على ملاحظاتك وأي اقتراحات. يمكنك أيضًا إخباري ، إذا كنت بحاجة إلى دعم لمزيد من كتل EditorJS.

يدعم

إذا وجدت هذا مفيدًا ، فكر في إعطاء هذا المستودع نجمًا. يمكنك أيضًا شراء قهوة هنا

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا

مؤلف

pavittarx