รูปภาพ ​

ใส่ที่อยู่รูปภาพและปรับความกว้างกับการจัดแนว โดยค่าเริ่มต้นอนุญาตเฉพาะ http:, https: หรือพาธของไซต์เดียวกัน และรูปภาพใหม่จะเริ่มด้วยการจัดกึ่งกลางและความกว้าง 60%

ความกว้างจะถูกเก็บได้เฉพาะตามขั้นที่กำหนด และการจัดแนวจะเก็บในย่อหน้าที่ห่อรูปภาพ หากต้องการใช้ตัวอย่าง blob: และ data:image/... ต้องอนุญาต URL ภายในเครื่องอย่างชัดเจนทั้งที่ image wing และการประกอบเอดิเตอร์ ไม่อนุญาต URL ข้อมูล SVG

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, tableWings, imageWing,
  youtubeWing, mountViewTools,
} from 'nabi-note'

const selected = [
  ...tableWings,
  imageWing,
  youtubeWing,
]
const locale = createLocale('th')
const { nabi, registry } = createNabiWith(selected, { locale })

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

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

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

wing นี้ใส่ที่อยู่ลงในเอกสารเท่านั้น ไม่ได้ส่งไฟล์ หากต้องการส่งไฟล์ไปยังเซิร์ฟเวอร์ ให้เชื่อมต่อ wing อัปโหลด

เชื่อมต่อตัวเลือกรูปภาพ ​

ใช้ panels.img ใน mountToolbar() เพื่อแทนที่หน้าต่างป้อน URL เริ่มต้นของปุ่มรูปภาพด้วยตัวเลือกรูปภาพของบริการคุณ คีย์คือชื่อสล็อตของแถบเครื่องมือ ส่วนเครื่องมือที่ไม่ได้ระบุจะยังใช้หน้าต่างเริ่มต้น

mode: 'modal' เปิดหน้าต่างบนพื้นหลังโปร่งแสงที่คลุมทั้งหน้า ส่วน mode: 'inline' เปิดใกล้ปุ่มเครื่องมือบนคอมพิวเตอร์และแสดงเต็มหน้าจอบนมือถือ ความกว้างของพื้นที่แสดงผลและ --nabi-mobile-breakpoint เป็นตัวกำหนดการแสดงผลแบบมือถือ หากข้ามเกณฑ์นี้ขณะเปิดแผง inline แผงจะปิด

ทั้งสองโหมดให้เพียง root ว่าง โดยไม่สร้างชื่อ ช่องป้อนข้อมูล หรือปุ่ม เพิ่ม HTML หรือ UI ของคุณใน render เชื่อมปุ่มปิดกับ close() และการเลือกรูปภาพกับ insertImage(url, 'pointer') การตั้งค่าแบบฟังก์ชันเดิม (img: renderer) ยังคงใช้วิธีแสดงผลเดิม

import { mountToolbar } from 'nabi-note'

const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  panels: {
    img: {
      mode: 'inline',
      render: ({ root, signal, close, insertImage }) =>
        mountMyImagePicker(root, {
          signal,
          onClose: close,
          onSelect: (url: string) => insertImage(url, 'pointer'),
        }),
    },
  },
})

mountMyImagePicker เป็นฟังก์ชันที่คุณสร้างในบริการของคุณ โดยสร้าง UI แบบซิงโครนัสภายใน root ที่ได้รับและคืนฟังก์ชันสำหรับเก็บกวาด เชื่อมต่อ signal กับงานอะซิงโครนัส เช่น การโหลดรายการรูปภาพหรือการอัปโหลด แล้วส่ง URL ของรูปภาพที่เลือกให้ onSelect API นี้ไม่ส่งไฟล์ และยังคงใช้กฎการอนุญาต URL รูปภาพเดิม

insertImage(src, by?) เทียบเท่ากับ run('insertImage', { src }, by) รวมถึงค่าที่คืนและกฎการคืนค่าการเลือก หากไม่ระบุ by จะใช้ 'keyboard' อย่าสร้าง render เป็นฟังก์ชัน async

เมื่อปิดหน้าต่างหรือถอดแถบเครื่องมือ signal จะถูกยกเลิกและฟังก์ชันเก็บกวาดจะถูกเรียก run() ปิดหน้าต่างแล้วใช้คำสั่งหนึ่งครั้งกับส่วนที่เลือกซึ่งบันทึกไว้ตอนเปิด หากหน้าต่างปิดไปแล้วหรือเนื้อหาเอกสารเปลี่ยนไปหลังเปิด จะคืน false โดยไม่เรียกใช้คำสั่ง

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

รูปแบบ CSS ​

จัดรูปแบบรูปภาพด้วย .nabi-content img รักษาความกว้างและการจัดแนวที่บันทึกไว้ แล้วเปลี่ยนเฉพาะรูปลักษณ์ เช่น เส้นขอบหรือเงา

.article-body img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.dark .article-body img { box-shadow: 0 8px 24px rgb(0 0 0 / 35%); }

ให้คงกฎพื้นฐานของ max-inline-size, block-size, ความกว้าง และการจัดแนวไว้ ขนาดรูปภาพเป็นค่าที่เก็บในเอกสาร ดังนั้นการกำหนดตายตัวด้วย CSS อาจขัดกับความกว้างที่ผู้เขียนเลือก