Make Wordpress Editor Less Evil
This Friday, Jesper and I had a chat about things we don’t like about the current WordPress WYSIWYG editor. In particular when trying to write code examples in our posts:
Jesper: One change I really would appreciate in the next Wordpress would be the ability to shift wysiwyg/code editor directly on the edit page
(Now we have to change it on the user prefs page)
Thomas: now = today
Jesper: aggreed! the sooner the better!
I would like always to put my setting to wysiwyg off and turn it on when editing a post individually. Too often I have burnt my fingers and messed up posts containing code, blockquotes or formatted whitespace
If the control were moved to the edit page I could easily write wysiwyg when needed and avoid it when it would mess up my post
Thomas: Yes… it should be possible to tell WordPress that a given post should always open with WYSIWYG off (or on) whenever it is edited… dismissing the default settings
Jesper: exactly!
wysiwyg MUST be off by default because it’s darn destructive! (at least in the current versions of the wysiwyg editors)
Thomas: I wonder if there exists some WP plugins out there that do this already
Jesper: Good question!
Thomas: … or even better doesn’t mess up custom code or HTML
(I mean… hacks WP so it doesn’t)
Jesper: I hate the double/single quotes that WP replaces.
All code examples stop working unless the author manually replaces:
'(single quote) with '
"(double quote) with "
Thomas: I think that there is a simple solution to the quote issue… it must be fairly simple to change that
*searching for a fix*
Sent at 11:04 PM on Friday
Thomas: hmmm it seems to be hard to find
Is the problem that you write a regular quote and WordPress translates it into a html entity or the other way around?
Jesper: The problem is when posting code snippets, HTML or JavaScript for instance. The regular quote (double quote) is automatically translated to the angled double quotes — the same illness as Word does by default.
It’s an illness, in my opinion.
Leave it up to the user to actively change my text
Don’t spoil my code snippets by default.
Making normal quotes in normal text pretty is just not a great tradeoff …
Thomas: depends… the quotes them selves look great when wrapping sentences – but doesn’t work for code – I agree
After this chat I did some googling and found – as I expected – that we are not alone when it comes to the angled quote issue. The quote replacement is actually called “Smart Quotes” in WordPress, and there is a good discussion on the topic over at WordPress Support.
I also found a very good blog-article on the subject by Aaron Russell called “Trials and tribulations of using WordPress to display code syntax“.
What we want…
The most optimal solution would be a WordPress plugin that simply disables smart quotes inside <code>…</code> blocks. To top it of it should also escape the &, > and < characters.
Can you help?
Do you know any plugins that actually do what we would like? Any settings we overlook in WordPress? If not, I guess we will have to convince somebody into changing a future WordPress version.
Technorati Tags: wordpress, editor, wysiwyg, quotes, code, usability, source code
January 7th, 2008 at 16:35 (UTC)
Ok, I think I’ve got what you want. Check out my brand new plugin, CodeQuote. Test it out and let me know what you think, of if there are other entities besides apostrophes and quotation marks that should be tweaked. I’m looking into how WP handles ampersands and less than and greater than symbols also. http://www.planetmike.com/journal/plugins/codequote/
April 1st, 2008 at 11:02 (UTC)
Michael,
Thanks for the plug in. I also hate the WYSIWYG editor that word press uses. I would much rather hand code everything. I usually keep a copy of each post on my computer with the original code so I can copy and paste it into WP if I need to edit a post and not worry about it getting screwed up.
April 11th, 2008 at 17:48 (UTC)
I think there was an option in Wordpress admin area to turn off WYSIWYG editor. (wow it was hard to code the editors name :)) or maybe i am mistaking it with another script. still it’s worth to check again.
May 4th, 2008 at 18:03 (UTC)
hey cool cheers planning to put some code snippits soon on my blog also, thanks for sharing.
May 5th, 2008 at 01:54 (UTC)
is there any WordPress WYSIWYG addon to change default WYSIWYG ?
May 6th, 2008 at 05:46 (UTC)
Michael,
Thanks for the plug in. I also hate the WYSIWYG editor that word press uses. I would much rather hand code everything… :)
May 6th, 2008 at 17:18 (UTC)
yeah i dont like that wp version.
i hope they make it better !
May 10th, 2008 at 00:47 (UTC)
open the instal folder find editor and then comment it
you can even replace it fck editor its better than word press editor
May 10th, 2008 at 17:38 (UTC)
Thanks for plugin , but i don’t understand how install it
May 10th, 2008 at 20:27 (UTC)
Thanks for information
May 11th, 2008 at 20:10 (UTC)
Thanks for the plug in. I read the article with pleasure.
May 11th, 2008 at 20:21 (UTC)
Thanks for information. I also hate the wysiwyg editor that word press uses.
May 11th, 2008 at 20:23 (UTC)
Hallo, very interesting article. I completely agree with Kpraldr.
May 11th, 2008 at 20:31 (UTC)
I olso keep a copy of each post on my computer with the original code.
May 13th, 2008 at 14:21 (UTC)
I have a “quote” issue as well. Does Michael’s plugin work?
May 14th, 2008 at 13:59 (UTC)
Hi, My CodeQuote plugin has a few bugs in it. Grumble, grumble. I need to sit down and work out the problems. Basically, if you have multiple lines you are needing to quote, my plugin fails, or at least doesn’t work completely. :(
May 17th, 2008 at 01:33 (UTC)
Do i need to install the plugin on a server?
I only have a abc.wordpress.com – the free blog!
How can i use plugins?
May 21st, 2008 at 18:18 (UTC)
Thanks for the plug in. I read the article with pleasure. But How can i use plugins?
May 22nd, 2008 at 06:57 (UTC)
I would appreciate some reviews on Michael’s plugin if anyone has used it.
Thanks
Plugin
May 22nd, 2008 at 16:39 (UTC)
This is a great post. It is a very nice blog too. I add it to my favorites. Thank you
May 23rd, 2008 at 10:03 (UTC)
Hi,
Do you really need a plugin to escape the “&, > and <” characters?
I use wordpress myself, and with some PHP this can be done quite easily.
Anyway, i think the wordpress editor is cumbersome :/
May 27th, 2008 at 01:46 (UTC)
Some people can be mean and this is the way of the world while other people are quite nice. This is a very long and interesting article please keep up the great work on bloggin.
May 30th, 2008 at 14:36 (UTC)
wysiwyg editor that word press use is sucks
June 2nd, 2008 at 16:44 (UTC)
Thanks for the plug in. I read the article with pleasure.
June 8th, 2008 at 20:33 (UTC)
Personal I like the smart quotes… Of course if you want more freedom in editing your post that plugin is very useful.
June 8th, 2008 at 22:07 (UTC)
Yeah I quite like it too, but the extras you can do with the plugin make it well worth while.
June 12th, 2008 at 22:26 (UTC)
Who know good wordpress plugin for working with images?
June 21st, 2008 at 17:35 (UTC)
Brenda Quiles, for my point of view, the best plugin for working with images is ImageManager
June 22nd, 2008 at 15:32 (UTC)
I’d say try out CodeQuote, it’s worked nicely for me, but I do agree that I wish WP would just fix this issue rather than us having to use a band aid.
June 23rd, 2008 at 17:44 (UTC)
I tried CodeQuote last night and it seems to work well.
Thank you very much for sharing.
P.S. – Does anyone know if/when WP plans to support full blown SQL server.
Regards,
Bob
June 24th, 2008 at 17:13 (UTC)
I could never understand why wordpress has that horrible WYSIWYG editor. I think that WP should be making things more easy for users. I found it all a bit too difficult which is why I ended up using blogger, which I know is terrible but at least anyone can use it.
June 27th, 2008 at 02:03 (UTC)
Ha, these comments are a joke… I mean, does anyone have anything of substance to say here. Everyone is chiming in and saying the have a blog and it’s a problem but there is no substance whatsoever. Can someone that understands this completely please answer Thomas’ question.
Do you know any plugins that actually do what we would like? Any settings we overlook in WordPress?
Stop all the pointless chatter just so you can say you commented, grab some juice and run. Somebody answer Thomas’ question or shut the hell up.
June 30th, 2008 at 16:50 (UTC)
The WYSIWYG editor was ok for general editing but the CodeQoute makes posting to my discount code site soooooo much easier :)
Thanks for the plugin
July 1st, 2008 at 22:13 (UTC)
Has anyone used Michaels plug in yet?
I actually like the wysywig editor since I learned how to use WP with it. the only challenge is when I try to embed a you tube.
for that I need to disable, then re enable.
July 9th, 2008 at 15:16 (UTC)
thanks you messages
July 28th, 2008 at 23:28 (UTC)
I like the quotes… whatever it’s needed a new plug-in based on more buttons because a lot of us aren’t web designers.
July 29th, 2008 at 16:31 (UTC)
I’ve tried Michaels plugin and it works fine for me.
July 30th, 2008 at 02:31 (UTC)
CodeQuote is a good plugin not the top of the line but sufficient for what I needed.
Thanks!
August 1st, 2008 at 16:14 (UTC)
“Users” > “Your Profile” > “Use the visual editor when writing” (turn it off).
August 1st, 2008 at 20:44 (UTC)
to the question of which plugins seem to work well, I always use all-in-one-seo pack, as it gives alot of functionality for seo’ing a WP blog.
Another one that I use and I like is What Would Seth Godin do. It allows you to put in anything you want and it shows up on every page.
Lastly, one I hear that works well, although still looking for is related post plug in. That one will find older posts on your blog and list them with related keywords. It helps add more content to the post, and can get readers to more aged posts.
August 2nd, 2008 at 23:31 (UTC)
I’ve used the plugin too, works fine here…
August 8th, 2008 at 23:00 (UTC)
Hey all,
I have a blog that is on WP 2.6, and I was able to insert a you tube vid in to the html yesterday, no problems.
The new update may have solved the issue.
kim
August 9th, 2008 at 14:19 (UTC)
I think they’ve made improvements in the WP 2.6 version. However, like others above me, I still like to code by hand. What Lion head said is interesting… You can take out the editor and replace the WYSIWYG editor?! I need to check that out…
August 28th, 2008 at 03:42 (UTC)
I use a plugin to execute php in the pages of the blog, and display a google map. When I do posts I always use the WSIWYG editor and of course, when I go into the pages to edit them all the code goes away. What I do here is open a post, disable the WYSIWYG editor and then go to edit the page! That feature with the setting saved for each post and page would be great!
September 14th, 2008 at 11:38 (UTC)
I haven’t edited any of post till now but I think new Wordpress is now free of such things. i shall be checking it by editing some of post in new wordpress2.6.2. Anyhow I always write content in MS Word then copy it to Notepad and then transfer it to Wordpress. The problem I have with wordpress is its image manipulation. That should be handled fairly and am not satisfied by their current manipulation.
September 20th, 2008 at 11:05 (UTC)
Brenda Quiles, for my point of view, the best plugin for working with images is ImageManager
September 26th, 2008 at 10:46 (UTC)
Yes, I agree with tony that 2.6.2 has taken care of those issues. I gotta learn coding, for me wysisyg is a crutch!
October 25th, 2008 at 01:45 (UTC)
I think the latest version of WP has resolved some of the WYSIWYG editor problems. I would agree that blogger is much easier to for the person who doesn’t code.
November 21st, 2008 at 20:01 (UTC)
Wordpress editor can be confusing at times. I rather use themes that have some kind of back end management system. I dont know much about wordpress and thats why I do that .
November 26th, 2008 at 08:34 (UTC)
Does anyone know if there is a way to disable smart quotes within Word itself?
I write articles for ezinearticles in word first, then copy and paste into ezine’s interface. All formatting comes over fine, except the damn smart-quotes, which I have to go back and remove by hand.
BTW, FCKeditor works pretty well for me, other than some minor spacing issues that happen, much better than default interface…
December 20th, 2008 at 06:06 (UTC)
The following link will tell you how to disable smart quotes: http://ezinearticles.com/?Microsoft-Word-Smart-Quotes-and-Article-Marketers-Dont-Mix&id=15624
I have also pasted the info below.
How To Disable Microsoft Word’s Smart Quotes:
1. On the Tools menu, click AutoCorrect Options, then click the AutoFormat As You Type tab.
2. Under Replace as you type, select or clear the “Straight quotes” with “smart quotes” check box.
Alternatively, you can copy your entire MS Word document over to a non Microsoft text editor (EditPlus, UltraEdit, TextPad, etc) and do a simple search and replace. Search and replace the smart quotes into standard quotes, apostrophe’s, dashes and dots if applicable.
December 20th, 2008 at 19:19 (UTC)
Anyhow I always write content in MS Word then copy it to Notepad and then transfer it to Wordpress
December 20th, 2008 at 20:15 (UTC)
for my point of view, the best plugin for working with images is ImageManage
December 22nd, 2008 at 12:46 (UTC)
You can use a different WY editor or just try to turn off the use the visual editor when writing option at pour profile.
January 7th, 2009 at 23:01 (UTC)
The latest version of WP resolved some issues with editor problems.
January 15th, 2009 at 13:35 (UTC)
I think the latest version of WP has resolved some of the WYSIWYG editor problems. I would agree that blogger is much easier to for the person who doesn’t code.
January 15th, 2009 at 13:36 (UTC)
Yes, I agree with tony that 2.6.2 has taken care of those issues. I gotta learn coding, for me wysisyg is a crutch!
January 15th, 2009 at 13:37 (UTC)
You can use a different WY editor or just try to turn off the use the visual editor when writing option at pour profile.
January 24th, 2009 at 22:37 (UTC)
open the instal folder find editor and then comment it
you can even replace it fck editor its better than word press editor
January 24th, 2009 at 22:38 (UTC)
Brenda Quiles, for my point of view, the best plugin for working with images is ImageManager
January 29th, 2009 at 19:21 (UTC)
my point of view is number one wordpress i like to wordpress thak you wp :p
January 30th, 2009 at 05:28 (UTC)
Great article. I’m new to WP and it’s editor is a bit difficult to use for me. This would help me a bit. Thank you for the awesome post. Appreciate the work.
January 30th, 2009 at 11:43 (UTC)
for my point of view, the best plugin for working with images is ImageManage
February 8th, 2009 at 05:11 (UTC)
I gave up editing online via the wordpress editor. Too many times have I lost a post because of some weird bug or crash. There’s plenty of offline editors around, I use one of those.
February 20th, 2009 at 13:29 (UTC)
[...] I want to take some time right now and give a shout out to someone who has made my life easier by showing me how to make my wordpress text editor less evil. [...]
February 24th, 2009 at 14:22 (UTC)
Michael Clark, thanks for your link.
It’s one of the problems I’m facing every day working with my blogs.
And, you know, it’s always not enough time to knuckle down and search for a proper solution. But today I stumbled upon your post and I’m really lucky having one problem less. Thanks. :)
March 12th, 2009 at 17:42 (UTC)
Thanks for the writeup and link :)
March 17th, 2009 at 20:19 (UTC)
Nice work. I had old version of Wordpress and always wanted to solve this problem. Thanks.
March 17th, 2009 at 22:38 (UTC)
Michael,
Thanks for the plug in. I also hate the WYSIWYG editor that word press uses. I would much rather hand code everything. I usually keep a copy of each post on my computer with the original code so I can copy and paste it into WP if I need to edit a post and not worry about it getting screwed up.
June 14th, 2009 at 23:23 (UTC)
Great article. I’m new to WP and it’s editor is a bit difficult to use for me.
June 16th, 2009 at 10:31 (UTC)
The latest version of WP resolved some issues with editor problems.
I am agree with this poster.
June 21st, 2009 at 13:20 (UTC)
I used to use an offline editor such as ms word before I post an article. But there is a hidden visual editor in wordpress, I saw it on the net. There’s a shortcut and when you press it the visual editor pops up. It would make the job much easier.
July 4th, 2009 at 02:34 (UTC)
i know about two larger wpmu blog networks where the visual editor is a constant source of uncontrollable errors, which the users themselves cannot see or fix because the code view shows some terrible mixup hiding tags and copy and paste metadata trash. try and send it to the w3c validator. this piece of software sucks badly. the wikipedia editor works much better .