Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2016, 16:35
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

Переносы строк в div contenteditable при выделении текста
Доброго всем времени суток!

Пишу простенький визуальный редактор для сайта.
Сразу оговорюсь, что готовые решения применять не хочу в принципе.
Мысль следующая, у редактора есть буквально несколько кнопок: форматирование текста (жирный, курсив и т.д.), вставка ссылки и вставка картинки и оформление текста как кода.
Вот с последний возникла проблема
Пишу код, далее нажимаю кнопку, которая оборачивает этот код в див с классом, который в css настроен на красиво отображение кода.
Выглядит так:
doc[0].focus();

		var selRange = window.getSelection().getRangeAt(0);
		console.log(selRange.innerHTML);
		if (selRange.toString().length>0) {
			var obj = document.createElement("div");

			$(obj).addClass('codeBlock');
			var text = selRange.toString();
			$(obj).html(text);

			selRange.deleteContents();
			selRange.insertNode(obj);
			doc.trigger('input');
		}

И всё бы хорошо, но в рендже нет переносов строк в принцпипе.
Я знаю, что браузер при нажатии на энтер создаёт новый блок и пишет в него, эмитируя перенос строки, меня это не смущает, меня смущает то, что при подобном форматировании я получаю простыню из одной длинной строки.
Можно ли как-то этот вопрос решить? может быть как-то аналогично форматированию текста просто оборачивать не в b а в div (делаю это через execComand)?
Заранее благодарю за любые советы!
Ответить с цитированием
  #2 (permalink)  
Старый 18.08.2016, 16:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от NapalmRain
Я знаю, что браузер при нажатии на энтер создаёт новый блок и пишет в него
Не все - FF вставляет BR, Хром DIV, а в нем BR.
Ответить с цитированием
  #3 (permalink)  
Старый 18.08.2016, 17:01
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

Rise, я был бы признателен, если б вы объяснили, что в моём кода такого ужасного, что складывается такое впечатление?
Одна из причин написания своего, а не использования готового - это обучение. Используя готовое особо не наразвиваешься...

laimas, да, не спорю, но я думаю на суть вопроса это не должно повлиять... Разве нет?

Rise, Благодарю, получилось. Попробовал сделать это через execCommand('formatBlock', false, 'pre'); Оборачивает всё прекрасно, но, к сожалению, не умеет отменять это действие, аналогично форматированию. Если я правильно понимаю, нативного решения нет?
Ответить с цитированием
  #4 (permalink)  
Старый 18.08.2016, 17:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от NapalmRain
я думаю на суть вопроса это не должно повлиять... Разве нет?
Это смотрят что вам нужно. Редактор для чего - получить html, так? В html перенос что - <br>, так? Чего еще нужно?

Смущает "длинная строка" полученного кода? А вам что от этого плохо? Идеальный html, это html без мусора в виде лишних пробелов, переноса строк, табуляций, где они не нужны. Не вам его разбирать, а браузеру. А нужно глянуть на структуру, так отладчик браузера все покажет.
Ответить с цитированием
  #5 (permalink)  
Старый 18.08.2016, 17:54
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

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

laimas, идея получить на выходе визуально что-то похожее на правду.
То есть я скопипащу в свой "редактор" кусок своего кода, обрамлю его тегом, говорящим, что это код, ну а потом допишу вне этого обрамления некое описание. Всё это отправлю в базу и потом это отобразиться пользователю. Если я потеряю переносы строк и отступы, я получу архинечитабельную хрень... Вот где-то тут кроется проблема.
Ответить с цитированием
  #6 (permalink)  
Старый 18.08.2016, 18:03
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от NapalmRain
Разве нет?
Напиши RFC на W3C, может прислушаются к твоему разве нет и прикажут браузерописателям рендерить /r/n на веб-страницах.
Ответить с цитированием
  #7 (permalink)  
Старый 18.08.2016, 18:04
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от NapalmRain
прям профессионализм во всей красе
Именно, но твой ламерим заведомо сильнее, поскольку подразумевает произвольные желания, типа хочу чтобы солнце было треугольным - и само по себе такое желание поднимает самооценку на недосягаемую для профессионала высоту, а профессионализм всегда в рамках сугубой реальности (но не в случае с Титаником, конеш).
Ответить с цитированием
  #8 (permalink)  
Старый 18.08.2016, 18:34
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

warren buffet, мда... толи лыжи не едут, толи я просто не умею объяснять. Но, честно признаться, я до сих пор уверен, что мои "поднимающие самооценку желания" за пределы реальности не выходили.
Да и про рендеринг переносов я промолчу...
Только вот дело в том, что есть разница между теми, кто говорит: "хочу, и всё тут", и теми, кто хотя бы пытается что-то сделать.
Я, по крайней мере, "хотя бы вырезал треугольную дырочку, чтоб на меня солнце светило треугольником".
Всем, кто ответил, спасибо!
И счастливо оставаться. Сочтёмся на том, что я просто очередной ламер, мимо пробегавший.

Последний раз редактировалось NapalmRain, 18.08.2016 в 18:42.
Ответить с цитированием
  #9 (permalink)  
Старый 18.08.2016, 19:16
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от NapalmRain
Только вот дело в том, что есть разница между
contenteditable придуман для других целей, а деревня ничтоже сумняще пытается приспособить тромбон для дойки коров.

contenteditable позволяет редактировать элемент(ы) и сохранять веб-страницу как ДОКУМЕНТ.

contenteditable позволяет редактировать элемент(ы) и печатать страницу как ДОКУМЕНТ.

Так вот применительно к ДОКУМЕНТУ contenteditable работает идеально, а для всяких там деревенских пурпозей его и приходится рихтовать.
Ответить с цитированием
  #10 (permalink)  
Старый 19.08.2016, 13:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от NapalmRain
Если я потеряю переносы строк и отступы, я получу архинечитабельную хрень...
Ничего вы не потеряете, и хоть тридцать пробелов, сохраняться, просто речь не шла изначально о коде. На веб странице будет отображен только один из десятков переносов, а перевод строки это br.

Если это для кода, например как здесь вводится в форму код, то зачем вам вообще contenteditable - ВВ-теги , а при выводе преобразовать в html-сущности все, что заключено в эти ВВ-теги, а теги заменить на <pre></pre>.

Более того, есть библиотеки как для сервера, так и для клиента, которые подсвечивают код.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Событие при создании div tr0y Events/DOM/Window 13 21.10.2015 08:28
Скрыть div при нажатии на картинку SLameN jQuery 6 14.04.2014 21:27
При нажатии на ссылку раскрываются все div anonimous jQuery 1 09.08.2012 14:49
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 18:02