Форум

javascript_pupil · #1 (**permalink**) 23.10.2022, 14:26

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

Вот, пример: форум <- сделанный скриптом данного движка.

Вопрос: где найти читабельный пример подобного кода? Понимаю, что это где-то в файле типа ckeditor.js, но JS код там сжат и достать его быстро не получается. Есть примеры на Stack Overflow, но там без всплывающего окна для ввода URL.

Alikberov · #2 (**permalink**) 24.10.2022, 07:00

<script>
function addLink() {
	const textarea = document.querySelector("TextArea");
	const text = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
	const href = prompt("Адрес ссылки", "https://javascript.ru/forum/misc/");
	textarea.value = `${textarea.value.substr(0, textarea.selectionStart)}<a href='${href}'>${text}</a>${textarea.value.substr(textarea.selectionEnd)}`;
	document.body.appendChild(code);
}
</script>
<body>
<button onclick='addLink()'>Добавить ссылку</button>
<textarea>Ссылка#1 Ссылка№2</textarea>
</body>

рони · #3 (**permalink**) 24.10.2022, 07:04

Alikberov,
а выделенный текст где?

автор просит это

Alikberov · #4 (**permalink**) 24.10.2022, 07:19

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

Alikberov,
а выделенный текст где?

автор просит это

Упс. Поправил.

рони · #5 (**permalink**) 24.10.2022, 07:26

Alikberov,
после строки 5
if(!href) return;
и
if(!text) text = href;
или так
<a href='${href}'>${text||href}

Alikberov · #6 (**permalink**) 24.10.2022, 08:01

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

Alikberov

A не слишком ли упрощаем задачу?

Лет 20 тому назад на уроках Лого не все понимали, почему вторичный запуск кода выдавал ошибку, так как не догадывались поставить черепашку в исходную точку.

javascript_pupil · #7 (**permalink**) 25.10.2022, 21:28

Всем спасибо, но "не работает".

Точнее: сам пример решения конечно рабочий, но как только начинаешь его встраивать в свою систему - отказ. Пробовал 2 варианта:

1. Целиком указанный код на страницу перлового скрипта. Получаю серверную ошибку: Not enough arguments for substr at ... near "selectionEnd)"
Ругается вот на эту строку:

textarea.value = `${textarea.value.substr(0, textarea.selectionStart)}<a href='${href}'>${text}</a>${textarea.value.substr(textarea.selectionEnd)}`;

Почему Perl падает из-за JS сказать затрудняюсь.

2. Вынос скрипта во внешний файл выдает следующую ошибку: "addLink" не определено.

Вроде бы всё правильно, но не работает - ничего не происходит. Да, "button" заменил на

<a href="#" onclick="addLink()">Add Link</a>

Буду признателен за подсказку: что я сделал не так?

Alikberov · #8 (**permalink**) 26.10.2022, 06:00

<script>
function addLink(button) {
	const textarea = button.parentNode.TextAreaTag;
	const href = prompt("Адрес ссылки", "https://javascript.ru/forum/misc/");
	const text = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd) || href;
	if(!href)
		return;
*!*
	// Определите один из этих двух рабочих вариантов
	if("ticks" in button.dataset)
		textarea.value = `${textarea.value.substr(0, textarea.selectionStart)}<a href='${href}'>${text}</a>${textarea.value.substr(textarea.selectionEnd)}`;
	else
		textarea.value = textarea.value.substr(0, textarea.selectionStart) + "<a href='" + href + "'>" + text + "</a>" + textarea.value.substr(textarea.selectionEnd);
*/!*
	document.body.appendChild(code);
}
</script>
<body>
<form>
<a href='#' onclick='addLink(this)' data-ticks><img src='https://javascript.ru/forum/images/editor/createlink.gif'></a>
<a href='#' onclick='addLink(this)'><img src='https://javascript.ru/forum/images/editor/createlink.gif'></a><br>
<textarea name=TextAreaTag rows=3 cols=80>
Ссылка#1
Ссылка№2
</textarea>
</form>
</body>

javascript_pupil · #9 (**permalink**) 26.10.2022, 08:47

Вот этот вариант со строкой

textarea.value = textarea.value.substr(0, textarea.selectionStart) + "<a href='" + href + "'>" + text + "</a>" + textarea.value.substr(textarea.selectionEnd);

мне более понятен и он работает в моем случае. Спасибо!

Но есть еще 1 нюанс. В моем случае в форме используются 2 textarea, но мне бы хотелось обойтись одной кнопкой для них. В любом случае выделить текст можно только в одной textarea, соответственно в нее и надо вставлять модифицированную строку. Вопрос: чем заменить "textarea.value"? Ведь у нас две одинаковых textarea, естественно с разными именами и идентификаторами.

Alikberov · #10 (**permalink**) 26.10.2022, 09:30

<script>
function addLink(button) {
	if(button.parentNode.dataset.focused) {
		const textarea = button.parentNode[button.parentNode.dataset.focused];
		const href = prompt("Адрес ссылки", "https://javascript.ru/forum/misc/");
		const text = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd) || href;
		const pos = textarea.selectionStart;
		if(href)
			textarea.value = textarea.value.substr(0, textarea.selectionStart) + "<a href='" + href + "'>" + text + "</a>" + textarea.value.substr(textarea.selectionEnd);
		textarea.focus();
		textarea.selectionStart = textarea.selectionEnd = pos;
	}
}
</script>

<body>
<form data-focused>
<a href='#' onclick='addLink(this)'><img src='https://javascript.ru/forum/images/editor/createlink.gif'></a><br>
<textarea name=TextAreaTag rows=3 cols=80 onfocus='this.parentNode.dataset["focused"] = this.name'>
Ссылка#1
Ссылка№2
</textarea><br>
<textarea name=TextAreaTaq rows=3 cols=80 onfocus='this.parentNode.dataset["focused"] = this.name'>
Ссылка#3
Ссылка№4
</textarea>
</form>
</body>

Форум

Справочник

Discord чат

Курсы javascript