Sweet Links plug-in for Wordpress TinyMCE Advanced
Written on 6th June 2010. 29 comments
Having worked entirely with Wordpress customisation the past few months, it became quite apparent early on that there are some obvious limitations with the default WYSYWG editor - TinyMCE.
Training clients to use TinyMCE in a CMS environment is pretty smooth right up to the part when I show them how to create a link to an existing page or post. The (reasonable) expectation is that the 'insert link' dialogue should display a list of every page, post or file you've added and created, and then simply select one to make the link.
Unfortunately that's not how it works. Instead Wordpress forces you to either create a list of commonly used links which you can access through the dialogue, or even worse go to a previously created page and copy the URL, then go back to the page you were on previously and paste it in. Both ways are excruciatingly painful, so I thought I'd do something about that.
Introducing Sweet Links
Sweet Links is my first Wordpress plug-in, and it does exactly as the clients expect. It takes about a minute to install and set-up, but bear in mind I've designed this to work with the TinyMCE Advanced editor plug-in, as that's my editor of choice for Wordpress and it lets me pick and chose what I give clients access to. Please note that this plug-in will not work on TinyMCE standard (that might come in a future release).
As you can see from the screenshot it's pretty straight forward. All links are in their own tabs - pages, posts and files (images, documents etc). You can still manually type in a URL if you prefer (like an external link for example).
1 Minute set-up
Assuming you've already installed and activated the TinyMCE Advanced plug-in, then...
1) Download the Sweet Links package here (13k)
2) Go to wp-content\plugins\tinymce-advanced\mce\ and make a backup of the advlink folder (in case you change your mind about this plug-in later and want to go back to the old version)
3) Extract the files from the zip into the wp-content\plugins\tinymce-advanced\mce\advlink folder (over-write anything if prompted)
That's it - you're done.
To try it out just open a page or post and create a link in the usual way, but you'll see my plug-in launch instead of the default 'inset/edit link' dialogue.
Some things to note
I've deliberately left out a lot of features that you might have seen on the old dialogue, like the ability to create pop-ups, open in new windows (target="_blank" is deprecated in XHTML strict anyway), assign classes and ID's etc. This is because there was so much information that even when ignored it's very presence not only overwhelmed the user, but also allowed for potential mischief.
I've deliberately kept it simple and inline with what our clients expect - no fuss - just making links.
!important: You have to use the custom link structure %postname% which can be specified in Settings/Permalinks in the Wordpress back end.
How can you go back to the old version?
If you prefer the original insert/edit link dialogue that comes with TinyMCE Advanced, simply copy all the files you backup up earlier back into in the advlink folder and over-write anything if prompted.
Upgrading
Upgrading is as easy as simply overwriting everything in the advlink folder with any new version you get from here.
Disclaimer
This product is an alpha work in progress and comes with no warranty of any kind, so use at your own risk. Always backup your data before trying new plug-ins. That being said, there's nothing out of the ordinary with this plug-in and I've tested with success in Firefox, IE7 and IE8.
Feel free to report any problems and discuss below.
Download
Change log
- Added preview pane for images, pages and posts
- Improved colour coding
- Fixed IE layout issues
- Fixed error conflicting with other plugins
- Added new tab showing all items
- Made file type descriptions a little more user friendly
Comments
Leane
Very good! Now if the images could have previews it would be perfect. Hope you don't mind if I spread the love.
A Novice
That was easy. I like the different colours for each section.
That Web Guy
That's planned for a future release, along with a more traditional installation using the Wordpress 'add new plug-in' interface. It's tricky though because technically I am adding my plug-in to another plug-in. I need to do some more research first.
Miranda J
Fantastic! Can you get it to work on the normal editor?
Davo
Cool. Nearly missed the bit about permalinks. Congrats on a useful first plugin. Can't wait to see where you take it.
That Web Guy
Cheers. The next stage will be to make it installable just like any other Wordpress plugin. Just got to find some time for that now...
Sheldy
Thanks a bunch for that. Works nicely.
That Web Guy
Thanks for that. Glad to see it out in the wild more.
Anton
Hey, man, you can use get_post_permalink function to overcome setting custom post structure to %postname%
That way permalinks will always be generated properly, using WP internal settings.
Just use this for generating page URL's:
')">
Anton
Sorry, HTML parser cut a piece of code:
echo get_permalink($row["ID"]);
That Web Guy
Thanks Anton. It's only been a month and already I have a long list of things I wish I did differently the first time (the echo get_permalink($row["ID"]); was on the list too). I plan to implement that along with a lot of other changes one of these days.
The plug-in is my first attempt at anything like this and thus far it has been working very well on commercial web sites.
I also want it to be installed like a traditional plugin but I haven't had time to read up one Wordpress hooks etc. I think I need about 6 more hours in every day...
RT Wolf
This is sorta what I've been looking for, but really what I'd like is adding a textbox that TinyMCE can add where you can paste a link after selecting some text and a checkbox to open it in a new window. More advanced options come by clicking the button.
That Web Guy
Thanks RT. It was a deliberate choice as I made this plugin with our clients first and foremost in mind. It was obvious a lot of them were overwhelmed when there were too many options presented to them.
As a general usability rule I say if it gives them the potential to do something wrong, then I remove the feature rather than hope they remember not to touch said feature(s). Opening links in new windows for example aside from being a common usability issue (http://www.thatwebguyblog.com/post/dont_use_target_blank), is also deprecated in XHTML strict so I left out that option.
That being said this plugin can be easily adapted to have the advanced features and maybe one day I'll get around to it.
Acts7
Am I doing something wrong?
I've overwritten the files.
I highlight the text I want to link.
Click the "link" button
I see your popup window.
Then when I click what I want to link to, I click the insert button (bottom right).
However this refreshes the page underneath and your popup stays in place.
If I click the X to close your window - nothing is linked.
Also after clicking [INSERT] on your popup, I move the window over , and nothing has changed on the content.
Any guess?
Acts7
Here's one more bit of information.
I am not hosting at the root url
However your code, is inserting the root url
so Im at
www.mysite.com/mysitewp/about-me/
and your code is doing this
http://www.mysite/about-me/ (if I click on about me to insert as the link)
That Web Guy
Hi Acts7,
Feel free to edit the PHP to make it relative (or absolute) to your path, or maybe even using the Wordpress root variable might help.
As for the other issue you mentioned, I couldn't speculate on what might be causing that, but it doesn't sound like anything my plug-in could be causing. We use this plug-in 'out of the box' in stacks of web sites (2 more today in fact) and it works without a hitch.
If you do resolve it feel free to post your solution here in case somebody else is having the same issue.
Cassy
Works as prescribed...as soon as I remembered to activate Tinymce advanced. Thanks!
Acts7
I'm getting closer.
First off I discovered there was a bug in the latest installment of TinyMCE Advanced.
http://wordpress.org/support/topic/plugin-tinymce-advanced-tiny-mce-settings-not-saving?replies=11#post-1616976
There was a comment ( /* */) in the wrong place.
Okay, so now, when I click insert at least the page refreshes.
The problem I'm having is my highlighted text never gets linked.
Just to make sure I'm using this correctly:
1) select text block with mouse.
2) click the link icon
3) select from list of pages to link to
4) click insert
AT THIS POINT:?... should the insert window close and retun to the editor with the text link
Or should things refresh underneath the modal window and the insert link dialog remain open?
Mine remains open. and if I move the window out of the way, I still see the text selected. But not linked.
Acts7
Some more information that may assist troubleshooting.
In IE (anything) the text actually gets deselected when the modal window pops up to choose the link.
In Firefox, if I'm on any tab other than "Pages" (the first tab), it will refresh the page below, text stays selected.
BUT the modal window - switches back to the "Pages" tab - regardless of what tab I was on.
Nothing is getting linked.
I tried using the standard linking, it works.
I tried the TinyMCE Advanced - adv linking - it works.
For some reason - this is not functioning.
Any guesses?
BTW I forgot to mention in all my other posts - this is an amazing plugin. If I can get it working I'll let you know. But if anyone else has any insight... please share.
@That Web Guy - have you by chance tried running this plugin in anything but the root url?
I'm curious if that is my issue.
Acts7
tested on localhost install.
IT WORKS PERFECTLY
So if that is the case, does that point to an "almost certain" cause?
What would make it function locally but not on the remote server?
I have the exact same plugins installed.
That Web Guy
Glad you got it working for you. To answer your other question: I haven't tried it in anything but the root. You're the first to report having issues but thanks for posting your feedback and findings.
Not sure why it works locally but not remotely. A stupid question to ask but did you you upload everything?
Acts7
Yeah, Actually I uploaded it remotely first. Even uninstalled tinymce advanced and reinstalled that. Then renamed advlink folder and placed this back up. Now if I can just figure out why its not working remotely but is locally.
If I had to guess - its something with the way the text is passed to the links modal window. Something has to be interfering with it but I'm not sure what.
I'll post back with the fix soon as I figure this one out.
Thanks
Theo Ephraim
I know your todo list is just getting longer, but heres a simple one:
- Dont make assumptions about table names (or that the prefix is "wp_")
Nice plugin though. If I get some time I'll see if I can help out a bit. This is a serious problem in wordpress...
That Web Guy
Cheers Theo Ephraim - yeah I really should start looking at the next revision.
Good point about the wp_ prefix although it's a safe bet nearly everyone has it set in such a way. That said I'll make a point in the next revision to alert users to the fact.
Julian
Nice. Exactly what I've been looking for and worked exactly as prescribed.
Xim
I've got error:
Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in /wp-content/plugins/tinymce-advanced/mce/advlink/link.php on line 272.
..and can't insert links at all.
That Web Guy
Not sure why that is happening for you. Line 272 is the 'while' part of this statement:
$SQL = "SELECT * " .
"FROM wp_posts " .
"WHERE post_type = 'attachment'" .
"ORDER BY post_title";
$result = mysql_query($SQL);
while($row = mysql_fetch_assoc($result)){
Have you by any chance used a different table structure than the Wordpress default?
Darcina
The Web Guy delivers again. This is actually very usable and makes you wonder why the vanilla wordpress doesn't already have something similar.
Thanks.
Frederico
So far so good I'm liking it a lot. Works just like you say.