United BOINC

 
  • Increase font size
  • Default font size
  • Decrease font size
Home How to use TinyMCE WYSIWYG article editor

Using TinyMCE WYSIWYG article editor

E-mail Print PDF
AddThis Social Bookmark Button

Beginners guide to using TinyMCE WYSIWYG article editor

The default article editor on this website is the TinyMCE editor. So this is a kind of Beginners guide to using TinyMCE article editor.

TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing articles and other content. The 3-row toolbar below provides many standard editing commands:

TinyMCE

Getting started with TinyMCE 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.

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

Font formatText 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 cssEdit 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.

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

Insert imageInsert/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 linkInsert/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.

Insert or edit linkImportant 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 toolbarInsert/edit link 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!

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

Insert Embedded MediaInsert 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?)

TinyMCE demo editor

If you want to try out the TinyMCE WYSIWYG editor or do some testing, we have a demo editor that you can use for writing test articles here; TinyMCE demo editor

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

If you want 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 SourceEdit 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 in the TinyMCE editor

Top row

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

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

Image stylesText & 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.

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

Font familyFont Family - Select the desired font.

  

  

  

  

  

  

  

Second Row

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

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

Insert linkInsert/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.

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

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

Insert imageInsert/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.

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

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

FindFind - and Find/Replace.

Insert dateInsert Date, timeTime, or EmoticonsEmotions.

Insert Embedded MediaInsert 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 directionText 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 layerInsert New Layer - Inserts a new layer of html that floats above the background html.

Move layersLayer height - Move layers forward or backward.

Toggle positionToggle Absolute Position - For working with layered items.

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

Third Row

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

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

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

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

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

Horizontal RuleHorizontal Rule - Applies horizontal rule

Table toolsTools 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 ModeToggle Full Screen Mode -  Toggles your article editing window to the full size of your screen

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

 

Check out these cool BOINC videos!

Predictor@home - About Protein StructurePredictor@home - About Protein Structure

 

SETI@home: Listening to the Universe

SETI@home - Listening to the Universe

 

Dr. David Anderson describes SETI@home & BOINC

Dr. David Anderson describes SETI@home & BOINC

 

Check out this science project!

μFluids

μFluids project (Pronounced "Micro Fluids"), is a massively distributed computer simulation of two-phase fluid behavior in microgravity and microfluidics problems. Our goal is to design better satellite propellant management devices and address two-phase flow in microchannel and MEMS devices.

μFluids project URL; http://www.ufluids.net/

Read more...

Poll Poll 1

Is BOINC manager "User friendly"?
 

Poll Poll 2

How many BOINC projects are you running?
 

Poll Poll 3

Have you ever used an Account Manager?