CDN 的使用方法

在不方便安装包的静态页面中，可以从 CDN 载入浏览器构建和 CSS。下面的 demo 会在站点构建时读取包版本，并通过全局 NabiNote 对象创建编辑器。

把下面的代码存成，用浏览器打开就能立刻看到效果。

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

  // 除了上传以外的全部翅膀。
  // 字体只留无衬线和衬线两种。
  // 各系统支持的字体不一样，等宽体、手写体要单独 import 才能在所有平台上认出来。
  // 详情见"字体"文档。
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

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

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

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

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

  nabi.setHtml('')

  // 值变化时的回调例子
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

NABI NOTE 注意事项

部署代码中，请把 CSS 和浏览器 JavaScript 固定到同一个版本。像 latest 这样不写版本的 URL，可能会在新版本发布时改变行为。
浏览器 bundle 通过 window.NabiNote 暴露 root API。nabi-note/ssr、nabi-note/viewer、nabi-note/diff 不会作为单独的全局 bundle 提供。
本 demo 的文件保存和本地历史都在用户浏览器中运行。若要服务器保存或账号同步，请把 getJson() 输出发送到你的应用 API。
上传需要 upload wing、真实上传函数，以及必要的图片或链接 wing。上传服务器负责文件验证。
浏览器构建会在内部连接 HTML parser。setHtml()、打开 HTML 文件和粘贴 HTML 都不需要 parser 选项或私有 API。

CDN 载入只改变库的载入方式。存储格式和输入验证与 npm 包相同，也请参阅基本用法。

CDN 的使用方法 ​

NABI NOTE 注意事项 ​

CDN 的使用方法

NABI NOTE 注意事项