Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Переносы строк в 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)?
Заранее благодарю за любые советы!
Ответ:
Сообщение от NapalmRain
прям профессионализм во всей красе
Именно, но твой ламерим заведомо сильнее, поскольку подразумевает произвольные желания, типа хочу чтобы солнце было треугольным - и само по себе такое желание поднимает самооценку на недосягаемую для профессионала высоту, а профессионализм всегда в рамках сугубой реальности (но не в случае с Титаником, конеш).
Вопрос: Отменить в выделение текста в таблице при кликах и вообще двойные клики отменить

Есть большая таблица. На ней делегирован обработчик клика. Обработчик перехватывает строку и обрабатывает (строки переносятся в другую таблицу в измененном виде).

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

Из того что я пробовал:

equipmentTable.onclick = function(event) {
  event = event || window.event;
  event.preventDefault ? event.preventDefault() : (event.returnValue=false);
  event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
  this.style.backgroundColor = (this.style.backgroundColor == "red")?"black":"red";
  return false;
}


Не помогает ничего. Я даже припоминаю, что как-то был опыт решения этого вопроса, помогите пожалуйста.
Ответ:
Сообщение от monkey_gelada
Я даже припоминаю, что как-то был опыт решения этого вопроса
Оно?


Вопрос: Как отменить срабатывание onClick при выделении текста

У меня есть таблица, каждая строка которой (<tr>) сделана ссылкой (с помощью события onClick).
К сожалению, при выделении текста в таблице, также происходит переадресация.
Нужно либо предотвратить эту переадресацию, либо, может, вы знаете другие способы сделать строку таблицы ссылкой.
Ответ: Спасибо, помогло!
Вопрос: Отменить слетание выделения текста после выполнения функции

Добрый день.
Есть скрипт, который добавляет ссылку при копировании.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function addLink() {
 
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
 
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
 
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
 
    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}
 
document.addEventListener('copy', addLink);
Но после того, как копирование произошло, в браузере слетает выделение ранее выделенного текста. Как я понимаю, это происходит из-за "selectAllChildren". Можно как-то этого избежать, чтобы выделение не слетало?
Заранее спасибо!
Ответ:
Сообщение от BANO
только если запомнить предедущее и опять его выделить
Да, я думал об этом варианте. Можно будет использовать addRange. Например вот:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-</title>
 </head>
 <body>
<script type="text/javascript">
function addLink() {
 
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
        
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
 
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
 
    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
 
 var range = document.createRange(),
     elem = document.getElementById("sel_range");
 
     range.setStart(elem.firstChild, 0);
     range.setEnd(elem.firstChild, 15);
     selection.removeAllRanges();
     selection.addRange(range);
}
 
document.addEventListener('copy', addLink);
 
</script>
<p id="sel_range">текст текст текст</p>
<p>текст текст текст</p>
<p>текст текст текст</p>
<p>текст текст текст</p>
 </body>
</html>
Но есть несколько моментов:
1. При добавлении в JS-код части, отвечающей за повторное добавление выделения, перестает работать основной функционал - добавление ссылки при копировании. Пока не разобрался почему
2. В моём примере выделение задано конкретно, а надо, чтобы высчитывались значения произвольного выделения для вставки значений в setStart и setEnd. Пока тоже не пойму как это сделать...
Вопрос: Выделение текста CSS по умолчанию

Постараюсь написать так, чтобы было понятно сразу. Скажите пожалуйста, в принципе возможно ли, чтобы текст который я пишу в textarea или в div (contenteditable="true") чтобы он сразу выделялся?

Ну вот вы если напишите что-то в блокноте, а потом нажмете выделить все. То текст будет выделен. Можно ли так сделать, чтобы он СРАЗУ такой был выделен по умолчанию? Ну не в блокноте конечно, а в форме HTML.

Игрался со многим. Но увы, не получилось. Нужно чтобы выделялся именно ВВОДИМЫЙ текст.. То есть будто я это сообщение сейчас пишу и оно автоматов выделяется..

Зачем мне это нужно? Я хочу видеть все символы, не только буквы, но и пробелы. Есть он или нет, я смогу увидеть, если все будет выделено, тогда по цвету отличу.

Заранее спасибо, скажу только что очень нужно, был бы рад подсказке!
Ответ: Zerber6800, буду держаться!
Вопрос: <div contenteditable= "true" '.$rootFunction.' style = "background-color: '.$expl[0].

<div contenteditable= "true" '.$rootFunction.' style = "background-color: '.$expl[0].'" id = "nomerDogovora'.$r['id'].'">'.$r['nomerDogovora'].'</div>

Привет, такой вот код, как средствами жквери поменять contenteditable на false или true?
Ответ:
$('#nomerDogovora<?=$r['id']?>').prop('contentEditable', false);


document.getElementById('nomerDogovora<?=$r['id']?>').contentEditable = false;
Вопрос: Скрипт для выделения текста цветом

Добрый день.
У меня есть следующий код, который выделяет текст цветом после его выделения мышью:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function selectText(hexColor) {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement('span');
    span.style.backgroundColor = hexColor;
    span.className = 'selected-text';
    span.appendChild(selectedText);
    selection.insertNode(span);
}
 
 
$(document).click(function () {
    selectText('#f90');
});
HTML5
1
2
<div id="t1">Some text</div>
<div id="t2">Other text</div>
Но если я заменю строку 12 на следующую (вставлю id элемента):
Javascript
1
$("#t1").click(function () {
то код перестает работать.
Не подскажете ли, в чем тут дело, как заставить этот код работать не для всего документа, а только для элемента с конкретным id? (Если есть более простой способ решить эту задачу, буду благодарен, если кинете ссылку на него или опишете)
Спасибо.
Ответ: give_up, Думаю дело не в браузере, может быть на момент вызова $('#t1'), его еще не существует?

Добавлено через 1 минуту
give_up, Попробуйте вот так сделать
Javascript
1
$(document).on('click', '#t1', function () { ..
Вопрос: Выделение текста в ссылке не переходя по ней

Добрый день!
Есть такая интересная тема:
Есть блок с текстом, весь текст находящийся в блоке является ссылкой.
Задача:
1. Если просто кликнуть по тексту, то просто проваливаемся по ссылке.
2. Если выделяем текст, то надо просто выделить текст, а по ссылке не переходить!
Есть какое то решение?
Чего удалось догнать пока решал задачу:
1. Если делать обычной ссылкой a href, то естественно ничего не получается, надо переход делать через js.
2. Убираю a href, перевожу в js, вешаю ссылку на div блок (js только начал изучать, поэтому добился результата прибегнув поиску инета) результат ниже:
<div onclick='window.location.href=\"".$resultRubric['rubric_en'].'/post/'.$resultSearch['id']."\"' style='cursorointer; display: block;' id='contentTablePostLink'>Контент</div>
Вот и вся красота
Как Вы думаете, можно сделать так как задумал?
Яркий пример моего результата, сайт в контакте!
Заранее спасибо, даже если не ответите
Ответ: если захочешь так же делать, то вот
Вопрос: Выделение текста в блоке и занесение его в input

Есть два блока в них текст, как сделать что бы выделил часть текста в блоке и он оказался в нужном мне input. Есть готовое решение
Ответ: я уже сделал пример но у меня проблемка возникла если можете помогите

Добавлено через 18 секунд
Jabbson,
Вопрос: Какой стиль отвечает за выделение текста?

У меня на сайте выделяется зеленым. Не нравится, что в CSS прописать, чтоб текст выделялся черным или синим?

Я имею ввиду, когда мышкой выделяешь текст для копирования, например. Зеленый очень не нравится.
Ответ: AlexZaw, Ок, сработало, спасибо!