Разные стили текста прямо в форме

@SanychBY · Регистрация: 04.06.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток.
Как реализовать одну вещь. Например в неком поле(тут скорее подойдет див с возможностью редактирования в нем) мы набрали текст "корабли лавировали лавировали, да не вылавировали" и предположим мы хотим выделить "лавировали лавировали" жирным. Мы выделяем его мышью и кликаем по соответствующей кнопке. И сразу в диве должны получить

"корабли лавировали лавировали, да не вылавировали"

Получается мы должны взять выделенный текст в span с соответствующим классом, но сам он(span) не должен отображаться, пользователь должен видеть только измененный стиль выделенного текста. Притом если он нажимает backspace удаляться должен только текст, а не span пока в нем заключен некий текст.

Спасибо

@koorya · 22.08.2013, 18:24

Решение навряд ли напишу, но идея мне кажется такой.
Клавиатура и отображение - это разные вещи. В голове держится истинный, голый текст. Этот голый текст пополняется и редактируется с клавиатуры, как сами написали: див с возможностью редактирования. При выделении запоминаются начало и конец выделения для голого текста, а когда выделяешь текст мышью, выделяется голый текст. Если выбирается особое оформление для выделенного, то из тех заранее запомненных начала и конца, или длины, и стиля выделения составляется объект, добавляемый в список стилей.
Для отображения написанного, из голого текста и списка стилей составляется новая строка и помещается в другой див для отображения.
Моя проблема в том, чтобы определить начало выделения. И, наверное, будет морока с достойным редактированием с клавиатуры. Например, перемещение по строкам...

Я еще подумаю, возможно будет идея.

@SanychBY · 22.08.2013, 18:39 **[ТС]**

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

@koorya · 22.08.2013, 18:44

Мне кажется, вы поняли слишком буквально выражение "в голове".

@SanychBY · 22.08.2013, 18:50 **[ТС]**

Сообщение от koorya

Мне кажется, вы поняли слишком буквально выражение "в голове".

Вопрос остается прежним.
Спасибо, что откликнулись.

@koorya · 22.08.2013, 19:00

Пока только идеи: мозговой штурм.
Можно предложить такую дикость. При печати нового символа создается объект, с прикрученными на него событиями мыши. Буквы, выходит, обрамлялись бы обессиленным тегом div с id и событиями. Это все чтобы имитировать и выделение.
В общем еще подумаю. Мозговой штурм. И вы штурмуйте.
Чего-нибудь сообразим. Штука не должна быть сложной.

@SanychBY · 22.08.2013, 19:03 **[ТС]**

Сообщение от koorya

Штука не должна быть сложной.

Возможно, только вот я не очень в js.

Добавлено через 57 секунд
если что и пишу, то использую джейклери,да и то по банальностям, скрыть что нить, показать при щелчке.

@Qwertiy · 23.08.2013, 09:17

Можно взять уже готовый и пользоваться. Замечательно гуглится по jquery editor.

@SanychBY · 23.08.2013, 13:40 **[ТС]**

Qwertiy, Огромное спасибо. Но я не очень люблю все стороннее. Тем более когда не понимаешь как это работает. Хотя бы принцип знать.

@koorya · 24.08.2013, 09:26

Объемная работа. Я пасую. Едва ли у меня выйдет функциональней.

@SanychBY · 24.08.2013, 11:27 **[ТС]**

koorya, ладно. Воспользуюсь плагином.

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532

	Разные стили текста прямо в форме 16.08.2013, 20:14. Показов 1261. Ответов 10 Метки нет (Все метки) Доброго времени суток. Как реализовать одну вещь. Например в неком поле(тут скорее подойдет див с возможностью редактирования в нем) мы набрали текст "корабли лавировали лавировали, да не вылавировали" и предположим мы хотим выделить "лавировали лавировали" жирным. Мы выделяем его мышью и кликаем по соответствующей кнопке. И сразу в диве должны получить "корабли лавировали лавировали, да не вылавировали" Получается мы должны взять выделенный текст в span с соответствующим классом, но сам он(span) не должен отображаться, пользователь должен видеть только измененный стиль выделенного текста. Притом если он нажимает backspace удаляться должен только текст, а не span пока в нем заключен некий текст. Спасибо 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	22.08.2013, 18:24
	Решение навряд ли напишу, но идея мне кажется такой. Клавиатура и отображение - это разные вещи. В голове держится истинный, голый текст. Этот голый текст пополняется и редактируется с клавиатуры, как сами написали: див с возможностью редактирования. При выделении запоминаются начало и конец выделения для голого текста, а когда выделяешь текст мышью, выделяется голый текст. Если выбирается особое оформление для выделенного, то из тех заранее запомненных начала и конца, или длины, и стиля выделения составляется объект, добавляемый в список стилей. Для отображения написанного, из голого текста и списка стилей составляется новая строка и помещается в другой див для отображения. Моя проблема в том, чтобы определить начало выделения. И, наверное, будет морока с достойным редактированием с клавиатуры. Например, перемещение по строкам... Я еще подумаю, возможно будет идея. 0

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
	22.08.2013, 18:39 [ТС]
	koorya, мало держать в голове, это как то еще надо запомнить, что бы сохранить в бд, что бы потом вывести. Иногда на сайтах можно встретить такие формы о которых я говорю. Они похожи как уменьшенный ворд. 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	22.08.2013, 18:44
	Мне кажется, вы поняли слишком буквально выражение "в голове". 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	22.08.2013, 19:00
	Пока только идеи: мозговой штурм. Можно предложить такую дикость. При печати нового символа создается объект, с прикрученными на него событиями мыши. Буквы, выходит, обрамлялись бы обессиленным тегом div с id и событиями. Это все чтобы имитировать и выделение. В общем еще подумаю. Мозговой штурм. И вы штурмуйте. Чего-нибудь сообразим. Штука не должна быть сложной. 0

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	23.08.2013, 09:17
	Можно взять уже готовый и пользоваться. Замечательно гуглится по jquery editor. jQueryTE Список из 14 редакторов Статья на хабре на эту тему 2

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
	23.08.2013, 13:40 [ТС]
	Qwertiy, Огромное спасибо. Но я не очень люблю все стороннее. Тем более когда не понимаешь как это работает. Хотя бы принцип знать. 0

@koorya 334 / 181 / 68 Регистрация: 18.03.2010 Сообщений: 586 Записей в блоге: 11
	24.08.2013, 09:26
	Объемная работа. Я пасую. Едва ли у меня выйдет функциональней. 0

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
	24.08.2013, 11:27 [ТС]
	koorya, ладно. Воспользуюсь плагином. 0