استخدام CDN

في الصفحات الثابتة التي يصعب فيها تثبيت الحزمة، يمكنك تحميل حزمة المتصفح وCSS الخاصين بـ NABI NOTE من CDN. يقرأ المثال أدناه إصدار الحزمة تلقائيًا وقت البناء وينشئ العناوين، ثم يركّب المحرر عبر الكائن العام NabiNote.

احفظ الشيفرة أدناه باسم وافتحها في متصفح — تعمل فورًا أمام عينيك.

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NABI NOTE</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nabi-note@1.0.0/dist/nabi.css">
  <style>
    html, body { height: 100%; margin: 0; }
    /* أدنى ارتفاع للمحرر — يمنعه من الظهور صندوقًا بسطر واحد عند أول فتح. غيّر القيمة كما تريد. */
    #app { height: 100vh; }
    #editor { flex: 1; min-height: 0; overflow-y: auto; }
  </style>
</head>
<body>

<div id="app" class="nabi">
  <div id="chrome" class="nabi-toolbar">
    <div class="nabi-toolbar-row">
      <span id="tools"></span>
      <div id="toolbar"></div>
    </div>
    <div id="context"></div>
  </div>
  <div id="editor" class="nabi-content"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/nabi-note@1.0.0/dist/browser/nabi-note.min.js"></script>
<script>
  var N = NabiNote
  var app = document.querySelector('#app')
  var surface = document.querySelector('#editor')

  // كل الأجنحة عدا الرفع.
  // من الخطوط يُبقى على النمطي والمذيَّل فقط.
  // تدعم الأنظمة خطوطًا مختلفة، فيحتاج أحادي المسافة والمخطوطي إلى خط ويب يُستورَد
  // على حدة قبل أن تتعرّف عليه كل منصّة. التفاصيل في صفحة "نوع الخط".
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

  var made = N.createNabiWith(wings, {
    locale: 'ar',
    ask: {
      message: function (text) { window.alert(text) },
      confirm: function (text) { return window.confirm(text) }
    }
  })
  var nabi = made.nabi
  var registry = made.registry

  N.mountSurface({ nabi: nabi, registry: registry, root: surface, locale: 'ar' })
  N.mountPickedMark({ nabi: nabi, surface: surface })

  var settle = N.watchSettle(document, { surface: surface })
  var shared = { nabi: nabi, registry: registry, surface: surface, settle: settle, locale: 'ar' }

  var history = N.mountLocalHistory({ nabi: nabi, storage: N.browserHistoryStorage(window) })
  var file = N.mountFile({
    nabi: nabi, registry: registry, store: N.browserFileStore(document),
    name: function () { return 'note' }, locale: 'ar'
  })

  var toolbar = N.mountToolbar(Object.assign({}, shared, {
    root: document.querySelector('#toolbar'),
    file: file,
    onHost: function (w) {
      if (w !== 'localHistory') return
      N.openHistoryPanel({
        history: history, surface: surface, locale: 'ar', sessionId: history.sessionId,
        render: function (record) {
          return N.renderStoredHtml(JSON.parse(record.body), registry) || ''
        }
      })
    }
  }))
  var context = N.mountContextToolbar(Object.assign({}, shared, { root: document.querySelector('#context') }))

  N.mountHints({ toolbar: toolbar, context: context, root: document.querySelector('#chrome'), surface: surface })
  N.mountViewTools({ nabi: nabi, surface: surface, root: app, container: document.querySelector('#tools'), locale: 'ar' })

  nabi.setHtml('')

  // مثال على استدعاء عند تغيّر القيمة
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

نقاط يجب التحقق منها في NABI NOTE

في كود النشر، استخدم الإصدار المثبّت نفسه لكل من CSS وJavaScript الخاص بالمتصفح. قد يتغير السلوك في يوم صدور إصدار جديد عند استخدام عنوان بلا إصدار مثل latest.
تعرض حزمة المتصفح واجهة الجذر باسم window.NabiNote. لا تتوفر حزم عامة منفصلة لـ nabi-note/ssr وnabi-note/viewer وnabi-note/diff.
يعمل حفظ الملفات والسجل المحلي في المثال داخل متصفح المستخدم. إذا احتجت إلى حفظ على الخادم أو مزامنة حساب، فأرسل نتيجة getJson() إلى واجهة API في تطبيقك.
عند إضافة الرفع، لا تكتفِ بـ wing upload؛ اربط دالة النقل الفعلية وwings الصور أو الروابط اللازمة. يتحمل خادم الرفع مسؤولية التحقق من الملفات.
تتضمن حزمة المتصفح محلل HTML داخليًا. لذلك لا تحتاج إلى خيار parser منفصل أو API خاص لاستخدام setHtml() أو فتح ملف HTML أو لصق HTML.

يختلف CDN في طريقة التحميل فقط. تنسيق الحفظ والتحقق من الإدخال متماثلان مع التثبيت عبر npm، لذا راجع أيضًا الاستخدام الأساسي.

استخدام CDN ​

نقاط يجب التحقق منها في NABI NOTE ​

استخدام CDN

نقاط يجب التحقق منها في NABI NOTE