Переносы строк в 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)?
Заранее благодарю за любые советы!

Не все - FF вставляет BR, Хром DIV, а в нем BR.

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

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

Rise, Благодарю, получилось. Попробовал сделать это через execCommand('formatBlock', false, 'pre'); Оборачивает всё прекрасно, но, к сожалению, не умеет отменять это действие, аналогично форматированию. Если я правильно понимаю, нативного решения нет?

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

Смущает "длинная строка" полученного кода? А вам что от этого плохо? :) Идеальный html, это html без мусора в виде лишних пробелов, переноса строк, табуляций, где они не нужны. Не вам его разбирать, а браузеру. А нужно глянуть на структуру, так отладчик браузера все покажет.

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

laimas, идея получить на выходе визуально что-то похожее на правду.
То есть я скопипащу в свой "редактор" кусок своего кода, обрамлю его тегом, говорящим, что это код, ну а потом допишу вне этого обрамления некое описание. Всё это отправлю в базу и потом это отобразиться пользователю. Если я потеряю переносы строк и отступы, я получу архинечитабельную хрень... Вот где-то тут кроется проблема.

Напиши RFC на W3C, может прислушаются к твоему разве нет и прикажут браузерописателям рендерить /r/n на веб-страницах.

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

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

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

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

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

Так вот применительно к ДОКУМЕНТУ contenteditable работает идеально, а для всяких там деревенских пурпозей его и приходится рихтовать.

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

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

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