การใช้ CDN

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

บันทึกโค้ดด้านล่างเป็น แล้วเปิดในเบราว์เซอร์ — ดูการทำงานได้ทันที

<!doctype html>
<html lang="th">
<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')

  // ทุกปีกยกเว้นการอัปโหลด
  // ในบรรดาแบบอักษร เก็บไว้เฉพาะ sans และ serif
  // ระบบต่างกันรองรับแบบอักษรต่างกัน จึงต้องนำเข้าเว็บฟอนต์สำหรับ mono และ cursive แยกต่างหาก
  // ก่อนทุกแพลตฟอร์มจะรู้จัก ดูรายละเอียดที่หน้า “แบบอักษร”
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

  var made = N.createNabiWith(wings, {
    locale: 'th',
    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: 'th' })
  N.mountPickedMark({ nabi: nabi, surface: surface })

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

  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: 'th'
  })

  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: 'th', 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: 'th' })

  nabi.setHtml('')

  // ตัวอย่าง callback เมื่อค่าเปลี่ยน
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

สิ่งที่ต้องตรวจสอบใน NABI NOTE

ในโค้ดที่นำไปเผยแพร่ ให้ใช้เวอร์ชันที่ตรึงไว้เดียวกันสำหรับ CSS และ JavaScript ของเบราว์เซอร์ ที่อยู่ที่ไม่มีเวอร์ชัน เช่น latest อาจทำให้การทำงานเปลี่ยนในวันที่มีรุ่นใหม่ออกมา
บันเดิลสำหรับเบราว์เซอร์ให้ API รากเป็น window.NabiNote ไม่มีบันเดิลส่วนกลางแยกต่างหากสำหรับ nabi-note/ssr, nabi-note/viewer และ nabi-note/diff
การบันทึกไฟล์และประวัติในเครื่องในตัวอย่างทำงานภายในเบราว์เซอร์ของผู้ใช้ หากต้องการบันทึกบนเซิร์ฟเวอร์หรือซิงก์บัญชี ให้ส่งผลลัพธ์ของ getJson() ไปยัง API ของแอปพลิเคชัน
เมื่อเพิ่มการอัปโหลด ให้เชื่อมต่อไม่เพียง wing upload แต่รวมถึงฟังก์ชันส่งจริงและ wings รูปภาพหรือลิงก์ที่จำเป็นด้วย เซิร์ฟเวอร์อัปโหลดเป็นผู้รับผิดชอบการตรวจสอบไฟล์
บันเดิลสำหรับเบราว์เซอร์มี HTML parser อยู่ภายในอยู่แล้ว ดังนั้น setHtml(), การเปิดไฟล์ HTML และการวาง HTML จึงไม่ต้องมีตัวเลือก parser แยกหรือ API ส่วนตัว

CDN ต่างกันเพียงวิธีโหลด รูปแบบการบันทึกและการตรวจสอบอินพุตเหมือนกับการติดตั้งผ่าน npm ดังนั้นโปรดดู การใช้งานพื้นฐาน ด้วย

การใช้ CDN ​

สิ่งที่ต้องตรวจสอบใน NABI NOTE ​

การใช้ CDN

สิ่งที่ต้องตรวจสอบใน NABI NOTE