Нужна помощь с преобразованием URL-адресов в гиперссылки

Он превращает URL-адреса в гиперссылки, только если я нажимаю пробел или Enter после ввода URL-адреса.

Я хочу, чтобы URL-адрес превратился в гиперссылку, как только я закончу его вводить (сразу после того, как я закончу вводить .com, .org, .net и т. д.). Я предполагаю, что это как-то связано с startOffset/endOffset/start/end/rng, но я не могу понять:

 


tinymce.PluginManager.add('autolink', function(editor) {


var AutoUrlDetectState;


var AutoLinkPattern = /^(https?:\/\/|ssh:\/\/|ftp:\/\/|file:\/|www\.|(?:mailto:)?[A-Z0-9._%+\-]+@)(.+)$/i;


if (editor.settings.autolink_pattern) {


AutoLinkPattern = editor.settings.autolink_pattern;


}


editor.on("keydown", function(e) {


if (e.keyCode == 13) {


return handleEnter(editor);


}


});


// Internet Explorer has built-in automatic linking for most cases


if (tinymce.Env.ie) {


editor.on("focus", function() {


if (!AutoUrlDetectState) {


AutoUrlDetectState = true;


try {


editor.execCommand('AutoUrlDetect', false, true);


} catch (ex) {


// Ignore


}


}


});


return;


}


editor.on("keypress", function(e) {


if (e.keyCode == 41) {


return handleEclipse(editor);


}


});


editor.on("keyup", function(e) {


if (e.keyCode == 32) {


return handleSpacebar(editor);


}


});


function handleEclipse(editor) {


parseCurrentLine(editor, -1, '(', true);


}


function handleSpacebar(editor) {


parseCurrentLine(editor, 0, '', true);


}


function handleEnter(editor) {


parseCurrentLine(editor, -1, '', false);


}


function parseCurrentLine(editor, end_offset, delimiter) {


var rng, end, start, endContainer, bookmark, text, matches, prev, len, rngText;


function scopeIndex(container, index) {


if (index < 0) {


index = 0;


}


if (container.nodeType == 3) {


var len = container.data.length;


if (index > len) {


index = len;


}


}


return index;


}


function setStart(container, offset) {


if (container.nodeType != 1 || container.hasChildNodes()) {


rng.setStart(container, scopeIndex(container, offset));


} else {


rng.setStartBefore(container);


}


}


function setEnd(container, offset) {


if (container.nodeType != 1 || container.hasChildNodes()) {


rng.setEnd(container, scopeIndex(container, offset));


} else {


rng.setEndAfter(container);


}


}


// Never create a link when we are inside a link


if (editor.selection.getNode().tagName == 'A') {


return;


}


// We need at least five characters to form a URL,


// hence, at minimum, five characters from the beginning of the line.


rng = editor.selection.getRng(true).cloneRange();


if (rng.startOffset < 5) {


// During testing, the caret is placed between two text nodes.


// The previous text node contains the URL.


prev = rng.endContainer.previousSibling;


if (!prev) {


if (!rng.endContainer.firstChild || !rng.endContainer.firstChild.nextSibling) {


return;


}


prev = rng.endContainer.firstChild.nextSibling;


}


len = prev.length;


setStart(prev, len);


setEnd(prev, len);


if (rng.endOffset < 5) {


return;


}


end = rng.endOffset;


endContainer = prev;


} else {


endContainer = rng.endContainer;


// Get a text node


if (endContainer.nodeType != 3 && endContainer.firstChild) {


while (endContainer.nodeType != 3 && endContainer.firstChild) {


endContainer = endContainer.firstChild;


}


// Move range to text node


if (endContainer.nodeType == 3) {


setStart(endContainer, 0);


setEnd(endContainer, endContainer.nodeValue.length);


}


}


if (rng.endOffset == 1) {


end = 2;


} else {


end = rng.endOffset - 1 - end_offset;


}


}


start = end;


do {


// Move the selection one character backwards.


setStart(endContainer, end >= 2 ? end - 2 : 0);


setEnd(endContainer, end >= 1 ? end - 1 : 0);


end -= 1;


rngText = rng.toString();


// Loop until one of the following is found: a blank space, &nbsp;, delimiter, (end-2) >= 0


} while (rngText != ' ' && rngText !== '' && rngText.charCodeAt(0) != 160 && (end - 2) >= 0 && rngText != delimiter);


if (rng.toString() == delimiter || rng.toString().charCodeAt(0) == 160) {


setStart(endContainer, end);


setEnd(endContainer, start);


end += 1;


} else if (rng.startOffset === 0) {


setStart(endContainer, 0);


setEnd(endContainer, start);


} else {


setStart(endContainer, end);


setEnd(endContainer, start);


}


// Exclude last . from word like "www.site.com."


text = rng.toString();


if (text.charAt(text.length - 1) == '.') {


setEnd(endContainer, start - 1);


}


text = rng.toString();


matches = text.match(AutoLinkPattern);


if (matches) {


if (matches[1] == 'www.') {


matches[1] = '[URL='https://lumtu.com/yti/dwddwd3dodHRwOi8viOw']http://www[/URL].';


} else if (/@$/.test(matches[1]) && !/^mailto:/.test(matches[1])) {


matches[1] = 'mailto:' + matches[1];


}


bookmark = editor.selection.getBookmark();


editor.selection.setRng(rng);


editor.execCommand('createlink', false, matches[1] + matches[2]);


editor.selection.moveToBookmark(bookmark);


editor.nodeChanged();


}


}


});

Код (разметка):

Я не заметил, чтобы вы это добавили, позвольте мне попробовать. PS оставлю здесь, чтобы не увеличивать количество комментариев. Вьюга PS Все еще делаю то же самое.

Нет, он все еще делает то же самое. Я не думаю, что это сработает, если не произойдет что-то вроде этого: вы начинаете вводить URL-адрес после того, как введете http:// или www. оно должно превратиться в: http ://someurl.com

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

Вы пытались удалить

 
if (editor.selection.getNode().tagName == 'A') {
return;
}

Код (разметка):

Я бы оставил это в покое. Мы с @Blizzardofozz на одной волне допустим, я набрал mysite.co

• Как скрипт узнает, что я закончил печатать?
  
• Как сценарий узнает, что я собираюсь продолжать работу... .co.uk, .com и т. д.
  
• Что, если я собираюсь ввести глубокую ссылку? что-то вроде mysite.com/products/widgets/red/v2.html
  

Я думаю, что лучшим/более простым/меньшим количеством используемых ресурсов решением было бы просто использовать предупреждение перед редактором о том, что ссылки будут преобразованы в настоящие гиперссылки после нажатия пробела или ввода.

Обновление DOM после каждого нажатия клавиши требует усилий и может привести к проблемам.

Здесь происходит:

 


editor.on("keydown", function(e) {


if (e.keyCode == 13) {


return handleEnter(editor);


}


});


editor.on("keypress", function(e) {


if (e.keyCode == 41) {


return handleEclipse(editor);


}


});


editor.on("keyup", function(e) {


if (e.keyCode == 32) {


return handleSpacebar(editor);


}


});

Код (разметка): Этот код проверяет, ввели ли вы 13 — введите; 41 – выбрать; 32 - космос и тут творится магия.

Новый код должен проверять каждое нажатие пользователем клавиши, ввел ли он строку, являющуюся частью шаблона:

var AutoLinkPattern = /^(https?:\/\/|ssh:\/\/|ftp:\/\/|file:\/|www\.|(?:mailto?[A-Z0-9._ %+\-]+@)(.+)$/i;

Это после того, как вошел последний пользователь пространства.

Мне пора идти, но завтра я проверю, удалось ли тебе это сделать, и постараюсь помочь, если нет.

Не совсем. На самом деле, когда я пытался заставить это работать, со мной произошло то же самое. По сути, это происходит следующим образом: вы начинаете вводить http:// или www. в тот момент, когда он достигает первой буквы, он преобразуется в гиперссылку:

Вы имеете в виду что-то вроде этого:

 


<!DOCTYPE html>


<html>


<head>


<title>Test</title>


<style>


textarea {


width: 400px;


height: 200px;


}


</style>


</head>


<body>


<textarea id="textarea"></textarea>


<script>


var tex = document.getElementById('textarea')


, exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;


tex.addEventListener('keyup', function(e) {


var txt = tex.value;


if (e.keyCode == 32) {


var ttt = txt.replace(exp, "<a href='$1'>$1</a>")


, mor = exp.test(txt); 


tex.value = ttt;


if(mor == true) {


exp = null;


}


}


});


</script>


</body>


</html>

Код (разметка): Однако он работает только один раз. Я не знаю, как отключить клавиатуру, поэтому обнуляю элемент и вызываю ошибку кода. Возможно, остальные смогут помочь.

Думаю, вы, ребята, упустили мою мысль.

Она превращается в гиперссылку ТОЛЬКО после того, как вы нажмете пробел или Enter, когда закончите вводить URL-адрес.

URL-адрес останется обычным текстом, если ничего не нажимать.

Я хочу, чтобы он начал превращаться в гиперссылку во время ввода URL-адреса.

И да, это можно сделать.

У меня есть другой редактор, который делает то же самое, и я бы хотел, чтобы этот делал то же самое, НО все, что я пробовал, не сработало.

Этот сценарий не имеет для меня смысла.

Чтобы понять, что я имею в виду под «после того, как вы нажмете пробел или Enter», посмотрите этот jsfiddle:
http://fiddle.tinymce.com/

Как сценарий узнает, что вы закончили вводить URL-адрес? Прямо сейчас, когда вы нажимаете пробел, он оценивает, имеет ли строка шаблон в начале: https и т. д. Чтобы сделать то, что вы хотите, вам придется проверять каждую запись ключа, включают ли конечные символы строки .com, .org.

и т. д., но это и т. д. должно быть массивом всех TLD.

Как вы думаете, вы получите реальную выгоду от достижения того, что вы описываете? Я думаю, что прессинга достаточно.

Если вы считаете, что вам действительно нужна эта функциональность, я посмотрю, как это сделать.

 
if (editor.selection.getNode().tagName == 'A') {
return;
}

Code (markup): try like this.

just remove the if statement that checks if user presses space and the script will check the string for the URL pattern on every keyup.

This should work. Oh I get it - it turns to link the URL when detects www.

and then stops turning the string into link? Try what happens if comment out or remove this:

 
editor.on("keyup", function(e) {

return handleSpacebar(editor);
});

Код (разметка):

Жаль, что я не до конца проанализировал сценарий.



Этот плагин использует метод editor.execCommand('createlink'...) для создания ссылки, поэтому для достижения того, чего вы хотите, он должен снова превратить ссылку в строку при следующем нажатии клавиши, и весь процесс будет повторяться до тех пор, пока пользователь не нажмет пробел, поэтому строка будет каждый раз превращаться в ссылку и снова в строку.



Вы уверены, что видели это в другом редакторе и как называется этот редактор, чтобы я мог проверить? Это не кажется логичным. Возможно ли то, что вы видели, это просто подчеркивание и раскрашивание будущей ссылки с помощью css? А потом после нажатия пробела строка преобразуется в ссылку?

Теперь, когда я это проверил, другой редактор не использует функцию html dom или createlink.

Это чистое регулярное выражение.

Виноват. Можно ли это сделать с помощью кода, который у меня есть? Это дало бы моим пользователям некоторую уверенность в том, что ссылка создается/создается, когда они вводят ее. Для меня все дело в качественном пользовательском опыте.