solved TinyMCE links plugin bug

[Soma]

I just discovered a bug I think.

While tracing down a PW site with lots of assets and pages to scan for all images and links in the RT text fields, I discovered that there's some multiple links that appear to be empty, not visible. So I figured that when inserting a external link in the RT, using the PW link dialog, then afterwards open it again to edit, it then inserts a invisible empty <a href="someurl"></a>" right before the link meant to be changed (which stays untouched).

I'm sure it's not browser specific, but my guess is that the PW inser link plugin need a check. It only seems to fail with manually entered external links. I would consider this urgent to fix soon. I now need to go manually go through all them because it isn't something the client nor me have known. Though with the bootstrap script I wrote to scan whole site and look for such things it's a whole lot easier thanks to the easy as pie API.

Thank for anyone confirming/reproduce this bug.

[ryan]

Soma, I've tried several times to reproduce it but can't. Are there any other factors you can think of? Can you paste in the exact text / context where it's occurring and steps to reproduce? Here's what I tried:

1. Enter some text in the body field, like: test test 123 test test

2. Highlight a word (like the second 'test') and then click link icon.

3. Type in a URL, I did http://processwire.com, and click "insert link".

4. Back in 'body' field, click the link and then click the link icon again to edit the link.

5. Type in a new URL (also tried leaving as-is) and click "insert link" again (also tried "cancel").

6. Click the "HTML" icon to look for extra <a> tags, none found.

Testing in Firefox 8, ProcessWire dev, OS X.

[Soma]

Thanks Ryan for testing. I do "exactly" what you do.

Hmm, not sure what's causing it. I've run a few tests. It didn't happen on a local test install, but on the zueblin.ch website I did. I've removed the bramus css extras plugin to make sure... still same issue. I have 2 TinyMCE fields on same template, so I thought this might be the next one to try. And then I tried to reproduce on my local install and I got same issue suddenly! Can you also try?

[ryan]

  Quote

I have 2 TinyMCE fields on same template, so I thought this might be the next one to try. And then I tried to reproduce on my local install and I got same issue suddenly! Can you also try?

The one I was testing with did have 2 TinyMCE fields (body and sidebar). Just went back and tested again, trying to reproduce in both of them, but no luck. I am running 2.2, which uses a newer version of TinyMCE than 2.1. I'm wondering if this issue might already be resolved in 2.2 by that update? Let me know if you have a chance to try this with the latest version and if it still occurs?

Thanks,

Ryan

[Soma]

Ryan, I still get this issue, or related to this:

When I insert a link, everthing is fine, but when editing the link again, it doesn't change the url, in my case it just inserts a new "invisible" link as mentioned above.

BUT also editing an already placed link to check the "open in new window" option, it doesn't do anything, unless I change the URL. I get this no matter what PW version or tinyMCE version... and it get annoying, cause inserting/editing link is some basic feature every CMS should have no problem at all.

The invisible, double link behaviour is something I can't really reproduce in other PW installs other than the one I experience.

Can anyone, please test this out on their install? I think it's something in the link dialog from PW, combined with TinyMCE...

EDIT: looking again little closer in the PW pwlink/editor_plugin.js

if($node.is("a")) anchorText = $node.html();
 else anchorText = selection.getContent();

if(target.length > 0) target = ' target="' + target + '"';
if(url.length) { 
 html = '<a href="' + url + '"' + target + '>' + anchorText + '</a>';
 tinyMCE.execCommand('mceInsertContent', false, html);
 alert(html);
}

There seems to be an issue with the code here. It constructs (if editing a already set link) a link inside a link. So the "html" returned is wrong...

I'll try to find a better solution to this... or if anyone wants to help, I'd appreciate it!

[Soma]

Playing around with it a little I think I've found a solution...

in the pwlink/editor_plugin.js on around line 80 I've did the following

if($node.is("a")) {
anchorText = $node.text();
  //alert("A:"+anchorText);
}
else if($nodeParent.is("a")) {
anchorText = $nodeParent.text();
  //alert("Parent:"+anchorText);
} else {
anchorText = selection.getContent();
  //alert("Text:"+anchorText);
}

So the parent node check was somehow needed, otherwise the whole <a...>text</a> get's returned for the link text if a link is already there selected to edit...

It surprizes me really that nobody has experienced yet.

I would attach the file for you to test but I can't see upload anymore here.

Attached modified js file.

(Also the inserted twice bug I experienced is gone, when I updated to the 3.4.7 TinyMCE)

editor_plugin.js.zipFetching info...

[ryan]

Soma, I actually did run into the issue where I couldn't change a URL for an existing link recently. It happened on a client's site. Then I couldn't reproduce it locally, but clearly there's an issue. Thanks for your work in helping to resolve this. If you think it's ready, I will go ahead and commit your solution to the source (unless you prefer to do a pull request). Or let me know if you think more testing is needed here and I will plan to work on it as soon as possible.

[formmailer]

I have similar issues on my dev. site (running xammp). I can't change existing links, but have to delete the link first and than create a new one.

I also ran into the empty link issue.

For some reason I haven't reported the issue. I think because I blamed it on Windows running Xampp.

I'll replace the file on my system and will test it.

/Jasper

[Soma]

Great thanks formmailer for the testing! Never blame it on something you don't know!

[ryan]

Thanks Soma, tested here and all seems to work well! Thanks for resolving this issue.

[formmailer]

I replaced /wire/modules/Inputfield/InputfieldTinyMCE/plugins/pwlink/editor_plugin.js with the Soma's version, but for me it looks like the issues are still there.

Just got an empty link and it isn't possible to edit an existing link. Instead I have to delete the link, and add a new one.

/Jasper

[Soma]

Thanks for testing. Can you try clearing cache again? I also once thought it isn't working but then it suddenly worked.

[formmailer]

I cleared the PW cache before testing, but didn't clear the browser cache. Will try that later today.

/Jasper

[formmailer]

Soma, you were absolutely right. Clearing the browser cache solved te problem.

Thanks!