Turn your existing WordPress editor into the following WYSIWYG powerhouse:
Thanks to Chris Carson of Navy Road Software
, I am pleased to announce the new version 0.5.0 of the Advanced TinyMCE Editor for WordPress. The Advanced TinyMCE Editor plug-in builds from previous releases by Assaf Arkin of Labnotes and me (see earlier documentation), and updates it to be compatible with the current WordPress v. 2.2.
The Advanced TinyMCE Editor plug-in:
This version 0.5.0 upgrade, largely from Chris, makes these improvements:
Again, Chris, many thanks!
These changes have also led to complete updates to the download and installation, installation gotchas, detailed features, and how-to-modify instructions below.
TinyMCE and its advanced options are from Moxiecode Systems AB. Please note that the Advanced TinyMCE Editory plug-in has not been tested in WP versions prior to 2.2 and has not been tested in all browsers beyond Firefox and IE. Comments and improvements are welcomed!
Download version 0.5.0 of the zipped Advanced TinyMCE Editor from here (advanced_tinymce_050.zip; 192 kb)
Installation instructions are:
/wordpress home or root - that is, your WP starting point/
/wp-content/
/plug-ins/
advanced-tinymce subdirectory [copied here]
Once copied over, the subdirectory will contain three files: advanced-tinyMCE.php, control_panel.php and a read_me.txt file.
/wordpress home or root - that is, your WP starting point/
/wp-includes/
/js/
/tinymce/
/plug-ins/
[subdirectories for plug-in additions — copy here]
Please note that your target subdirectory will itself already include a number of additional TinyMCE plug-ins that came as part of the standard WP installation; do not erase these! They supplement the new functionality you just added.
Unlike normal plug-ins, the need for Step #4 results from the tight integration of the distributed TinyMCE in WordPress.
If you have any problems, carefully repeat the above steps. If problems still remain, re-install your original configuration from the backups.
Once the Advanced TinyMCE Editor plug-in is installed, you configure the editor for style sheets and which buttons you want to have active from the Control Panel. This panel is accessed via the Options > Advanced TinyMCE menu items on the WP administration center:
Please note that you must Save Settings on this display before your changes become active. And, when first installed, you also need to select Save Settings to initially activate the plug-in.
The Advanced TinyMCE Editor enables you to make assignments and display user-defined styles via dropdown lists. You can add any style sheets you wish (typically, ‘style.css‘) in the Control Panel, and their embedded styles will then become available for assignment and display in the editor.
To enter a new style sheet, you must provide the full URL path in the Control Panel dialog (including the http://!). See the example in the above figure. Also, you can enter multiple style sheets, so long as each one is separated by a comma.
Note: Stylesheets containing complex declarations may not be displayed correctly by the Advanced TinyMCE Editor. Make sure the stylesheets entered here contain only simple class declarations, e.g., ”.someclass”. If you see a stylesheet declaration not show up in the Editor, consider splitting out the direct and simpler declarations into a separate file.
If you are familiar with earlier operation of this plug-in, you will know that style sheets are initially specified in the tiny_mce_config.php file (see discussion under Deprecated below). You may still do so, and any style sheets in this file will also appear within the editor dropdown lists. However, only style sheets that you enter directly on the Control Panel willl appear in this Control Panel dialog.
This feature to add your own style sheets can also be helpful when you are testing many style options. You can temporarily define a test_styles.css file somewhere on your system, modify individual styles and refine what you may then want to later keep. After testing, you can save your final styles to a permanent style sheet location and delete the temporary style sheet reference from the Control Panel.
Note: When you change or add style sheets, you may need to do a cache flush using Clear Private Data within Firefox (see below) due to a known browser bug before your changes show in the editor.
The 60 or more functions in the Advanced TinyMCE Editor are organized by row and clustered by group. A group is separated by others within a row by a separator bar.
Chances are that some or many of the functions in the Advanced TinyMCE Editor may not be of interest or use to you personally. The Control Panel enables you to select which of these functions will display in the editor. If all items in a given group are unchecked, the entire group and its separator bar will also not display.
The Advanced TinyMCE Editor adheres to the plug-in philosophy of not requiring any changes to the underlying WordPress code, including its baseline use of the standard, simple TinyMCE. Thus some choices are limited in the plug-in, such as the restriction that only three rows of buttons are available (among others). The rather fixed choices in the Control Panel for functions and buttons is a result of this philosophy.
Note: When you change editor buttons, you may need to do a cache flush using Clear Private Data within Firefox (see below) due to a known browser bug before your changes show in the editor.
Early distributions of the Advanced TinyMCE Editor caused sporadic complaints regarding crowding or overlapping of display buttons on smaller displays. This issue is particularly acute for older laptops limited to 800 x 600 displays. Under the worst case, that is combining all buttons and a small display, you can see something like the following (800 x 600 basis):
This is because the starting basis for advanced functionality in TinyMCE is hardwired into three rows, and each row forces the absolute width. However, even with such a small display, if you are willing to remove buttons (about 35% in total), you can still achieve a functional editing area:
Of course, a display this narrow has its own limitations. (Which is one of the reasons that 800-width displays are rapidly phasing out.)
At a 1024-width, there is still some overlap, as the following diagram shows. But, only removal of a few buttons can produce a very acceptable editing display area, and most users can easily remove some functionality (I personally do not have a need for R-to-L word wrapping and some of the Microsoft-specific functionality.)
By the time display widths reach 1280, all buttons and functionality can clearly be displayed. (Again, many users will still choose to remove some unused buttons in any event.)
(Some of these screen captures at lower resolutions are poor given the dynamics of my current flat-screen display.)
If these approaches are still not satisfactory, it is necessary to directly modify the underlying code.
Note: When you remove editor buttons from display, you may need to do a cache flush using Clear Private Data within Firefox (see below) due to a known browser bug before your changed display width shows in the editor.
link:http://www.mkbergman.com/?page_id=383
Tags: Advanced, Editor, TinyMCE
