Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem linking urls with content editable and IE #61

Closed
samuelvisser opened this issue Oct 15, 2014 · 11 comments
Closed

Problem linking urls with content editable and IE #61

samuelvisser opened this issue Oct 15, 2014 · 11 comments
Labels

Comments

@samuelvisser
Copy link

Thanks for this Libary, I really like it!
I tested it in Google Chrome and Firefox, and it worked perfectly.
But Internet Explorer imminently creates a html link when you type one, which makes autolink not do any edits to the links, like opening it on another page and giving it a class.
Safari doesn't auto create a html link, but for some strange reason autolink just ignores links made in safari (with me, at least).

Could you fix, or help me fix, these problems? I really like autolink, would love it if everything worked.

Samuël

@gregjacobs
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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 - before applying autolink

Google Chrome - after applying AutoLink:
google chrome - after applying autolink

Mozilla Firefox - before applying AutoLink:
mozilla firefox - before applying autolink

Mozilla Firefox - after applying AutoLink:
mozilla firefox - after applying autolink

Opera - before applying AutoLink:
opera - before applying autolink

Opera - after applying AutoLink:
opera - after applying autolink

Safari - before applying AutoLink:
safari - before applying autolink

Safari - after applying AutoLink:
safari - after applying autolink

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

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

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
Copy link
Owner

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
Copy link
Author

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 notifications@github.com
Datum:18-11-2014 02:31 (GMT+01:00)
Aan: "gregjacobs/Autolinker.js" Autolinker.js@noreply.github.com
Cc: samuelvisser samuvisser@gmail.com
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
Copy link
Owner

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
Copy link
Owner

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
Copy link
Author

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:
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.

@samuelvisser samuelvisser changed the title Autolink doesn't work in Safari and Internet Explorer Autolink doesn't work in Internet Explorer Nov 24, 2014
@gregjacobs
Copy link
Owner

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.

@gregjacobs gregjacobs changed the title Autolink doesn't work in Internet Explorer Problem linking urls with content editable and IE Nov 25, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants