Как мне установить выбор после текстового поиска? - PullRequest
1 голос
/ 26 апреля 2019

Я пытаюсь добавить функцию поиска в Quill и хочу выделить найденный текст.У меня возникают проблемы с получением индекса диапазона для текста, который он находит, и, скорее всего, я не использую правильный подход.

До сих пор я получал текст с помощью getContents () и могу находить совпадения путем итерациичерез линии.Тем не менее, я не смог найти правильную позицию индекса для setSelection ().Вторая проблема заключается в том, что я хочу, чтобы окно прокручивалось до места, где был выбран выбор, и оно не прокручивалось в поле просмотра.

...
myKeyPhrases = ['obvious', 'orange', 'apple'];

var myDelta = editor.getContents();
myDelta.eachLine((line, attributes, i) => {

    mytext = line.filter((op) => typeof op.insert === 'string').map((op) => op.insert).join('');
    mytext = mytext.toLowerCase();

    ndx = isKeyPhraseFound(mytext, myKeyPhrases); 
    if (ndx >= 0){
        // The code finds the matches OK to here.
        // The next 4 lines don't get the correct range and scroll.
        index = i;
        editor.focus();
        editor.setSelection(index, 1, Quill.sources.USER); 
        editor.scrollIntoView();
        return index;
    }
});

Мои желаемые результаты состоят в том, что будет найдено найденное совпадение текста и чтоокно будет прокручиваться так, чтобы выбор отображался.Фактические результаты состоят в том, что выбран неправильный текст, и окно не прокручивается для просмотра выбора.

1 Ответ

0 голосов
/ 03 мая 2019

Вы в основном там.Я подозреваю, что ваша проблема заключается в том, что вы фильтруете блочные элементы, что аналогично методу Quill getText.Согласно документам:

Нестроковое содержимое опущено, поэтому длина возвращаемой строки может быть короче, чем у редактора, как возвращено getLength.

Этопоскольку нетекстовые элементы обычно имеют длину 1, поэтому для каждого из них, которые вы пропускаете, ваш индекс будет дрейфовать на 1.

Простой обходной путь для этого состоит в замене любых нетекстовых элементов новой строкойсимвол, имеющий длину 1, и дополнительное преимущество в том, что поиск по нему завершается неудачно (если только вы не разрешите пользователям выполнять поиск с символами новой строки - возможно, тогда вы сможете выбрать другой специальный символ, такой как управляющий символ).

СледующееМетод должен возвращать текстовое представление вашего Quill в текстовом формате, длина которого соответствует quill.getLength, и поэтому должен иметь возможность поиска с использованием любого метода текстового поиска JavaScript, который вы хотите (например, indexOf для простого поиска).

function textContents() {
  return quill.getContents().ops
    .reduce((text, op) => {
      if (typeof op.insert === 'string') {
        // If the op is a string insertion, just concat
        return text + op.insert;
      } else {
        // Otherwise it's a block. Represent this as a newline,
        // which will preserve the length of 1, and also prevent
        // searches matching across the block
        return text + '\n';
      }
    }, '');

}

Вот пример: https://codepen.io/alecgibson/pen/GLVzPb

...