ตาราง ​

เลือกแถวและคอลัมน์จากแถบเครื่องมือเพื่อสร้างตาราง เซลล์สามารถมีหลายย่อหน้า รูปภาพ รายการ อ้างอิง โค้ด ส่วนที่ยุบได้ และวิดีโอ วางเคอร์เซอร์ในเซลล์เพื่อแก้ไขแถว คอลัมน์ การผสาน เซลล์หัวตาราง และสีพื้นหลังด้วยเครื่องมือคุณสมบัติด้านล่าง

ลองแก้ไขย่อหน้าและรายการในเซลล์ของตัวอย่างด้านล่าง แล้วลากเลือกหลายเซลล์เพื่อเปลี่ยนสีพื้นหลังพร้อมกัน กด เลือกทั้งตาราง ในเครื่องมือคุณสมบัติเพื่อจัดแนวตัวตารางจากแถบเครื่องมือหลัก

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, boldWing, linkWing,
  headingWing, alignWing, dropCapWing, bulletListWing, orderedListWing,
  taskListWing, quoteWing, detailsWing, codeWing, dividerWing,
  tableWings, imageWing, youtubeWing, uploadWing, mountUpload,
  mountUploadView, mountViewTools,
} from 'nabi-note'

const selected = [
  boldWing,
  linkWing,
  headingWing,
  alignWing,
  dropCapWing,
  bulletListWing,
  orderedListWing,
  taskListWing,
  quoteWing,
  detailsWing,
  codeWing,
  dividerWing,
  ...tableWings,
  imageWing,
  youtubeWing,
  uploadWing,
]
const locale = createLocale('th')
const { nabi, registry } = createNabiWith(selected, { 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(),
})

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')!, onFiles: upload.take })
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')

const selected = wings().use('table').build()

ต้องลงทะเบียนปีกที่ต้องการใช้ภายในเซลล์ด้วย หากตัวแก้ไขใช้ปีกพื้นฐานทั้งหมด ให้ประกอบด้วย wings().allBasic()

การเขียนภายในเซลล์ ​

Enter ในรายการและโค้ดเป็นไปตามกฎการป้อนของแต่ละบล็อก แม้จะลดระยะเยื้องของโค้ดต่อไม่ได้ Shift+Tab ก็จะไม่ย้ายไปเซลล์ก่อนหน้า การกด Backspace หรือ Delete ที่ต้นหรือท้ายเซลล์จะไม่ผสานกับเซลล์ข้างเคียงหรือย่อหน้านอกตาราง

การวางและการแทรกรูปภาพหรือบล็อกจะอยู่ในเซลล์ที่เริ่มดำเนินการ ไม่สามารถแทรกบล็อกหรือวางเมื่อการเลือกข้ามขอบเขตเซลล์ได้ ไม่สามารถซ้อนตารางหรือ พื้นที่ลอย ภายในเซลล์ เมื่อนำเข้าหรือวางโครงสร้างเช่นนี้ เนื้อหาภายในจะถูกคลายออกตามลำดับ

เซลล์ปกติสามารถมีหัวเรื่องได้ แต่รูปแบบหัวเรื่องจะไม่ใช้กับเซลล์หัวตาราง เมื่อแปลงเป็นเซลล์หัวตาราง หัวเรื่องภายในจะกลายเป็นย่อหน้าปกติ โดยคงข้อความและรูปแบบอื่นไว้

สีพื้นหลังเซลล์ ​

สีพื้นหลังใช้กับเซลล์เดียวหรือช่วงสี่เหลี่ยมที่เลือกด้วยการลาก แม้เลือกข้อความเพียงบางส่วน พื้นหลังของทั้งเซลล์ที่มีข้อความนั้นก็จะเปลี่ยน สีอ่อนจะปรับตามธีมสว่างและมืด หากเซลล์ที่เลือกมีสีต่างกัน จะไม่แสดงว่าสีใดสีหนึ่งถูกเลือกอยู่

คุณสามารถเปลี่ยนสีด้วยคำสั่งโดยคงการเลือกเซลล์ปัจจุบันไว้ได้เช่นกัน

nabi.applyCommand('setCellColor', { bg: 'cyan' })

ค่าที่ใช้ได้คือ yellow, green, cyan, pink, purple และ orange หากต้องการคืนพื้นหลังเริ่มต้น ให้เลือก ค่าเริ่มต้น ในเครื่องมือคุณสมบัติหรือส่งสตริงว่าง

nabi.applyCommand('setCellColor', { bg: '' })

การลบเนื้อหา การตัด และการล้างรูปแบบจะไม่ล้างสีพื้นหลังเซลล์ การผสานใช้สีของเซลล์ซ้ายบน ส่วนการแยกจะให้เซลล์ที่สร้างใหม่มีสีเดียวกัน แถวและคอลัมน์ที่เพิ่มใหม่เริ่มด้วยพื้นหลังเริ่มต้น การเปลี่ยนสีพื้นหลังรองรับเลิกทำและทำซ้ำ

การจัดแนวเนื้อหาเซลล์และตาราง ​

เมื่อเคอร์เซอร์อยู่ในเซลล์ การจัดแนวจะใช้กับย่อหน้าหรือรูปภาพภายใน หากเลือกหลายเซลล์ จะใช้ร่วมกันกับย่อหน้าและวัตถุที่จัดแนวได้ภายในเซลล์เหล่านั้น โดยไม่รวมโค้ด สถานะเครื่องมือหัวเรื่อง การจัดแนว และอักษรต้นขนาดใหญ่จะอิงตามย่อหน้าภายในที่เลือกจริงด้วย หากค่าของย่อหน้าที่เลือกต่างกัน จะไม่แสดงเป็นค่าเดียว

หากต้องการจัดแนวตัวตาราง ให้กด เลือกทั้งตาราง ในเครื่องมือคุณสมบัติ แล้วใช้ปุ่มจัดแนวบนแถบเครื่องมือหลัก ใช้การจัดแนวแบบเดียวกันได้เมื่อวางเคอร์เซอร์ก่อนหรือหลังย่อหน้าที่ครอบตารางและมีกรอบเส้นประปรากฏขึ้น กรอบนี้เพียงบอกเป้าหมาย ไม่ได้เปลี่ยนเคอร์เซอร์เป็นการเลือกทั้งตาราง

nabi.applyCommand('selectTable')
nabi.applyCommand('setAlign', { value: 'c' })

การเพิ่มหรือลบแถวและคอลัมน์ การผสาน และการแยกทำงานโดยอิงเซลล์ที่เลือก การผสานคงบล็อกของแต่ละเซลล์ตามลำดับแถว การแยกเก็บเนื้อหาไว้ในเซลล์เดิมและปล่อยเซลล์อื่นว่าง

การคัดลอกและบันทึก ​

เมื่อคัดลอกหลายเซลล์ที่เลือก จะคัดลอกช่วงสี่เหลี่ยมที่แสดงจนถึงเซลล์สุดท้าย HTML และรูปแบบคลิปบอร์ดภายในคงเซลล์ว่าง การผสาน บล็อก รูปแบบข้อความ และสีพื้นหลัง ข้อความล้วนแยกเซลล์ด้วยแท็บและการขึ้นบรรทัดใหม่ พร้อมเก็บการขึ้นบรรทัดใหม่ระหว่างบล็อกภายในเซลล์และที่อยู่รูปภาพกับวิดีโอ การตัดล้างเฉพาะเนื้อหาของเซลล์ที่เลือก และย้อนกลับได้ด้วยเลิกทำครั้งเดียว

เมื่อเคอร์เซอร์อยู่ก่อนหรือหลังตารางและกรอบเส้นประปรากฏ การคัดลอกและตัดจะใช้กับทั้งย่อหน้าที่ครอบตาราง การตัดจะลบย่อหน้าและตารางพร้อมกันหลังจากเขียนลงคลิปบอร์ดสำเร็จ การตัดหรือลบตารางในพื้นที่ลอยจะคงพื้นที่ลอยด้านนอกไว้

การบันทึกเป็น JSON และ HTML คงบล็อกและสีพื้นหลังของเซลล์ ตารางทั่วไปส่งออกเป็นตาราง Markdown ส่วนตารางที่มีหลายบล็อกหรือสีพื้นหลังจะคงไว้เป็น HTML เพื่อรักษาเนื้อหา ใน HTML ชื่อสีเซลล์เก็บอยู่ในแอตทริบิวต์ data-nabi-cell-color ของ td หรือ th สไตล์สีพื้นหลังที่กำหนดตามอำเภอใจใน HTML ภายนอกจะไม่ถูกนำเข้าเป็นสีพื้นหลังเซลล์

หากต้องการเรียงลำดับคอลัมน์ในหน้าที่เผยแพร่ ให้บันทึกตารางเป็นแบบเรียงลำดับได้และเชื่อม attachViewer() จาก nabi-note/viewer ตารางที่มีเซลล์ผสานไม่รองรับการเรียงลำดับคอลัมน์

สไตล์ CSS ​

ตกแต่งตารางด้วย .nabi-content table และเซลล์ด้วย .nabi-content :is(th, td) ใช้แถบสีสลับและพื้นหลังหัวตารางเฉพาะเซลล์ที่ไม่มีสี เพื่อไม่ให้ทับสีพื้นหลังที่กำหนดไว้

.article-body table { inline-size: 100%; border-collapse: collapse; }
.article-body :is(th, td) { padding: .6rem .75rem; border: 1px solid var(--nabi-line); }
.article-body th { font-weight: 700; }
.article-body th:not([data-nabi-cell-color]) { background: var(--nabi-soft); }
.article-body tr:nth-child(even) td:not([data-nabi-cell-color]) {
  background: color-mix(in srgb, var(--nabi-soft) 45%, transparent);
}

เปลี่ยนสีพื้นหลังเซลล์โดยตรงผ่านตัวแปร CSS ที่มีชื่อสี เช่น --nabi-cell-yellow โหลด CSS ด้านล่างหลัง CSS ของแพ็กเกจ และกำหนดคลาส table-note กับค่า data-nabi-theme ของธีมปัจจุบันโดยตรงบนองค์ประกอบ .nabi ของตัวแก้ไขหรือ .nabi-content ของหน้าที่เผยแพร่

.table-note:is(.nabi, .nabi-content)[data-nabi-theme="light"] {
  --nabi-cell-cyan: #e2f4f7;
}
.table-note:is(.nabi, .nabi-content)[data-nabi-theme="dark"] {
  --nabi-cell-cyan: #183b43;
}

หากเชื่อม viewer แล้ว ให้คงปุ่ม .nabi-sort ไว้ การบังคับทับ position หรือ padding ด้านขวาของเซลล์อาจทำให้ซ้อนกับปุ่มเรียงลำดับได้