تثبيت شريط الأدوات تعويض لوحة مفاتيح الجوّالنوع الخط الافتراضيالارتفاع

NABI NOTE

محرّر WYSIWYG مفتوح المصدر

NABI NOTE محرر WYSIWYG مفتوح المصدر يفصل وظائف مثل التنسيق والمحاذاة والجداول والرفع عن النواة في وحدات مستقلة تُسمى wings. يمكنك اختيار الوحدات التي تحتاجها فقط لتكوين المحرر وربط وحدات تصنعها بنفسك. وهو مكتوب بلغة JavaScript الخالصة، لذلك يمكن استخدامه مع أطر مثل React وVue. ويمكن البدء مباشرةً في الصفحات التي لا تملك بيئة بناء باستخدام مكتبة CDN. ويمكن تحويل صيغة المستند الخاصة به، NABI TREE، إلى HTML حتى في Node.js دون DOM المتصفح. تُنظّم المستندات المدخلة وفق القواعد المسجلة، وعند إنشاء HTML تُهَرَّب النصوص والسمات وتُفحص عناوين الروابط. لكن يجب مراجعة الوحدات المخصصة والبيانات المستلمة من الخادم بشكل منفصل وفق سياسة أمان التطبيق. تتيح متغيرات CSS والتخطيطات المبنية على rem ضبط السمة والحجم، مع الوضع الداكن وإعدادات خطوط للغات متعددة. كما تعمل فرز الجداول والسجل المحلي والعمل على المستندات بمساعدة الذكاء الاصطناعي على نموذج المستند نفسه.

الخط

تتوفر خطوط بديلة بحسب اللغة للأنماط بلا زخارف (الافتراضي)، وبزخارف، وثابت العرض، وخط اليد. إذا لم يتوفر خط مناسب للنمط المختار، يُستخدم خط المتصفح الافتراضي. تحدد الصفحة المضيفة نمط الخط الافتراضي للمحرر.

وفي ما يلي كل عائلة معروضة بلغات عدة.

산세리프 · ゴシック体 · 无衬线 · Serifenlos · Sans empattement · Sin serifa · Sem serifa · Без засечек · بلا زخارف · सैन्स सेरिफ़ · স্যান্স সেরিফ · سانس سیرف · Tanpa serif · بدون سریف · सॅन्स सेरिफ · Không chân · శాన్స్ సెరిఫ్ · Mara seref · Sans serif · Bila serif · சான்ஸ் செரிஃப் · ไร้เชิง · Senza grazie

세리프 · 明朝体 · 衬线 · Serif · Avec empattement · Con serifa · Com serifa · С засечками · بزخارف · सेरिफ़ · সেরিফ · سیرف · Berserif · سریف · सेरिफ · Có chân · సెరిఫ్ · Mai seref · Yenye serif · செரிஃப் · มีเชิง · Con grazie

고정폭 · 等幅 · 等宽 · Dicktengleich · Chasse fixe · Monoespaciada · Monoespaçada · Моноширинный · ثابت العرض · मोनोस्पेस · মনোস্পেস · یکساں چوڑائی · Lebar tetap · تک‌فاصله · Đơn cách · మోనోస్పేస్ · Tazara ɗaya · Eş aralıklı · Nafasi moja · ஒற்றையகலம் · ความกว้างคงที่ · Monospaziato · Monospace

필기체 · 筆記体 · 手写体 · Schreibschrift · Cursive · Cursiva · Рукописный · خط اليد · हस्तलिपि · হস্তলিপি · رواں خط · Tulisan tangan · دست‌نویس · हस्ताक्षर · Chữ viết tay · చేతిరాత · Rubutun hannu · El yazısı · Mwandiko · கையெழுத்து · ลายมือ · Corsivo

حجم الخط

صغير جدًا

صغير

كبير

كبير جدًا

عنوان

اكتب # في سطر فارغ ثم اضغط المسافة — يصير عنوانًا في الحال.

H1

H2

H3

H4

H5

H6

عريض · مائل · تحته خط · مشطوب

عريض مائل تحته خط ~~مشطوب~~ يمكن تطبيقها معًا على الحرف نفسه.

~~ويمكن جمعها بعضها فوق بعض.~~

الرفع والخفض

المساحة 3.5 م²، والحاشية تُوضع هكذا¹.

الماء هو H₂O.

لون النص · التظليل

اختيرت الألوان لتبقى مريحة للقراءة في الفاتح والداكن معًا.

لون النص أخضر · مرجاني · بنفسجي · كهرماني · أزرق

التظليل أصفر · أخضر · سماوي · وردي · أرجواني · برتقالي

رابط

ضع عنوانًا فيصير رابطًا.

يمكن استخدام عناوين http:// وhttps://، وكذلك المسارات في الموقع نفسه التي تبدأ بـ . أو /. لا يُسمح بعناوين مثل javascript:.

اكتب مثلًا https://nabi.saro.me ثم اضغط المسافة أو الإدخال — فيتحوّل من تلقاء نفسه، كما ترى هنا.

فتح الرابط

يحفظ المستند عنوان الرابط فقط؛ وتحدد الصفحة التي تعرض المستند طريقة فتح الروابط.

رابط المرفق

تبقى الملفات غير الصورية على هيئة روابط مرفقات، مثل المثال أدناه.

مرفق: يُحفظ رابطه في المستند.

المحاذاة

إلى اليسار

إلى الوسط

إلى اليمين

لا يمكن تطبيق المحاذاة على العناوين.

القوائم

قائمة نقطية

اكتب - في سطر فارغ ثم اضغط المسافة — تصير قائمة نقطية في الحال.

هذا بند
- Tab / Shift+Tab للإزاحة إلى الداخل والخارج.

قائمة مرقّمة

اكتب 1. في سطر فارغ ثم اضغط المسافة — تصير قائمة مرقّمة.

الأول
الثاني
الثالث

قائمة مهام

اكتب [ ] أو [x] في سطر فارغ ثم اضغط المسافة — تصير قائمة مهام.

هذه المهمة منجزة.
وهذه لم تُنجز بعد.

جدول

يمكن أن تضم الخلايا فقرات وكتلًا متعددة، مع ألوان خلفية لتمييز المحتوى. جرّب تحرير النص والصور مباشرةً في الجدول أدناه.

مواد مرجعية	ملاحظات العمل
صورة ووصفها في خلية واحدة.	فقرات مرنة اضغط Enter لبدء فقرة جديدة، أو Shift+Enter لإضافة سطر جديد داخل الفقرة نفسها.
تغيير خلفية الخلايا إزاحة القائمة باستخدام Tab تحديد عدة خلايا وتطبيق اللون نفسه	انقر لعرض نصائح التحرير يمكن أن تحتوي الخلايا أيضًا على كتل قابلة للطي واقتباسات وشيفرة وفيديو. عند دمج الخلايا، يُحفظ محتوى كل منها بالترتيب.

مواد مرجعية

ملاحظات العمل

صورة ووصفها في خلية واحدة.

فقرات مرنة

اضغط Enter لبدء فقرة جديدة، أو Shift+Enter لإضافة سطر جديد داخل الفقرة نفسها.

تغيير خلفية الخلايا
إزاحة القائمة باستخدام Tab
تحديد عدة خلايا وتطبيق اللون نفسه

انقر لعرض نصائح التحرير

يمكن أن تحتوي الخلايا أيضًا على كتل قابلة للطي واقتباسات وشيفرة وفيديو.

عند دمج الخلايا، يُحفظ محتوى كل منها بالترتيب.

انقر داخل خلية لإظهار لون خلفيتها وأدوات الصفوف والأعمدة. حدّد عدة خلايا لتغيير لونها ومحاذاتها معًا. لتغيير موضع الجدول كاملًا، اختر «تحديد الجدول» ثم استخدم أدوات المحاذاة.

تُحفظ الجداول ذات الألوان أو الكتل المتعددة بصيغة HTML حتى عند الحفظ بصيغة Markdown.

ألوان خلفية الخلايا

تظهر هنا جميع ألوان خلفية الخلايا المدعومة. انقر خلية لتغيير لونها، أو اختر «افتراضي» من أدوات الخصائص لإزالة خلفيتها.

أصفر

yellow

أخضر

green

سماوي

cyan

وردي

pink

بنفسجي

purple

برتقالي

orange

فرز الأعمدة

اضغط معاينة، ثم انقر ترويسة المخزون والسعر واحدة بعد الأخرى.

الطراز	المخزون	السعر	الوزن
NB-7	1,200	349	1.2 kg
NB-9	20,000	99	0.9 kg
NB-12	3,500	1,299	1.4 kg
NB-80	900	8,900	2.1 kg
NB-100	لم يُحدَّد	12,999	2.4 kg

السعر يحتوي على قيم رقمية فقط، لذا يُرتَّب العمود حسب القيمة العددية.

المخزون يحتوي على أرقام ونصوص، لذا يُرتَّب العمود بوصفه سلاسل نصية.

فاصل

اكتب --- ثم اضغط الإدخال — يصير خطًا فاصلًا.

صورة

العرض يُضبط من 30% إلى 100%، وتقف يمينًا أو وسطًا أو يسارًا.

منطقة عائمة

لمحة سريعة

منطقة مساعدة صغيرة للنص والصور والجداول.

الموضع	اليمين
العرض الأقصى	40%

استخدم منطقة عائمة لوضع توضيحات أو مواد صغيرة بجوار النص الرئيسي. في المستند العريض، ينساب هذا النص بجانب المنطقة. انقر داخلها لتحرير النص وإدراج صور أو جداول في المحرر نفسه.

ضع المؤشر داخل المنطقة لفتح أدوات خصائصها. بدّل بين اليسار واليمين، واختر عرضًا أقصى قدره 20 أو 30 أو 40 أو 50% بما يناسب النص. تظل الجداول والصور الملصقة داخل المنطقة أيضًا.

يمكنك أيضًا إحاطة الفقرات المحددة بمنطقة. يترك زر فك المنطقة بجوار العرض محتواها في المستند الرئيسي. تخفي المعاينة الإطار المنقّط الخاص بالتحرير، بينما تتتابع العناصر في عمود واحد في المستندات الضيقة وعند الطباعة.

YouTube

الرفع

جرّب أن تسحب صورة أو ملفًا إلى المحرّر.

لا يرسل هذا العرض التجريبي الملفات إلى خادم حقيقي. اربط أداة رفع بتطبيقك لتخزينها على خادم.

بعد فتح منتقي الصور أو بدء الرفع، يظل الإدراج في الموضع الأصلي إذا حرّكت المؤشر فقط. يؤدي تحرير المستند أثناء الانتظار إلى إلغاء الإدراج وإظهار إشعار. كما يبقى تقدّم الرفع ونتيجته داخل الخلية التي بدأ فيها.

اقتباس

اكتب > في سطر فارغ ثم اضغط المسافة — يصير صندوق اقتباس.
ويمكن أن يمتدّ على أسطر عدة.

شيفرة

اكتب ``` في سطر فارغ ثم اضغط المسافة أو الإدخال — يصير صندوق شيفرة.

واكتب اللغة معها، مثل ```java، ثم المسافة أو الإدخال — فيأخذ الصندوق تلك اللغة.

import { createNabiWith, defaultWings } from 'nabi-note'

const { nabi } = createNabiWith(defaultWings)
const html = nabi.getHtml()

طيّ

الطيّ يتكوّن من عنوان ومحتوى.

ولك أن تحدّد أيُحفظ مطويًّا أم مفتوحًا.

شريط الأدوات

تُجمع أدوات العناوين وتنسيق النص والمحاذاة والقوائم والإدراج والمستند في مجموعات. تظهر الأدوات موسّعة على الحاسوب، وتتوفر أدوات سريعة ولوحة كاملة على الهاتف. تظهر خصائص الجدول أو المنطقة العائمة المحددة أسفل الشريط.

الاختصارات

اضغط Shift مرتين بسرعة لاختيار الأدوات بلوحة المفاتيح. تنقّل في الشريط الموسّع على الحاسوب أو اللوحة الكاملة على الهاتف. استخدم Tab لتغيير المجموعة والأسهم لاختيار الأداة وEnter لتشغيلها.

في نهاية كتلة مثل الاقتباس أو الشيفرة أو الكتلة القابلة للطي، اضغط Enter مرتين بسرعة للخروج. الفاصل الافتراضي بين الضغطتين هو 180ms.

التنسيق التلقائي

مثال	المفتاح	النتيجة
#	مسافة	عنوان
-	مسافة	قائمة نقطية
1.	مسافة	قائمة مرقّمة
[ ] · [x]	مسافة	قائمة مهام
>	مسافة	اقتباس
``` · ```ts	مسافة · إدخال	صندوق شيفرة
---	إدخال	فاصل
https://…	مسافة · إدخال	رابط

دوال الإخراج

الدالة	النتيجة
getHtml()	HTML
getJson()	JSON

يعمل بغير DOM

تحويل NABI TREE إلى HTML لا يحتاج DOM.

يمكن للخادم (Node.js) أيضًا قراءة NABI TREE المحفوظ وإنشاء HTML وفق القواعد نفسها.

ودود للهاتف

واجهة الهاتف — ترتّب أدوات التحرير بما يناسب عرض الشاشة.
التكيف مع لوحة مفاتيح الهاتف — يضبط ارتفاع مساحة التحرير عند فتح لوحة المفاتيح.
أحجام مرنة — تستخدم وحدات rem في التخطيط الرئيسي للتكيف مع التكبير والتصغير.
تعدد اللغات — يمكنك ضبط الإعدادات المحلية والخط بما يناسب اللغة واتجاه النص.

التخصيص

wing من صنعك — إذا احتجت إلى ميزة، يمكنك إنشاء جناح لها وربطه بنفسك.
CSS من صنعك — يمكنك ضبط الألوان الرئيسية والزوايا والمسافات باستخدام رموز --nabi-* لتناسب الوضعين الفاتح والداكن.
مفتوح المصدر — ننشر الشيفرة المصدرية على GitHub ونطوّرها معًا.

اطّلع على التوثيق → nabi.saro.me

HTMLجارٍ تحميل المحرّر…

JSONnabi-treeجارٍ تحميل المحرّر…

التثبيت

npm install nabi-note

الشيفرة

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, makeTranslator,
  defaultWings, mountUpload, mountUploadView, browserFileStore,
  mountFile, mountViewTools, browserHistoryStorage, mountLocalHistory,
  openHistoryPanel,
} from 'nabi-note'
import { mountDiffWing } from 'nabi-note/diff'
import { mountOutline } from 'nabi-note/viewer'

// The box that asks — without it the core answers "no" to everything (plug in your own)
const ask = { message: (t: string) => alert(t), confirm: (t: string) => confirm(t) }

const selected = [
  ...defaultWings,
]
const locale = createLocale('ar')
const { nabi, registry } = createNabiWith(selected, { ask, locale })

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})
const file = mountFile({ nabi, registry, store: browserFileStore(document), locale, name: () => 'note' })
const history = mountLocalHistory({ nabi, storage: browserHistoryStorage(window) })
const diff = mountDiffWing({ nabi, registry, surface: content, locale })

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale, fileSink: upload.take })

const trigger = document.createElement('button')
trigger.type = 'button'
trigger.textContent = makeTranslator(locale).t('outline')
trigger.style.cssText = 'position:fixed;right:1rem;bottom:1rem;z-index:1000'
root.append(trigger)
const outline = mountOutline(content, {
  trigger, locale,
  scrollContainer: () => root.classList.contains('is-fullscreen') ? root : window,
  onChange: ({ items, activeIndex, available, open }) => {
    trigger.hidden = !available
    trigger.setAttribute("aria-expanded", String(open))
  },
})
trigger.onclick = () => outline.toggle()
// Call outline.unmount() when removing the editor

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
// A tool that needs a panel comes back to the host — without this the button is dead
const toolbar = mountToolbar({
  ...shared, root: document.querySelector('#toolbar')!,
  file,
  onFiles: upload.take,
  onHost: (w) => {
    if (w === 'diff') { diff.open(); return }
    if (w !== 'localHistory') return
    openHistoryPanel({
      history, surface: content, locale, sessionId: history.sessionId,
      render: (record) => createNabiWith(selected, { doc: JSON.parse(record.body) }).nabi.getHtml(),
    })
  },
})
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')