Using the (JCE) Content Editor

The box that you enter text and images into when creating an article is the Content Editor. The rows of buttons immediately above are the main functions of the editor & is what this article is mostly concerned with. Strictly speaking, there are other aspects and options that concern editing which are outside the scope of the editor, but the main focus here will be whats 'inside the (editing) box'.

The Content Editor is a 3rd party add-on called JCE(Joomla Content Editor - http://www.cellardoor.za.net ). It's main function is to allow people who are not expert at HTML to be able to create web content. It is a WYSIWYG (What You See Is What You Get) editor which converts what you have created on screen, into reasonably neat HTML code that can be used by the Joomla system.

Anyone that is familiar with MSWord may think "That looks familiar, I know how to work with that", but - while your word processing skills are handy - there are many differences. Some people will only ever enter a few lines of text - for them it will be extremely simple. But for others (like me) who like to fiddle around & do fancy formatting, it can be difficult (no matter what editor you use).

Here are a few brief hints

• Its not actually WYSIWYG - but a close approximation. Since most people won't have the ability to publish results immediately (they are not Administrators, so material is authorised), then they will not be able to immediately see the (small) differences between what they see in the editor & what is seen on the live site. The main thing that will differ are the various text styles - size & sometimes colour.
   
• Its best to not use formatting beyond basics: bold, italic, bullet or numbered lists and Heading styles. Definitely avoid using Font size, Font family and colour. The website has custom made pre-defined formatting for most common elements - like paragraph text, dot points, headings. These are controlled outside the editor (in whats called a "style sheet" - CSS), but the editor can over-ride the standard styles. The resulting inconsistent styles can make a site look unprofessional.
   
• Some formatting can be removed by the "Clean" button (looks like an eraser), but sometimes the only way to get rid of formatting is by editing the HTML code by hand - or deleting and starting again.
   
• Hover your mouse pointer over a button to get a brief explanation (tooltip).
   
• The help button is very handy, but be aware that it is the help system for this editor's base system (JCE is a souped up version of another very popular editor called TinyMCE).
   
• The editor software is under constant evolution - it may change a little from time to time.
   
• When you hit the 'ENTER' key, the text before and after is converted to paragraph text (which has a predefined style). This is the same as selecting "Paragraph" from the Format drop down selector (3rd row). Most text that you enter should be paragraph text.
   
• Paragraph text always has a margin of about 1 line space below the paragraph.
   
• If you need a new line without the paragraph margin, hold down "SHIFT" while you press "ENTER". This is a handy trick that is used in MSWord and almost all web applications. This is also hand to use in lists - when you may want a new line, but dont want the dot point.
  Like this. In this list I have used it to separate the dot points by a line (I should really modify the style sheet to do this automatically .. one day). So I went "SHIFT + ENTER" then added a space or two. I added the space because the software tries to 'clean up' bad code - and it thinks a line break with no content on it is bad code. It's attempts to clean code can be frustrating, but its probably for the best.
   
• The editor is context sensitive. Wherever the cursor is, if there are styles affecting it, then the corresponding button/s will be highlighted in a darker shade of blue. If you are familiar with HTML code, also look at the bottom of the text box (otherwise look away now :-) - you will see the HTML tags that currently influence the content where the cursor is. eg for this list it reads
  "Path: ul >> li >> div"
  It can be very handy to see this, and you can click on (say) the "ul" to have the entire "ul" (unordered list) block selected.
  
• Never paste text from MSWord without first reading this. M$Word usually contains some very nasty code that is impossible to remove without extensive manual editing. This code will make the text look different, and slow down the page loading time. If you absolutely must paste from Word, there is a special button in the top row that will limit the damage. A better idea is to use the next button along - "Paste as plain text" - you will lose all formatting including paragraphs. Just go into the pasted text and re-insert the paragraphs, bolds etc. You can also paste text into a Notepad document, then copy that text and paste it into the editor. This strips the styling, but keeps the paragraph breaks.
  
• Pasting using "CTRL + V", or "right click > paste" will work, but makes the editor scroll to the top. You can use the editor buttons to avoid this. Drag and drop will not work as you would expect - it won't drop it in the right spot.
   
• "CTRL + Z" does work to undo the last operation.
   

Specific Editor Functions

There are some special buttons that are often used, but need special introductions.

Insert a table

Only if you have to. Use tables to organise things in columns, or to show 'tabular data'.
 

Insert/Edit Image

• You can upload images - button near the bottom right half of the pop-up screen.
• Navigate to the destination folder before uploading. Dont be shy about creating new folders to keep things organised.
• Correct naming & classifying in folders - no spaces or special characters.
• Image alignment, borders, padding, alt text.
• The first image in an 'intro text' will automatically act as a link to the full text.
• You cannot upload a file more than 2 mb
• Optimise & resize images before uploading - This could occupy a page of instructions on its own.
  
  If you dont have your own editing software, or dont know much about how to do this, use this tool - http://www.webresizer.com/resizer/ 
  
  Image sizes are calculated in pixels (px). Your digital camera probably takes photos of a size > 2000 pixels wide, but you only need pics that large if you want to print them. For viewing in websites, you rarely need them > 600 px. Your monitor is probably about 1000 px wide. We need to resize (optimise) the images for two reasons
  1. faster to download
  2. takes less space on the server - space is finite.
  
• Dont use the image handles to resize an image - it will lose its correct proportions. Its better to optimise them to the desired size prior to uploading. If absolutely neccessary, resize a pic by first selecting it, then click the image button. Edit its size properties, ensuring that the "Proportional" box is checked.
  
  UPDATE - lately, on most joomla installs I have been using software that allows resizing of images in the editor. This joomla plugin will automatically recognise when an image isn't displaying at it's natural size, and resamples the image to the correct size. This has been extremely useful.
   

Insert/Edit Link

Links are important - they are what has made the internet such a wonderful tool.
Dont forget to use the "Title" tag to provide a pop-up explanation.
Open link in new window (target="_blank" for links that lead outside of fpmta.org

Type in a web address normally, and it will be automatically converted to a link. eg www.whatever.com .

You might want to edit the link properties for it to open in a new window, but not if the link is to another page of this website.
 

Insert DOCman Link

The easiest way to provide PDF documents for public download is to

1. Upload the document to the "Public Documents" category
2. Then use the Insert DOCman link button to provide a link to the file.

PDF files are not well liked by most users - they scare people. This is because

1. Adobe reader is a resource hog, slow to load and pesters constantly for updates
2. PDF files are often very large, thus adding to the slowness of loading
3. They are bult for printing & dont fit monitor windows well.
4. Are often used inappropriately - where a nice fast html web page would be a better choice. This is often because (say) an office staff finds it more convenient to produce a PDF instead of a html page.
5. Often a link is not recognisable as leading to a PDF document, so people feel duped.
6. Adobe is a monolithic multinational that eats up really cool companies such as Macromedia and has a monopoly on the design world with its overpriced software.

But PDFs are excellent for distributing printable documents. The doclink button overcomes the main faults because it produces a link that is clearly identified as a link to a PDF file, and it can automatically display the file size.

Do not use MSWord as a way to distribute public documents. Same reasons as above, but also there will be problems with fonts, and with people not having your particular version of Word. MSWord is fine to use in-house.