Plugin Name: Advanced TinyMCE Editor Plugin URI: http://www.mkbergman.com/advancedTinyMCE Description: Adds advanced features to the standard TinyMCE WordPress rich-text editor. Originally developed by Assaf Arkin, now updated many times. Not tested for prior to WP v 2.2 or IE. Added control panel by Chris Carson (chris@navyroad.com) allows selection of content stylesheets and enabled buttons. Version: 0.5.0 Date: 7/16/2007 Author: Michael K. Bergman Author URI: http://www.mkbergman.com/ License: Creative Commons Attribution-ShareAlike Tags: wordpress tinymce Changes by chris carson chris@navyroad.com (mostly) for version 0.5.0: -- encapsulated plugin code in a class -- added control panel under "Options" -- an input to enter the urls of content stylesheets, separated by commas -- for each row of buttons -- for each button group -- checkboxes for each button -- added WordPress option "Advanced_TinyMCE_Editor": associative array: -- css: string containing stylesheet URL(s), separated by commas -- btns: an array of buttons in the format $this->options["btns"][$row][$group][$btn] => $label -- added explanation about editor width -- see http://www.mkbergman.com/?page_id=383 for a description of button functions, other documentation INSTALLATION ------------ Installation instructions are: 1. Back-up the files in the two specific subdirectories used by the Advanced TinyMCE Editor as noted below 2. Download the zip file; unzip into a temporary reference location 3. First, copy over the entire Advanced TinyMCE subdirectory over to your standard plug-in directory: /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. 4. Second, update the TinyMCE js plug-ins directory by copying the multiple files in the subdirectory created from the extracted download. The target location for these files on your local system may be found at: /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. 5. Under the Plugins menu item in your WP administration center, activate the Advanced TinyMCE Editor option (if this plug-in does not display, you did not correctly finish Step #3 above) 6. Go to the Options menu item in your WP administration center, then Advanced TinyMCE and make configuration choices (see next section). You must save settings from this Control Panel screen before the plug-in becomes active 7. Go to the Visual editor under the Write or Manage menu options within your WP administation console 8. If you do not see the options and buttons you earlier selected, you will need to clear your browser cache (esp. for Firefox, which will likely require a full Clear Private Data flush, see below) and then refresh the page 9. Begin editing and then Enjoy! 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. CONTROL PANEL CONFIGURATION --------------------------- 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. Adding and Changing Styles -------------------------- 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://!). Also, you can enter multiple style sheets, so long as each one is separated by a comma. Note, 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. Editing Button Display ---------------------- 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. Editor Width ------------ 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. 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 turn off buttons in the Control Panel (about 35% in total), you can still achieve a functional editing area in an 800 x 600 display. Larger displays require fewer buttons removed and at a 1280 width, none are required to be removed. If these approaches are still not satisfactory, it is necessary to directly modify the underlying code. Note: When you delete 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 changed display width shows in the editor. FUNCTIONAL DESCRIPTION ---------------------- Using the convention for the three rows (A, B, C) of 60 buttons and dropdown lists, each of which is described below by row, group number and item from left-to-right. New functionality added by virtue of this Advanced TinyMCE plug-in above the standard advanced options in WordPress is shown with an asterisk (*). From top-to-bottom and left-to-right as they appear on screen, these buttons are: * A1a — ‘Undo” levels, typically set to 10 steps * A1b — ‘Redo‘ levels, typically set to 10 steps * A2 — standard ‘Print‘ for the post/page in the editor * * A3a — standard ‘Cut‘; may be limitations in some browser configurations * * A3b — standard ‘Copy‘; may be limitations in some browser configurations * * A3c — standard ‘Paste‘; may be limitations in some browser configurations * A3d — ‘Paste Text‘ for pasting without formatting; may be limitations in some browser configurations * * A3e — ‘Paste Word‘ for pasting Word with some formatting retained; may be limitations in some browser limitations * * A3f — ‘Select All‘ in the editor window * * A4a — ‘Format‘ dropdown according to standard CSS styles * A4b — ‘Font Family‘ dropdown to select font typeface * * A4c — ‘Font Size‘ dropdown to select font size * * A4d — ‘Styles‘ dropdown to pick existing styles * * A4e — ‘CSS Style‘ brings up a comprehensive popup dialog for editing or entering new styles, enabling styles to be edited visually * * A5 — the ‘HTML‘ button brings up a direct HTML editing window, with all code shown. Unlike the Code tab, all HTML codes are shown (but with conversion errors corrected; see discussion above) * * B1a — ‘Bold‘; standard function * B1b — ‘Italics‘; standard function * B1c — ‘Underline‘; standard function * B1d — ‘Strikeout‘; standard function * B2a — ‘Bullet List‘ is a standard function per existing CSS formatting * B2b — ‘Number List‘ is a standard function * B3a — ‘Justify Left‘, applied to highlighted text * B3b — ‘Justify Center‘, applied to highlighted text * B3c — ‘Justify Right‘, applied to highlighted text * B3d — ‘Justify Full‘, stretch text to margins for highlighted text * B4a — ‘Indent‘ highlighted text, sometimes treated as
* B4b — ‘Outdent‘ to return indented text to standard left margin * B5a — ‘Text Color‘ enables highlighted text to have color changed * * B5b — ‘Background Color‘ enables background for highlighted area to have color changed * * B5c — ‘Text/Background Color Selector‘ is a more general option for choosing any RGB value for text or background * * B6a — ‘Subscript‘ enables that for the highlighted text * * B6b — ‘Superscript‘ enables that for the highlighted text * * B6c — the ‘Character Map‘ brings up a popup dialog to insert special characters and symbols * * B6d — the ‘Emotions‘ button brings up a popup for a choice of emoticons * * B7a — ‘Insert Date‘ provides a date insert at the point of the cursor; format is settable * * B7b — ‘Insert Time‘ provides a time insert at the point of the cursor; format is settable * * B8a — the ‘Horizontal Rule‘ inserts a standard rule at the point of the cursor * * B8b — the ‘Advanced Horizontal Rule‘ allows the rule to have its formatting set via a popup menu * * B9a — ‘Image‘ brings up an advance image dialog, including image swaps * * B9b — ‘Media‘ enables Flash, Shockwave, etc., to be inserted at cursor position with settable parameters (not fully tested) * * B10a — ‘Link‘ is a more advanced link insertion and settings popup * * B10b — ‘Unlink‘ removes existing link settings * * B10c — ‘Anchor‘ enables anchor tags to be set in the current document * * C1a — ‘Table‘ insert or edit an existing table; major functionality, with specifics covered in the next few buttons * * C1b — ‘Table Row‘ for modifying entire table rows at a time * * C1c — ‘Table Cell‘ for setting specific table cell properties * * C1d — ‘Insert Row Before‘ * * C1e — ‘Insert Row After‘ * * C1f — ‘Delete Row‘ * * C1g — ‘Insert Column Before‘ * * C1h — ‘Insert Column After’ * * C1i — ‘Delete Column‘ * * C1j — ‘Split Merged Table Cells‘, as described * * C1k — ‘Merge Table Cells‘ for the highlighted selection * * C2a — ‘Citation‘ provides a means to put tags on highlighted text * * C2b — ‘Abbreviation‘ provides a means to put tags on highlighted text * * C2c –’Insert‘ provides a means to put tags on highlighted text * * C2d — ‘Delete‘ proovides a means to put tags on highlighted text * * C2e — ‘Attributes‘ provides a means to put tags on highlighted text * * C3a — ‘Direction LtR‘ sets scrolling and editing from left-or-right * * C3b — ‘Direction RtL‘ sets scrolling and editing from right-to-left * * C4 — ‘Spellchecker‘ toggles spell checking off or on; may work off of IE spell lists; also see documentation about spelling lists * * C5a — ‘Visual Characters‘ provides screen display of hidden characters like spaces (via and tab, etc) * * C5b — ‘Remove Formatting‘ actually has fairly minimal impact by removing cell and related spacing and formatting. Apparently has minimal effect on embedded codes; it’s use needs better documentation * * C5c — ‘Cleanup‘ is also not apparent, likely requires poor code base; not yet fully tested * * C6a — ‘Find‘ brings up a popup to search for the given string * * C6b — ‘Replace‘ allows replacement of the found search string * * C7 — ‘Fullscreen‘ expands the current editor space to occupy to full screen * * C8a — the ‘More‘ tag is a specific WordPress option for splitting posts into a summary and detailed entry, split at the point of insertion * C8b — ‘Help‘ brings up a minimal (unfortunately) WP-specific help on the editor; not very useful. Please note that the behavior and functionality of the image (B9a) and link (B10a) are also improved over the standard WordPress distribution. If you would like more information on the various button names, see the initial TinyMCE documentaton at: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference. KNOWN ISSUES ------------ These are the known issues with WordPress v. 2.2 and this plug-in. A Firefox Gotcha: Clear Private Data Caching Flush --------------------------------------------------- One problem common to the Firefox browser is the need to clear the cache before you see the plug-in buttons display properly. To do so, go to the main menu Tools > Clear Private Data and then select Cache and clear the data. Standard Advanced Toggle ------------------------ Apart from this plug-in, which corrects this hidden requirement, the standard WordPress distribution requires a toggle of Alt-V (IE) or Shift-Alt-V (Firefox) to toggle the standard editor’s advanced buttons on and off. Color Picker ------------ The More Colors option on the Advanced TinyMCE brings up a blank popup. (See http://trac.wordpress.org/ticket/4288.) In part to overcome this issue, we added an additional color picker from this source: http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=16270. See B5c. Possible WordPress v. 2.2 Issues -------------------------------- As an earlier post by me summarized (with other external references), there are issues of compatibility with many current plug-ins and WordPress v. 2.2. You may encounter problems with the Advanced TinyMCE Editor for these reasons, which may have nothing to do with the plug-in itself and may be devilishly difficult to diagnose and remedy. I expect releases after WP v. 2.2 to get increasingly stable. INSTRUCTIONS FOR YOUR OWN MODIFICATIONS --------------------------------------- The actual Advanced TinyMCE Editor plug-in is quite simple, even though installation is a little more complicated than for a standard WordPress plug-in. This complication is because of the added step of adding the new plug-in subdirectories to TinyMCE’s own JavaScript listings (see Step #4 under ‘Download and Installation’ above). But, with a little bit of familiarity, the simplicity of all of this becomes quite clear, which should enable you to make your own modifications and extensions. There are two simple parts to the plug-in. The first part is to place changed or added functionality into the plug-in subdirectories to TinyMCE’s own JavaScript listings (see Step #4 under ‘Download and Installation’ above). (Note simple re-ordering or removal of buttons does not require this part.) The second part is that the WordPress plug-in file — advanced-tinyMCE.php — (see Step #3 under ‘Download and Installation’ above) may also require some modifications. These are straightforward and described below for a couple of scenarios. With the instructions below, you should be able to remove, add, change the order of buttons, change editor behavior when in ‘code’ mode and update the system on your own when new releases of TinyMCE or WordPress are issued. Changing Group and Button Display Orders ---------------------------------------- To change the group or button display orders in the Advanced TinyMCE Editor, you will need to edit the advanced-tinyMCE.php file (the one placed into your standard /plug-ins/ directory), starting at about line 47. The basic layout of this portion of the file is shown below: $this->arr_btns = array( array( array( "undo", "redo"), array( "print"), array( "cut", "copy", "paste","pastetext", "pasteword","selectall"), array( "formatselect","fontselect", "fontsizeselect", "styleselect", "styleprops"), array( "code") ), array( array( "bold", "italic", "underline", "strikethrough"), array( "bullist", "numlist"), array( "justifyleft", "justifycenter", "justifyright", "justifyfull"), array( "indent", "outdent"), array( "forecolor", "backcolor", "advcolor"), array( "sub", "sup", "charmap", "emotions"), array( "insertdate", "inserttime"), array( "hr", "advhr"), array( "image", "media"), array( "link", "unlink", "anchor") ), array( array( "tablecontrols"), array( "cite", "abbr", "acronymn", "ins", "del", "attribs"), array( "ltr", "rtl"), array( "iespell", "spellchecker"), array( "visualchars", "removeformat","cleanup"), array( "search", "replace"), array( "fullscreen"), array( "wp_more", "wp_help") ) ); You can see this layout corresponds to the rows above (A, B, C, the first set of inset 'arrays') and then group (the second set of inset 'arrays') and then finally order within each group. The naming correspondence between a button label and its actual button should be evident in comparison with the functional listings above. (Note, a couple of the named array items are “extra” in that they do not result in a corresponding button display; for example, 'iespell'.) To change these orders and displays, simply manipulate the row and group items. Note you are limited to the three row arrays. Also note that, when completed, your edits will cause each group to be separated from the following one by a separator bar on the Advanced TinyMCE menu display. When you make such changes, always be careful about your use and location of quotes, syntax characters and spelling! Note each array listing must start and end with the parentheses. Adding Functionality -------------------- If you discover new functionality that you want to add to the editor, three steps are necessary. 1. First, you must copy the functionality file or subdirectory to the TinyMCE JS /plug-ins/ subdirectory (not your standard WP one!) (see Step #4 under ‘Download and Installation’ above). 2. Second, add the new function to the extended function array in the same advanced-tinyMCE.php file, beginning at about line 38: function Advanced_TinyMCE_Editor(){ $this->arr_plugins = array( "advcolor", "advhr", "advimage", "advlink", "cleanup", "contextmenu", "directionality", "emotions", "fullscreen", "iespell", "insertdatetime", "media", "print", "searchreplace", "style", "table", "visualchars", "wphelp", "xhtmlxtras"); The name corresponds directly with the file name entered under the plug-ins subdirectory. The order of entry does not matter. 3. And, then, third, add the associated button name (it should be described in the add-in functionality) to one of the three arrays noted above for 'Changing Group and Button Display Orders'. You should note that Moxiecode maintains a wiki with listings of additional plug-ins, and also keeps a series of look-up pages (check out all of the dropdown list pages!) for TinyMCE’s own included advanced functionality. There are also other add-ins that you might find at SourceForge or with a Google search. Changing Code Processing ------------------------ Since at least the WordPress 2.1 release, the TinyMCE editor has had the nasty habit of removing
tags when toggling between Visual and Code views. This comes from the WP team's (arbitrary) decision about this matter (and many others, see below). The code causing this nasty change is in the initial configuration file for TinyMCE, generally found under this path: /path-to-wordpress/wp-includes/js/tinymce/tiny_mce_config.php In that file you'll see this code: $valid_elements = 'p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]'; What this code basically says is to replace all
tags with

tags, and with and respectively, keep all font and bullet tags, and then, as a capper, keep all remaining all other tags not specifically listed (*[*]). Actually, this is all pretty good practice to use valid XHTML, except for the curious

replacement. TinyMCE offers nice control of such parsing matters, but it definitely is not a good idea to make changes directly to the WordPress supplied configuration files. Rather, I isolated such changes to the Advanced TinyMCE plug-in code itself. Thus, this code is now added to the plug-in advanced-tinyMCE.php file: function extended_editor_mce_valid_elements($valid_elements) { $valid_elements = '-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]'; $valid_elements = apply_filters('extended_editor_mce_valid_elements', $valid_elements); return $valid_elements; } Note that the only change I made was to remove the unwanted
with

replacement. Note, you could make your own changes within these same lines of code. For example, Moxiecode provides a set of instructions to make your code completely XHTML compliant. That documentation and related material on the TinyMCE wiki site are probably worth inspecting if you are going to get aggressive about making your own code changes (but, proceed with caution!).