A Video and written guide to the TinyMCE Editor

Here is a great video guide to the Ultimate Tinymce plugin and a very detailed written tutorial on the WP TinyMCE visual editor (a WYSISWYG Editor) for Blogs and Websites. Tinymce comes included with WordPress as the default editor AND you can get the code for FREE and include it in your own custom websites. The “Ultimate Tinymce” refers to a special WordPress plugin version that expands what you can do while editing posts in your blog. We also included a users guide which covers the editor in general and is applicable to any application using TinyMC). The default WordPress editor is like a subset of the Ultimate plugin which has all the base level has plus a lot more! If you want more information on some great plugins you can click on this link to read our article on our top 20 WordPress 3.0 plugins!

Here is the video to the installation and use of the Ultimate TinyMCE Plugin

Background Information

• WP TinyMCE is the name of the visual editor that comes with WordPress, which can be used to edit post and page content. (WordPress is bundled with the open source HTML WYSIWYG editor TinyMCE by Moxiecode Systems, AB).
• If you are adding a post in WordPress, and you haven’t installed a new editor from a plugin, then you are using the default editor – TinyMCE.

What Are the TinyMCE “Buttons” I keep hearing about?

• The  ”Buttons” are the functions available when you are using the editor.
• Examples include the common B I U for Bold, Italics and Underline.
• There is also another  symbol called “The Kitchen sink” and when you click on it it shows / hides the second row of buttons.

How Do I get more Buttons (more functionality)?

The easiest way is to add a plugin that extends the WP Tinymce functionality like the Ultimate TinyMCE plugin shown in the video above.

Here are 2 more plugins that you can add in addition to the Ultimate plugin shown in the video above - I have used them all myself and they are in order of my Favorite being first.

1. Editor Extender – OK this is really cool WP TinyMCE extender .

• This Extends WP Tinymce – It gives you Emoticons, a working preview in a pop up (how many times have you published a post to find that things got spaced wrong or something and had to go back in and fix it and repost? This is a one click solution to that)Search and replace, etc.
• The WP TinyMCE plugin allows you to turn on most of the functionality that you would find at http://tinymce.moxiecode.com/example_full.php with out having to dig into the code to turn things on and off. 
• Simply go to your WordPress Admin area, click on Settings and then click on Editor Extender. On the Editor Extender options page you will have checkboxes for turning on and off WP TinyMCE options as you see fit, just check it to turn and option on; uncheck it to turn it off. Being sure to save changes after you make a change.

2. ]\CKEditor for WordPress –

• This is the  extender that I use – This gives you more control over the Font type and size as well as highlighting and text colors and a better spellchecker. It has everything I need. This WP TinyMCE plugin also makes it easier to modify pictures.

There are many more  extensions you can try.

Just go to the Plugins tab in the left sidebar of your admin panel, click on Add New, enter “Editor” in the search plugins field and click on Search Plugins. Then try out different ones by installing them one at a time and working on a post with them. They are all WP Tinymce extendors so you can pick and try any.

Features at a glance:

• Easy to integrate – You can add extended functionality with plugins.
• Customizable – Themes and plugins, block invalid elements and force attributes.
• Browser friendly – Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
• Lightweight – PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75% smaller and a lot faster to load.
• AJAX Compatible – You can easily use AJAX to save and load content!
• International – Multilanguage support using language packs.
• Open Source – Free under the LGPL license, millions of ppl help test and improve this editor every day.

Getting started  and basic things you need to know!

If you are not familiar with html, css or web publishing, here are a few simple commands you should know that will allow you to create simple but interesting articles. We have made this simple. This  Tinymce guide is available in its entirety at http://www.unitedboinc.com/en/how-to-use-tinymce-wysiwyg-article-editor?

Font style - Highlight your text and use these 4 buttons to make text bold, italic, underlined, or strike-through.

Text Format for size and headings - To make your articles interesting, highlight your text and use this drop-down menu to create a variety of different styles of headings with different attributes. You can use this to quickly make text large, bold, italic and so on.

Edit CSS Style - This displays a pop-up dialog box that allows you to enter CSS style information for the selected text. You can use this to change text size and for a variety of other functions.

Alignment - Highlight your text or select an image and use these buttons to Align text, images or other content left, right, center, and full.

Insert/Edit Image - To insert an image, place the cursor in the desired location and press this button. A pop-up dialog box will appear that lets you enter in the Image URL and other information about how the image will display.

Insert/Edit Link - To insert or edit a link, select the linked text and press this button. A pop-up dialog displays that lets you enter details about the link.

Important note about external links! – It is important to note that any article published on this website that contains links to other websites on the Internet, the links need to open “In a new browser window” or “Target blank” for readers. This is done in the drop-down menu of the “Insert/edit link” dialog box. For target, choose the the option “Open in new window (_blank)”.

To make a button or image Click-able to another article or website - To make a button or image click-able to another article or website, you can use a combination of the last three explanations. First insert the image or button into your article where you want it. Then click the image to highlight it. Then click the “Insert/edit link” button in the toolbar and enter the URL of the link and update your article. This will make the image or button click-able to the other article or website!

Unlink - To remove a link, highlight the linked text and press this button.

Insert Embedded Media - To insert embedded media such as flash files (youtube video’s are flash video files), place the cursor at the desired location and press this button. A pop-up dialog will display that allows you to enter the Type, File or URL, and the dimensions of the embedded media. Here is an example URL of a youtube video you might use; http://www.youtube.com/watch?v=UNDcMAePKYY (Video; Do you BOINC?)

Note for new users and beginners

If you want to learn more about the basics of html, css and website publishing, you should visit www.w3schools.com

Using TinyMCE to edit the article html directly

There are two way that you can directly edit the html for your article if you know what you are doing!

Note; This function can also be used to quickly copy an article. You can view the html and copy it for use in a second article that is very similar. This will save a lot of time if you have spent a large amount of time formatting a particular article.

1. Edit HTML Source - If you click this button, a pop-up displays showing the HTML source code for your article and allowing you to edit the HTML source code directly.

2. You can disable the TinyMCE editor completely by going to the User menu for the website and click “Your details”. In the drop-down menu for the editor, select “Editor – No editor” and click save. Now when you edit an article, you will just see the html for the article. You can re-enable the TinyMCE editor again at any stage by changing it back again.

Short explanation for each of the buttons:

TinyMCE Top row

Font style - Make text bold, italic, underlined, or strike-through.

Alignment - Align text, images or other content left, right, center, and full.

Text & Image Styles - Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules.

Text Format - Select predefined formats for Paragraph, Address, Heading1, and so on.

Font Family - Select the desired font.

The Second Row of Button Icons:

Text List formatting - Unordered List, Ordered list, Out-dent (move left) and Indent (indent right).

Undo/redo - Undo (Ctrl+Z) and Re-do (Ctrl+Y) the formatting you just made to your article.

Insert/Edit Link - To insert or edit a link, select the linked text and press this button. A pop-up dialog displays that lets you enter details about the link.

Unlink - To remove a link, highlight the linked text and press this button.

Insert/edit anchor - Creates a named anchored which can be used as a target to jump to when using a link.

Insert/Edit Image - To insert an image, place the cursor in the desired location and press this button. A pop-up dialog displays that lets you enter in the Image URL and other information about how the image will display.

Cleanup Messy Code - This button allows you to clean up HTML code, perhaps from HTML text that you copied in from another source.

Edit HTML Source - A pop-up displays showing the HTML source code, allowing you to edit the HTML source code.

Find - and Find/Replace.

Insert Date, Time, or Emotions.

Insert Embedded Media - To insert embedded media (such as Flash), place the cursor at the desired location and press this button. A pop-up dialog will display that allows you to enter the Type, File or URL, and other information about the media.

Text direction - Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left.

Insert New Layer - Inserts a new layer of html that floats above the background html.

Layer height - Move layers forward or backward.

Toggle Absolute Position - For working with layered items.

Select Text Color - Select the color of your text. This drops down to give you a choice of colors

TinyMCE Third Row

Insert Horizontal Ruler - Adds a horizontal ruler to your page.

Remove Formatting - Removes formatting from text copied from somewhere else.

Toggle Guidelines/Invisible elements - Toggles the invisible elements of your article.

Subscript, Superscript - For adding scientific notation to your text.

Insert Custom Character - Choose from a selection of custom text characters.

Horizontal Rule - Applies horizontal rule

Tools for inserting and editing tables - Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.

Toggle Full Screen Mode - Toggles your article editing window to the full size of your screen

Edit CSS Style - A pop-up dialog box displays that allows you to enter CSS style information for the selected text

What if I want to add some custom buttons for special functions to the WP TinyMCE?

Glad you asked. You can go to the wordpress codex and look up information on enhancing the WP TinyMCE. I have cut and paste the following from this link in the wordpress codex:http://codex.wordpress.org/TinyMCE. You can click on any of the links to learn more.

Also yo can click on this for the ultimate developers guide via the TinyMCE Wiki: http://wiki.moxiecode.com/index.php/TinyMCE:Index

Adding Buttons

Under “Rich Editor Filters” in the Plugin API Hooks page, you can see a simple (if you understand the Plugin API and hooks) means of adding your own buttons to TinyMCE in WordPress. See also Plugin API Rich Text Editor Filters for more information.

Advanced Editing Plugins

If the Advanced Editing Toolbar buttons are not sufficient, and writing your own buttons isn’t your thing, perhaps you’re looking for a plugin to extend the functionality of the TinyMCE editor. Examples include:

• Custom TinyMCE Buttons
• TinyMCE Advanced

Finally you can click on this link to go to our main page and read more articles like this WP TinyMCE Guide!

OK, thats it for this wordpress editor guide