Button Definitions

Button Definitions

This is a list of all button defintions available in the Ultimate Tinymce PRO plugin. The lite version of the plugin may also be referenced here. Buttons function the exact same in both versions… however PRO will have many more buttons than the lite version.

This list will give a brief description of each button definitions, as well as provide screenshots for reference.

Abbreviations Button

Enables the use of mouseover abbreviations.

The popup window where you insert your text and style.

The popup window where you insert your text and style.

Shows the tooltip with the entered abbreviation.

Shows the tooltip with the entered abbreviation.

Accessibility Checker Button

AChecker is used to evaluate HTML content for accessibility problems by entering the location of a web page, uploading an html file, or by pasting the complete HTML source code from a Web page.

AChecker produces a report of all accessibility problems for your selected guidelines. AChecker identifies 3 types of problems:

  1. Known Problems: These are problems that have been identified with certainty as accessibility barriers. You must modify your page to fix these problems;
  2. Likely Problems: These are problems that have been identified as probable barriers, but require a human to make a decision. You will likely need to modify your page to fix these problems;
  3. Potential Problems: These are problems that AChecker cannot identify, that require a human decision. You may have to modify your page for these problems, but in many cases you will just need to confirm that the problem described is not present.

Acronym Button

Again, we have a redundancy. This button functions exactly like the Abbreviaton button. I’m sure I’ll remove one, and rename the other to include both.

The popup window where you insert your text and style.

The popup window where you insert your text and style.

Shows the tooltip with the entered abbreviation.

Shows the tooltip with the entered acronym.

Advanced Image Button

Allows many advanced image manipulation options from a graphical user interface.

Advanced Link Button

Will enable advanced link options via a graphical user interface. Also, used for linking to content using the anchor button.

View of advanced insert/edit link box.

View of advanced insert/edit link box.

Anchor Button

Using anchors can be a powerful tool for any blogger… especially when you have those posts which contain several different sections or headers.
NOTE: To use these anchors, it’s best to have the Advanced Insert/Edit Link option enabled. If you truly understand the HTML behind anchors, then you could probably use the default wordpress insert/edit link button.

Highlight your text, click the anchor button, and name the anchor.

Highlight your text, click the anchor button, and name the anchor.

Highlight the placement of the link, click the advanced insert/edit link button, and select your anchor name from the dropdown list.

Highlight the placement of the link, click the advanced insert/edit link button, and select your anchor name from the dropdown list.

Attributes Button

I’m not exactly sure as to the full functionality of this setting. It can handle some javascript calls, and it can also handle styles, titles, classes and id’s.

The Attributes popup screen.

The Attributes popup screen.

The Attributes Events Tab... Where you can enter javascript handlers.

The Attributes Events Tab… Where you can enter javascript handlers.

Background Color Picker Button

Allows the selection of a background color applied to selected content. This can be used to replicate a “highlighted” effect on selected text.

An image of the color picker.

An image of the color picker.

Applies the background color to an inline span tag.

Applies the background color to an inline span tag.

Citations Button

I’m not too sure as to the functionality of this button. As far as I can tell, the only thing it does is italicize the font and float it left. In the screenshot below, you can see I added the same line of text over and over. The results are not extremely pleasing. This button wraps the selected text with the “cite” tag.

The screenshot below also shows how you can add styles to some of the popup boxes. Just enter your property, then a colon, followed by your value, and lastly a semi-colon. You can repeat the process for mutliple properties and values.

The popup box for adding a citation.

The popup box for adding a citation.

The results from the font-end.

The results from the font-end.

Clear Div Buttons

This feature allows the user to use “clear div” functionality in the editor. Your options are “Clear left”, “Clear right”, and “Clear both”. This option is perfect for creating custom content, columns, and more.

Cliker ClipArt Button

The Clker button gives users a quick and handy place to grab free, open source clipart. Images are not the best in the world.. but they are free to use, and super quick and handy. No longer do you need to import the photo into wordpress first. This plugin will simply copy the photo url from Clker.. and use an absolute paht to display the image in both the content eidtor, and on the front-end of the website.

Furthermore… the image (once added) can be manipulated just like any other default WP image.

Copy Button

The Copy Button simply copys the selected text from the content editor.
NOTE: This button is not available in most browsers. It is suggested to use the keyboard shortcut “Ctrl + C” to quickly copy selected content.

Cut Button

The Cut Button simply deletes the selected text from the content editor.
NOTE: This button is not available in most browsers. It is suggested to use the keyboard shortcut “Ctrl + X” to quickly delete selected content.

Delete Button

Deletion allows you to note changes to your posts. Syntactically, it will add a strikethrough across the selected text. It will also add a hover tooltip, with a description you enter.

The popup box where you can enter your hover description (Title), any custom styling, and a note.

The popup box where you can enter your hover description (Title), any custom styling, and a note.

How it displays on the front-end.

How it displays on the front-end.

Emotions Button

Inserts small emoticons into the content editor.

The popup emotions box.  Just click one to insert into your post/page.

The popup emotions box. Just click one to insert into your post/page.

Encode/Decode Buttons

These buttons can be used to encode and decode selected text. It uses an MD5 hash algorithm to decode the text. Only another person, with this same plugin installed, will be able to decode the text. This can be a fun little feature… with a variety of uses.

Equation Button

The Equations plugin will add a third-party popup window which allows selection of hundreds of mathematical signs to insert into the content area.

The popup window is used to “build” the mathematical function. Then, when “Copy to Document” is pressed, a graphic is “snapped” of the function and inserted into the content area.

There are literally hundreds of possibilities with this plugin; which I’ll attemp to list a few here:

  • Functions for basic math such as addition, subtraction, multiplication and division.
  • Advanced functions for trigonometry, calculus, algebra, geometry, and linear differential equations.
  • Work with fractions, powers, variables, greek symbols, and more.
A view of the popup Equations formulation box. (Ads are NOT associated with me)

A view of the popup Equations formulation box. (Ads are NOT associated with me)

EZ Image Button

This option gives users a new, graphical interface for setting image attributes. One limitation is this plugin lacks an image browser. An image can be inserted using a url… but there is no browse feature. Still, this plugin does offer a new interface, for editing the attributes of images.

Just click on any inserted image (or use the url bar in the popup window to specify an image) and click the EZ Image button. Configure the options in the popup window to the desired specifications. Click “Insert”… and the changes will be made.

Font Select Button

This button will add the font-select dropdown box. This box can be used to choose from one of the available default WP fonts… or may also be modified via the use of an addon to include fonts such as Google Webfonts.

The font select dropdown in the visual editor.

The font select dropdown in the visual editor.

Font Size Box

This button adds the font-size dropdown box. This dropdown selector allows selection of various font sizes.

The font size select dropdown box.

The font size select dropdown box.

Foreground Color Picker Button

Will change the color of the selected text.

An image of the color picker.

An image of the color picker.

Applies the foreground (text) color to an inline span tag.

Applies the foreground (text) color to an inline span tag.

Horizontal Rule Button

Used to insert a horizontal divider across the content area. Adjustments such as width and height can be made in the popup window.

The popup box to define width, height and shadow.

The popup box to define width, height and shadow.

Adds the HR into the document.

Adds the HR into the document.

HTML Code Button

This option enables a popup box displaying your html code. The main use I’ve found for this is when when switching between your visual and HTML tabs, the content can often be destroyed with the way tinymce behaves with certain code. Using the popup option, no code is stripped from the editor and you are able to make your HTML adjustments in the popup window and save.

The visual editor.

The visual editor.

The HTML code in the popup window.

The HTML code in the popup window.

HTML Code Magic Button

CodeMagic is an advanced source code editor plugin for Tinymce. It integrates CodeMirror library for syntax coloring and Jsbeautifier library for code formating and indentation.

This is a very cool option which will add the following features to the HTML Magic Editor Box:

  • Realtime syntax coloring using mixed HTML/CSS/JS mode.
  • Proper code formating and indentation.
  • HTML tags code hinting and auto completion.
  • Undo/Redo history.
  • Search and replace functionality.
A view of the HTML Code Magic Box in action.

A view of the HTML Code Magic Box in action.

HTML5 Tags Button

Use this button to insert any HTML5 compliant tag into the editor. The button will open a popup with a list of all available tags. Simply select your content in the editor, click the button, choose the tag from the popup, and it’s automatically inserted into the content editor… wrapping any highlighted selection.

This plugin is brand new, and still in the process of development. However, it’s stable enough to release for usage with WordPress. Please feel free to report any bugs to me using the contact method in the admin panel.

Image Map Editor Button

Image Maps are a great, fun, and interactive way to enhance images. You can create shapes to place over your images, which will link to other content. You can have multiple “maps” on one image, and each part of the image can contain a separate link.

Add unlimited image maps to one image.

Add unlimited image maps to one image.

Insert Button

Insertion allows you to note changes to your posts. Syntactically, it will add an underline across the selected text. It will also add a hover tooltip, with a description you enter.

The popup box where you can enter your hover description (Title), any custom styling, and a note.

The popup box where you can enter your hover description (Title), any custom styling, and a note.

How it displays on the front-end.

How it displays on the front-end.

Insert Date/Time Button

Allows immediate insertion of the current date and time.

Date and time inserted in the back-end.

Date and time inserted in the back-end.

Date and time inserted in the front end.

Date and time inserted in the front end.

Layers Button

Allows the use of layers within the content editor. Layers can be useful to align multiple elements.
NOTE: Layers seem to work best in the Mozilla Firefox browser.

Line Break Button

Finally!! A way to insert linebreaks into the editor which will not be stripped out or mangeled. They will be preserved both when saving, and when switching between visual and text editor modes. Each click of the button is a new line break.

Lorem Ipsum Button

This button is most useful during development or testing of a blog or website. It will generate any user-defined quantity and type of “dummy” text.

You may currently choose from paragraphs, sentences, ordered lists, and unordered lists. Additionally, select from five different langanges (including English!)

MailTo Button

Simply turns the selected email address into a mailto html link. Simply highlight the email address in the content editor.. and press the button.

Media Button

Allows the advanced insertion and manipulation of most popular embedded media formats. This includes YouTube videos, Google Maps, and the like. All adjustments are made from an intuitive graphical user interface.

The general options (if you have a direct URL), the type, and the dimensions.

The general options (if you have a direct URL), the type, and the dimensions.

The advanced options.

The advanced options.

The source code (if you are embedding).

The source code (if you are embedding).

NextPage (PageBreak) Button

The NextPage button is a nifty little feature. It allows you to break your post into multiple pages. When viewing on the front-end, the user will see a sequential set of page numbers. Clicking each number will take them to the corresponding content.

Shows the back-end of the nextpage tag.

Shows the back-end of the nextpage tag.

Page 1 from the front-end.  Note the page numbers.

Page 1 from the front-end. Note the page numbers.

Page 2 from the front-end.

Page 2 from the front-end.

Page 3 from the front-end.

Page 3 from the front-end.

NonBreaking Button

Used to allow insertion of multiple spaces inside the content editor.
NOTE: Another WP function must be altered for this to work properly. I am developing another section of my Ultimate Tinymce plugin which will allow for manipulation of these various WP functions.

Paragraph Tags Button

Finally!! A way to use paragraph tags without them being stripped out or mangeled by the editor. Simply select the text, and click the “Paragraph” button where a new popup will appear. In this popup are the following options:

  • ID – Enter an ID for the paragraph tag. (Optional)
  • Classes – Enter one or multiple classes for the paragraph tag. (Optional)
  • Styles – Enter multiple css style attributes to apply to the paragraph tag. (Optional)

Click insert… and watch the magic!!

Paste Button

The Paste Button simply pastes the selected text from the clipboard.
NOTE: This button is not available in most browsers. It is suggested to use the keyboard shortcut “Ctrl + V” to quickly paste selected content.

Preview Button

The preview box gives you a view of your content in a popup style window. Why not just use the preview button included with WordPress you ask? Well, I mainly use this button when “fine-tuning” a position or element in my post. Instead of having to wait for the page to reload each time, I can click the button and the popup window loads super-fast. I tweak my adjustments, then click the wordpress preview to view the final results. It’s a big time-saver in this sense.

The preview popup with the formatting from the "Citations" example.  This shows the gray background with white text.

The preview popup with the formatting from the “Citations” example. This shows the gray background with white text.

Print Button

Will print the contents of the editor when clicked.

Search and Replace Buttons

These buttons function much the same way. Either button can be used for quickly finding selected content, or for replacing selected content.

Highlight your text, and click the button.

Highlight your text, and click the button.

You can also click the "Replace" tab, for even more options.

You can also click the “Replace” tab, for even more options.

Shortcodes Button

This button is a personal endeavor. It will grab the global variable used by WordPress and populate a list via a tinymce button popup window.

From here, simply select the shortcode you would like to insert into the post/page.

Once you click your selection, the popup window will close automatically, and your selection will be added to the content editor.

Span Button

Wraps the selected content with an html span tag. This is extremely useful in conjunction with the Ultimate Tinymce Classes and ID’s addon, and the Ultimate Tinymce Custom Styles addon.

Style Select Box

Adds the style select dropdown box to the content editor. This can be used to select one of the available default WP styles.. or may be modified via the use of an addon such as Ultimate Tinymce Custom Styles or Ultimate Tinymce Predefined Styles to add even more selections to the dropdown box.

Styleprops Button

This option is quite powerful, and one of my favorites. You can add a very wide range of CSS styles and features via a graphical interface.

The various CSS styles available for text elements.

The various CSS styles available for text elements.

Various background properties are also available.

Various background properties are also available.

Wrap elements in a block and control it's properties.

Wrap elements in a block and control it’s properties.

Use boxes for your content as well.

Use boxes for your content as well.

Control borders of various elements.

Control borders of various elements.

Take a little more control over how your lists display.

Take a little more control over how your lists display.

"Fine Tune" your positioning properties with this tab.

“Fine Tune” your positioning properties with this tab.

SubScript Button

Turns selected text into a subscript.

Examples using the subscript option.

Examples using the subscript option.

SuperScript Button

Turns selected text into a superscript.

Examples using the superscript option.

Examples using the superscript option.

Table Controls Dropdown Box

Used to insert and manipulate tables.
NOTE: Initially, many options in the dropdown will be greyed out. This is because you must first create the table.. then go back to edit the individual rows and cells.

Shows the table dropdown in a list format.

Shows the table dropdown in a list format.

Text Direction Button

This option simply adds two buttons which allow the user to change the direction of the selected text. Options include the left to right languages, and the right to left languages.

Toggle Visual Characters Button

Turns the use of visual characters on/off.

Visual Characters button enabled in the back-end.

Visual Characters button enabled in the back-end.

Visual Characters button enabled in the front end.  No difference.

Visual Characters button enabled in the front end. No difference.

Visual Aid Button

This option is still rather confusing to me. The only purpose I see is that it adds little gray borders around the table area when inserting a table with tinymce. It is buggy (at best) across browsers, but it can aid a little with placement and content.

W3C Validate Button

This button will check the content of the tinymce editor against the chosen validation method.

Use this button as a final check to make sure all code is compliant with browsers and crawlers.

You may choose between five types of validation methods. Additionally, you may specify the url address of a custom validator.

YouTube Video Button

The youtube box gives you a one click feature for adding your favorite YouTube videos. Simply copy and paste the video ID into the popup box, and the editor will do the rest.

A view of the YouTube Box in action.

A view of the YouTube Box in action.

YouTubeIframe Video Button

This button basically functions the same way as the previous (older) version of the YouTube button, with the exception that this button uses the newer iFrame feature.

Simply copy the (long link) url of the YouTube video to be inserted. Choose your size from one of the presets, or customize your own.

Additional options (for now) can be appended to the url by adding them in the HTML view of the editor.

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.