There is a superior visual editor for WordPress that you can install and configure to your site in 2 minutes. It’s called TinyMCE Advanced. It offers a rich expansion over the default editor, particularly:
- Imports all CSS classes from the main theme stylesheet and add them to a drop-down list.
- Support for making and editing tables (with a very cool context sensitive menu to add, delete and merge columns and rows, set table properties etc).
- In-line CSS styles.
- Advanced link and image dialogs that offer a lot of options.
- Search and Replace while editing.
- Support for XHTML specific tags
- Add/remove (div based) layers, with relative or absolute positioning via drag-and-drop etc.
Here is how it works:
- Search, install and activate “TinyMCE advanced” from Plugins > Add new
- In Settings > TinyMCE Advanced, drag and drop as many icons as you want (or all of them) from the bottom panel onto the 3rd line of the toolbar.
- Check “Import the current theme CSS Classes” at the bottom
- “Save Changes”
Now (for example) in your visual editor, highlight any text and choose the applicable style (ie. “redcheck”) from the drop-down:
Your style will be applied:
Notes:
- If you are using Firefox, the context menus Cut / Copy / Paste are disabled by default by the Firefox security settings (which can be very annoying). You will need to enable them using the information in this article (installing the AllowClipboard Helper plugin).
- The function to import the current CSS doesn’t work in Atahualpa or other CSS files that are automatically-generated or complex. You will need to cut-and-paste into the TInyMCE custom CSS file (see the bottom of Settings > TinyMCE under “Advanced”)
- Only “pure” CSS classes will get imported, ie. “div.redcheck {…}” won’t work and neither will “.redcheck li {…}”
For more information on changing list and bullet style in WordPress see also the following article.
[...] content will be edited with the help of TinyMCE rich text editor which allows you to add images, embed media, and almost [...]
[...] the rest here: Using the Wordpress advanced visual editor (TinyMCE Advanced) to apply CSS styles, edit tables, sear… Tags: add, div, dropdown-list, mce, [...]
I’ve installed tinymce advanced. Making tables is easy, but once I have made a table and set it’s properties, I cannot figure out how to change them. I seem only to have the ability to insert a new table. Can you direct me to any info on editing tables?
Karen,
just right-click in the visual editor box over the table that you want to modify :)
Doh and thanks. How truly embarrassing!
[...] Read the original here: Using the Wordpress advanced visual editor (TinyMCE Advanced) to apply CSS styles, edit tables, sear… [...]
[...] See the article here: Using the Wordpress advanced visual editor (TinyMCE Advanced) to apply CSS styles, edit tables, sear… [...]
Installed tinymceadvanced but can’t drag’n'drop any features up to the toolbar. Also it doesn’t appear to save settings. Ideas?
Does this plugin take a lot PHP memory? I had it working on a clients site but after a month they could no longer switch between the HTML and visual tabs when this plugin was installed. Also the drag and drop interface has stopped working altogether. Quite odd.
Possibly yes. I have not had this particular problem though, it is odd.