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:41
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,420

NapalmRain, оборачивай в <pre>
Ответить с цитированием
  #3 (permalink)  
Старый 18.08.2016, 16:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,361

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

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

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

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

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

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

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

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

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

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

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

Сообщение от NapalmRain
прям профессионализм во всей красе
Именно, но твой ламерим заведомо сильнее, поскольку подразумевает произвольные желания, типа хочу чтобы солнце было треугольным - и само по себе такое желание поднимает самооценку на недосягаемую для профессионала высоту, а профессионализм всегда в рамках сугубой реальности (но не в случае с Титаником, конеш).
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть 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 20:27
При нажатии на ссылку раскрываются все div anonimous jQuery 1 09.08.2012 13:49
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 17:02