Edit the page HTML, switch to Visual and your code changes are toast.

The standard editor is OK once you find your way around it… Like most things. It has Visual and HTML views. You can skip around updating text in the Visual mode and what you see is pretty much what you get. But when you want to get a bit more complex the HTML view allows you to play with the code. In theory this is great because you can switch between the 2 views quickly, make changes to the code and see what happens.

I wanted to format images and text on pages. The “Visual” view and standard media features seemed a bit limited and I couldn’t get text to flow around or position where I wanted in relation to the image. The Elbee Elgee theme site has a good demo with image and text layout examples. I copied a few lines of example HTML from the page source and it displayed on my page exactly as it should. I then edited the text and image source in the “HTML” view. It changed and no longer formatted correctly. A bit of experimenting showed that it was the switch between views in the editor that stuffs it up.

WordPress uses the TinyMCE editor. There are others that may solve the problem… See Below

The Problem

When you switch between views (Visual to HTML), the editor changes the HTML code you were just working on and stuffs it up.

It seem this is a common problem and there are some suggested solutions out there; like turning off the Visual editor and working only with code, and copying your code to another program, editing it and copying it back. As far as I’m concerned, these are not useful suggestions.

If you’re using WordPress, you are probably one of many doing so because it’s relatively simple, reliable and you are not a full time coder; and more importantly, don’t want to be.

If you know about the problem then you may be able to work around it by not using the “Visual” view for some or all pages. But eventually you will have a major “oh-crap” moment when you or someone else views a heavily HTML formatted page with the visual editor and in a flash all your hard work will be gone.

What’s the solution

As the standard editor does not allow simple HTML coding and switching between views using the buttons provided it is seriously faulty and reflects very poorly on WordPress. If there is a solution in using another editor, then maybe the default editor should be retired.

I think the correct solution is to learn to use the tools provided for adding media. It seems to be an old problem (dating back many years) that may not be a problem, but more a misunderstanding.

TinyMCE Advanced… does not solve the problem. It still makes changes to  the code and stuffs it up.

WP Editor… No luck. it also changes the code between views. There’s also a possible bug in switching to “Visual” view; I get one and a half view windows. It’s a nicer looking editor with colour syntax highlighting etc. The default or Ruby Blue themes looked OK; didn’t like the others.

I installed the TinyMCE plugin “Preserved HTML Editor Markup“. But it doesn’t entirely solve the problem. The code is less changed but still changed so that formatting/layout is broken.

I noticed first that in “Visual” view all the paragraph formatting had gone and pressing Enter at the bottom of the post moves the cursor to the beginning of the line without a line-feed. Although when you type, it corrected the view.

A bit alarming to begin with, “Preserved HTML Editor Markup” changed the appearance of all posts and pages. In “site-admin, setting, write” there is a reformat tool which worked (backup first). Having now reformatted the site I’ll leave the plugin active and get used to the differences.

In the process of trying all this I activated the “TinyMCE Advanced” plugin. It adds buttons to the editor. I’m still deciding if it will stay.

There is a WordPress Support Forum discussion – here.

Displaying code snippets

WordPress doesn’t make this easy either. I installed the plugin “Developer Formatter” which seems to work but the code segment gets stuffed up by the editor. Even without using the “Visual” view. Simply “Updating” from the “HTML” view changes the code… So I’ve disabled this plugin.

I have enabled the plugin “WP-Syntax”. It works from the “HTML” view and you can “Update”, all OK. But if you swap back to “Visual” view, the editor strips the display setup off the code and it turns to crap.

The real problem keeps coming back to TinyMCE simply not being able to cope; too much checking and correction or something. Or am I missing something?

It makes me wonder why it’s a problem? Why hasn’t it been fixed? If I’m doing something wrong, why can’t I find the solution? Surely there is a decent editor to replace TinyMCE that provides WYSIWYG and HTML editing without stuffing it up???

Editor Update

So far, I really don’t like the editor TinyMCE + the 2 plugins. Without going through the configurations the defaults require double enter presses in the “Visual” view and puts p and br tags and all over the place; the code looks a real mess. I looked at the configuration in “settings, write”, and I just made it worse and had to fix it manually.

I’ve wasted the best part of 3 days on this now.