getLeaf中的索引与getText中的索引不同

时间:2019-04-15 07:15:18

标签: quill

我在编辑器中编写了一个简单的html文本,并将编辑器设置得有点窄,以使文本行能够自动换行

<input class="chosen-select-zone-start-end grey-placeholder" id="start-zone-flowInput" list='start-zone-list' placeholder="Select Start Zone"  autocomplete="on" />
<datalist id="start-zone-list">
  <option>a</option>
  <option>b</option>
</datalist>

但getLeaf(index)中的索引外观与getText(index,length)不同

<p>Some initial <strong>bold</strong> text</p>

quill.getText()="Some initial bold text\n" quill.getText(14,4)="old " //equals quill.getText().substr(14,4) quill.getLeaf(14)[0].text="bold" //yes,it is right quill.getLeaf(13)[0].text="Some initial " // WHY? quill.getBounds(14)={bottom: 47.79999923706055, height: 14.39999771118164, left: 24, right: 24, top: 33.400001525878906, width: 0} quill.getBounds(13)={ bottom: 29.400001525878906, height: 14.400001525878906, left: 84, right: 84, top: 15, width: 0 } 是否应与quill.getLeaf(13)相同?
PS:quill.getLeaf(14)的索引看起来与quill.getBounds(index)

请检查代码笔
https://codepen.io/minzojian/pen/ROLyeZ

1 个答案:

答案 0 :(得分:0)

它看起来像:

  • getText将文本返回到index
  • right
  • getLeaf将印迹返回到index
  • left

例如,给定此文档:

[
  {
    "insert": "a"
  },
  {
    "insert": "b",
    "attributes": { "bold": true }
  },
  {
    "insert: "c",
    "attributes": { "italic": true }
  }
]

然后您将得到以下结果:

quill.getLeaf(0) // a (the 0-index is a slightly special case)
quill.getText(0) // "abc"

quill.getLeaf(1) // a
quill.getText(1) // "bc"

quill.getLeaf(2) // b
quill.getText(2) // "c"

quill.getLeaf(3) // c
quill.getText(3) // ""