NABI NOTE
Tài liệu

Sử dụng CDN ​

Trên trang tĩnh khó cài đặt gói, bạn có thể tải bundle trình duyệt và CSS của NABI NOTE từ CDN. Ví dụ dưới đây tự đọc phiên bản gói khi build để tạo địa chỉ, rồi lắp ráp trình soạn thảo bằng đối tượng toàn cục NabiNote.

Lưu mã bên dưới thành rồi mở trong trình duyệt — bạn sẽ thấy nó hoạt động ngay.

<!doctype html>
<html lang="vi">
<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; }
    /* Chiều cao tối thiểu của trình soạn thảo — tránh trông như ô một dòng khi tải lần đầu. Bạn có thể thay đổi tự do. */
    #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')

  // Mọi wing trừ tải tệp lên.
  // Trong các kiểu chữ, chỉ giữ sans và serif.
  // Các hệ thống hỗ trợ phông khác nhau, vì vậy hãy nạp riêng web font cho mono và chữ viết tay.
  // Xem trang “Kiểu chữ” trước khi mọi nền tảng đều nhận biết chúng.
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // Callback mẫu khi giá trị thay đổi
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

Điều cần kiểm tra trong NABI NOTE ​

  • Trong mã triển khai, dùng cùng một phiên bản cố định cho CSS và JavaScript trình duyệt. Địa chỉ không có phiên bản như latest có thể thay đổi hành vi khi có bản phát hành mới.
  • Bundle trình duyệt cung cấp API gốc dưới dạng window.NabiNote. Không có bundle toàn cục riêng cho nabi-note/ssr, nabi-note/viewer và nabi-note/diff.
  • Việc lưu tệp và lịch sử cục bộ trong ví dụ chạy trong trình duyệt của người dùng. Nếu cần lưu trên máy chủ hoặc đồng bộ tài khoản, hãy gửi kết quả getJson() đến API của ứng dụng.
  • Khi thêm tải lên, hãy kết nối không chỉ wing upload mà cả hàm gửi thực tế và các wings hình ảnh hoặc liên kết cần thiết. Máy chủ tải lên chịu trách nhiệm kiểm tra tệp.
  • Bundle trình duyệt đã tích hợp HTML parser. Vì vậy setHtml(), mở tệp HTML và dán HTML không cần tùy chọn parser riêng hay API riêng tư.

CDN chỉ khác ở cách tải. Định dạng lưu và kiểm tra đầu vào giống khi cài qua npm, vì vậy hãy xem cả cách dùng cơ bản.