Как вы форматируете строку текста в div при нажатии?

Question

Используя jQuery или прямой javascript, как вы идентифицируете / выбираете / выбираете одну строку текста из div с включенным contentEditable и добавляете форматирование только к этой строке текста?

В настоящее время у меня есть div с contentEditable, установленным в true, что позволяет пользователю редактировать содержимое div, добавляя / удаляя текст по своему усмотрению. Однако я хочу, чтобы пользователь также мог дважды щелкнуть любую строку текста в элементе div и пометить эту строку другим стилем форматирования. (т. Е. Заключить полную строку текста в промежутки, а затем оформить диапазон. Обратите внимание, что я могу легко оформить диапазон. Моя проблема заключается в том, чтобы определить строку текста, на которую щелкнул пользователь, и заключить ее в теги диапазона)

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

Answer 1

Плагин jQuery fieldSelection позволит вам получить текст, выбранный пользователем.

Если обернуть выбранную строку интервалом, обычный метод jQuery $ (). Wrap () должен помочь.

Answer 2

Для Firefox вы можете использовать:

// This will give the first selection:
var range = window.getSelection().getRangeAt(0);
var txt = range.toString();
var spn = document.createNode('span');
spn.innerHTML = txt;
// Here you can apply style to spn
range.surrondContents(spn); // It will surround your selected text

Вот ссылка для получения дополнительной помощи: https://developer.mozilla.org/en/DOM/range.surroundContents

Для IE вы можете использовать: Вы можете использовать тот же процесс в IE тоже .. используя диапазон и выбор ..

Надеюсь, это решит вашу проблему.