Разрешить выход за промежуток в конце - PullRequest
Новая
       30

Разрешить выход за промежуток в конце

0 голосов
/ 27 мая 2018

Я пытаюсь написать простой текстовый редактор, используя contenteditable.В этом MCVE он имеет только одну функцию: выделенному тексту выделяется красная подсветка. †

Код, который я использую, находится здесь: 

function createSpan() {
    let selection = document.getSelection();
    let range = selection.getRangeAt(0);
    let element = document.createElement("span");
    element.className = "inline-equation";
    range.surroundContents(element);

    let newRange = new Range();
    newRange.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(newRange);
}

$("button").click(createSpan)
.inline-equation {
  background-color: red;
  display: inline-block;
}

#editor {
  width: 100%;
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Create Span
</button>
<div id="editor" contenteditable="true">
This is a contenteditable area.
</div>

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

  1. Запустите фрагмент стека выше
  2. Выберите текст где-то посередине до конца, затем нажмите Создать диапазон
  3. Введите новый текст в конце строки

Этот новый текст также выделен красным, даже если вы пытаетесь выйти из вставленного span, нажав клавишу со стрелкой вправо.

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

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

Лучший пример, который я могу привестито, что я хотел бы, это встроенные уравнения Microsoft Word.Обратите внимание, что в приведенном ниже GIF уравнение действует как отдельный объект, из которого я могу перемещаться, чтобы можно было печатать обычный текст справа от него.Вот как я хотел бы, чтобы мой span действовал.

https://i.imgur.com/QEcDhHi.gifv

Я пытался заменить span на div наinline-block форматирование, чтобы увидеть, повлияло ли это на поведение, но это не так.Как мне добиться нужного эффекта?

† В конкретном случае «выделение» на самом деле обозначает математику в формате LaTeX, которая отображается позже.Я пишу то, что по сути является редактором для проприетарного языка разметки, который поддерживает встроенный LaTeX.

1 Ответ

0 голосов
/ 30 мая 2018

Проблема в том, что вам нужно что-то редактируемое в конце, чтобы это работало.Есть много существующих потоков SO для того же.Вы можете увидеть ниже

Почему мой Contenteditable курсор переходит в конец в Chrome?

contenteditable положить каретку за пределами вставленного диапазона

contenteditable с вложенным промежутком.У кого есть фокус?

Сосредоточение на вложенном contenteditable элементе

Объединяя знания из потока выше, самое простое, что я мог придумать, это добавить ниже обработчик keyup

$("#editor").on('keyup',(e) => {
  var editor = $("#editor").get(0)
  var cn = editor.childNodes;

  if (cn[cn.length - 1].nodeType !== Node.TEXT_NODE)
  {
     empty = document.createTextNode( '\uFEFF' );
     editor.appendChild(empty);
  }

 if (cn[0].nodeType !== Node.TEXT_NODE)
  {
     empty = document.createTextNode( '\uFEFF' );
     editor.prepend(empty);
  }
})

Что гарантирует наличие одного текстового узла для выхода из div.Вы можете сделать то же самое для начального div, если хотите.Ниже приводится JSFiddle для того же

https://jsfiddle.net/4tcLr0qa/1/

Edit content outside

...