Problem linking urls with content editable and IE about autolinker.js

[gregjacobs]

Hey Samuel. Can you describe the problem you're having in more detail?

What do you mean that Internet Explorer imminently creates an html link when you type one? Where are you typing in text that causes IE to automatically link things? (text field / text area? rich text editor? etc)

[samuelvisser]

Thanks for your quick reply!

Administrators on my website are able to edit the text on some pages. I'm doing this with content editable div's, and I safe the data to my database with javascript. I am applying autolink to the data just before I safe it to the database, inside the database the links are already autolinked.
I tested it in some more browsers, and it works very well with them all, exept for Safari and Internet Explorer.

[samuelvisser]

Dear gregjacobs,

This still is a problem for me and it still doesn't work. Could you please try to look into this problem?

[gregjacobs]

Hey, sorry dude, do need some more info. Can you paste what your text looks like before it is sent to Autolinker, and what it looks like after?

Would be useful to see the input text from Chrome/Firefox vs. Safari/Internet Explorer too.

[samuelvisser]

Hey,
Thanks for responding again!
Here are screenshots from all my tests. AutoLink seems to work perfectly in Safari now, too. No idea why, but i think Safari had a update which changed the behavior.

Google Chrome - before applying AutoLink:

Google Chrome - after applying AutoLink:

Mozilla Firefox - before applying AutoLink:

Mozilla Firefox - after applying AutoLink:

Opera - before applying AutoLink:

Opera - after applying AutoLink:

Safari - before applying AutoLink:

Safari - after applying AutoLink:

Internet Explorer - before applying AutoLink (it's already a link):

Internet Explorer - after applying AutoLink (AutoLink didn't do anything because it was already a link):

As it's only Internet Explorer that is not working, it is not so much of a problem for me anymore. I hate Internet Explorer anyway :). Would of course be nice if you found a way to fix it, but for me there is not so much of a hurry anymore.

Thanks for your help!

[gregjacobs]

Ah, ok, now I'm understanding. So Internet Explorer automatically creates the links for you from the content editable field, and therefore Autolinker is ignoring them.

What you might try doing is removing the IE-generated anchor tags using your browser's DOM before running Autolinker on it. Are you using any libraries? Using jQuery to unwrap the hrefs from the generated <a> tags would make this pretty straightforward. Something like this should do the trick:

var $contentEl = $( '#elementWithContent' );

// Find all anchor tags within the content, and replace them with just their href's,
// in preparation to be autolinked using Autolinker's settings
$contentEl.find( 'a' ).each( function( i, elem ) {
    $( elem ).replaceWith( elem.href );
} );

var autolinkedHtml = Autolinker.link( $contentEl.html() );

If you're not using jQuery (and are having trouble), let me know and I'll come up with something else :)

[samuelvisser]

Thanks for your great help! 

I am using jQuery. 
But I'm really struggling to make this work. It keeps saying 'undefined is not a function' referring to this row: 
div_content.find( 'a' ).each...

As you can see, I used my own variable which has the html content from the DIV. I don't know if this causes any problems (pretty new to jQuery :)) but I can't find out why it would be a problem. 
Anything you can think of I might me doing wrong here? 

Verzonden vanaf mijn Samsung Galaxy smartphone.

-------- Oorspronkelijk bericht --------
Van: Gregory Jacobs [email protected]
Datum:18-11-2014 02:31 (GMT+01:00)
Aan: "gregjacobs/Autolinker.js" [email protected]
Cc: samuelvisser [email protected]
Onderwerp: Re: [Autolinker.js] Autolink doesn't work in Safari and Internet
Explorer (#61)

Ah, ok, now I'm understanding. So Internet Explorer automatically creates the links for you from the content editable field, and therefore Autolinker is ignoring them.

What you might try doing is removing the IE-generated anchor tags using your browser's DOM before running Autolinker on it. Are you using any libraries? Using jQuery to unwrap the hrefs from the generated tags would make this pretty straightforward. Something like this should do the trick:

var $contentEl = $( '#elementWithContent' );

// Find all anchor tags within the content, and replace them with just their href's,
// in preparation to be autolinked using Autolinker's settings
$contentEl.find( 'a' ).each( function( i, elem ) {
$( elem ).replaceWith( elem.href );
} );

var autolinkedHtml = Autolinker.link( $contentEl.html() );
If you're not using jQuery (and are having trouble :)), let me know and I'll come up with something else.

—
Reply to this email directly or view it on GitHub.

[gregjacobs]

Is div_content a jQuery object, or a reference to a DOM node?

If div_content is a reference to a DOM node, then you need to turn it into a jQuery object using:

$( div_content ).find( 'a' ).each( ... 

[gregjacobs]

Hey, hope you got this solved. Closing this ticket out for now. Feel free to continue to comment though if you have more questions!

[samuelvisser]

Sorry for the late answer, as it now also works on Safari this is not too high on my priority list anymore :)
But i still just can't make this work. I searched on the internet for a long time on how to delete all href attributes from a string, but i just can't find anything.

The part of the code with everything that happens before autolink is being used:

var div_inhoud = $("#editedText").html();

//Probleem met html code oplossen:
div_inhoud = div_inhoud.replace(/</g, '<');
div_inhoud = div_inhoud.replace(/>/g, '>');
div_inhoud = div_inhoud.replace(/ /g, ' ');

// Find all anchor tags within the content, and replace them with just their href's,
// in preparation to be autolinked using Autolinker's settings
div_inhoud.find( 'a' ).each( function( i, elem ) {
$( elem ).replaceWith( elem.href );
} );

//Links op pagina omvormen naar html links:
div_inhoud = Autolinker.link( div_inhoud );

In Chrome, the console gives the error:
Uncaught TypeError: undefined is not a function

I really don't know what i'm doing wrong.
I tried using your $( div_inhoud ) solution, but then Chrome gives this error:
Uncaught Error: Syntax error, unrecognized expression: Hello,

This is a autolink test on my personal website.

Chrome, after applying autolink:

google.nl

jquery.js:2 fb.errorjquery.js:2 fb.tokenizejquery.js:2 fb.selectjquery.js:2 fbjquery.js:2 m.fn.extend.findjquery.js:2 m.fn.initjquery.js:2 mjavascript.js:239 (anonymous function)jquery.js:3 m.event.dispatchjquery.js:3 m.event.add.r.handle

Don't know how to show code in a proper way on GitHub :) But it gives the string with the page content which i'm trying to save to my database. After the page content it gives the errors you can see.

[gregjacobs]

Ok, so I think I see the problem. You're working with the HTML string rather than the DOM tree structure.

I think you want something like this instead:

var div_inhoud = $("#editedText");   // note: no call to `.html()` here

// Find all anchor tags within the content, and replace them with just their href's,
// in preparation to be autolinked using Autolinker's settings
div_inhoud.find( 'a' ).each( function( i, elem ) {
    $( elem ).replaceWith( elem.href );
} );

// Links op pagina omvormen naar html links:
var htmlToSaveToDatabase = Autolinker.link( div_inhoud.html() );

// Update the HTML of the element on the page with the newly-autolinked HTML
div_inhoud.html( htmlToSaveToDatabase );

I removed the replace() calls, and named the var htmlToSaveToDatabase for what you want to send to your DB. The last line updates the HTML on the page with the newly-autolinked html. Give that a try and let me know.

Otherwise, do you have a place where I can see the full code and page that you're editing? That would give me some more context.