Getting rid of http:// in the Create Link box

[ffs]

As per the title. When using the Create Link box below, the http:// is already in there; I have had members post links which didn't work because they posted the link they wanted after the existing http://, is there any way of getting rid of it?

[Chris]

Try the following code added to the bottom of your theme's posting page template (or global header if wanting to affect multiple themes)

<script>
/* Remove "http://" from WYSIWYG link dialogue box field */
/* ie does not support Proxy or Reflect so old school inception */
(function(){
var cIP = $.ui.wysiwyg.prototype._createLinkPrompt;
$.ui.wysiwyg.prototype._createLinkPrompt = function(){
cIP.apply(this, arguments);
let url = $('.wysiwyg-dialog input[name="href"]');
if(url.val() === 'http://'){
url.val('');
url.attr({placeholder:'https://'})
}
}
})();
</script>


Back when that WYSIWYG was created not all major browsers supported the placeholder attribute but that is no longer the case. This script should remove the hard http:// and place it in a true placeholder attribute that disappears when typing/pasting starts (I recall some older browsers may clear it upon the field gaining the focus rather than when typing starts, but that's nonstandard behavior)

---

edit:

Updates:

• With the above code, if the user does not add a protocol to the URL("http://" or "https://") the link will be invalid. The below replacement code seeks to rectify this by making it an agnostic URL if the protocol is missing (adds "//" and leaves it up to the browser to fill in the protocol currently in use on the page).
  
• Added Modernizr detection of placeholder capability for those who might be using outdated browsers
  
• Accounted for protocols other than http(s) that might someday be supported by Proboards in the future

<script>
/* Remove "http://" from WYSIWYG link dialogue box field */
/* msie does not support Proxy or Reflect so using old school inception */
(function(){
var cLP = $.ui.wysiwyg.prototype._createLinkPrompt;
$.ui.wysiwyg.prototype._createLinkPrompt = function(e,t){
const u = t, protocol = /^(?:\w+):/i, agnostic = /^\/\// ;
t = function(e){
if(e.href && !protocol.test(e.href) && !agnostic.test(e.href)){
e.href = "//"+e.href;
}
u.apply(this,arguments);
}
cLP.apply(this, arguments);
let url = $('.wysiwyg-dialog input[name="href"]');
if(Modernizr.input.placeholder && url.val() === 'http://'){
url.val('');
url.attr({placeholder:location.protocol+'//'})
}
}
})();
</script>

[ffs]

Thanks for that, Chris, will give it a go. I like the video in the second part as well, wish I had the skills to put similar on my forum.

[ffs]

And it works! Well done, that man.

[Chris]

Aug 14, 2021 0:33:20 GMT -8 ffs said:

Thanks for that, Chris, will give it a go. I like the video in the second part as well, wish I had the skills to put similar on my forum.

screentogif.com