scroll-to-head

滚动到某个标题。如下图，可以获取编辑区域的所有标题，可以通过 API 让编辑器滚动到某个标题。

Scroll To Head - 图1

PS：该功能从 v4.5.0 开始支持。

获取所有标题

通过 onCatalogChange 可以实时获取编辑器所有标题，标题变化即可触发该回调函数。

  1. editor.config.onCatalogChange = function (headList) {
  2.     /*
  3.         headList 格式
  4.         [
  5.             { 
  6.                 id: "eold9", // 标题 id
  7.                 tag: "H1",
  8.                 text: "标题文字"
  9.             },
  10.             { ... },
  11.             { ... }
  12.         ]
  13.     */
  15.     // 然后自己渲染标题 UI
  16. }

滚动某个标题

执行 editor.scrollToHead(headId) 即可。 其中 headId 即上面获取的 id 。

回显内容时

通过 editor.txt.html() 获取的 html 内容，标题也是带着 id 的，格式如下。

  1. <h1 id="eold9">标题一</h1>
  2. <p>正文</p>
  3. <h2 id="nh339">标题二</h2>
  4. <p>正文</p>
  5. <h3 id="5mgwk">标题三</h3>
  6. <p>正文</p>

在现实这些内容时，可以使用这些 id 来做锚点，实现 scroll to head 的功能。