There is a desperate need for an improved visual editor.
TinyMCE is a faithful component to many successful content managers but it's simply outdated and very buggy for non-technical users.
I recommend replacing the TinyMCE editor with a new one entirely or making some major enhancements. Here's what I recommend:
- Integrate a "Simplified Editor" & "Advanced Editor" views (Similar to the "Kichen Sink" functionality with TinyMCE).
- Ensure the editor doesn't insert extra code remove user inserted code (such as spaces or code entered while in "Code View"). Ex. TinyMCE will add span tags in a seemingly erratic pattern. It also removes line breaks and paragraph tags if additional plugins that hack TinyMCE aren't installed.
- Ensure the editor produces clean and compliant code. Ex. it inserts "<p><br class="spacer_" /></p>" when it should insert <p> </p> or a
- Implement jQuery into the editor to utilize AJAX requests and harness the power of the jQuery UI instead of the visually displeasing TinyMCE skin.
- Improved table editing. Out of 150 clients I don't have more than five that can successfully use the table editor. Ex. The icons for the various table functions (like add cells, remove cells, etc...) are cryptic and too small for older people to clearly see and understand. Many non-technical people don't understand how to use a table without drag-and-drawing functionalities. This is a crucial element when designing the layout of a page from a non-developer-and-visual-editor users' point of view. If you create a table that doesn't have a defined width or height it's literally impossible to place your cursor between table cells to insert text or images.
- Simplify the way the visual editor inherits theme styles. Ex. create a function that looks for a "global.css" file in the theme's directory like it does with "styles.css". That way developers can use a single stylesheet for globals across the site and globals in the visual editor.
- Once jQuery is implemented integrate "drag and drop" functionality for a simplified approach to adding images to the visual editor. Ex. A user drags an image from their desktop and drops it onto the spot they choose in the visual editor. It shows a loading symbol then fades in a polite message bubble with a thumbnail and other fields that TinyMCE currently asks (alt, class, link, dimensions, etc...). After the user has set those values that click "Done" and it's automatically placed in the spot they selected and added to the "Media Library".
- The visual editor should be applied to custom fields. If users want straight HTML they can just click "Code View".