Use this primer to start editing documents on your Joomla website. I assume you have the JCE editor. The JCE editor is free and downloadable here:

http://www.joomlacontenteditor.net/downloads

If my company installed Joomla you are already running this editor.

Login to your joomla site:

You do this by entering:

http://your-site-name.com/administrator

You will need a user name and password to login.

Find an article to Edit

A complex menu system will be displayed. The part we are interested in looks like this:

 

iaw - Administration

Choose "Article Manager". The Article Manager is available as an icon, as shown, or under the Content menu. Either one takes you to the same place. Here:

articlemanager

.

This is a list of the articles on your web site. Hopefully, the titles are self explanatory. Access an article by double clicking on the title. The article will appear in the JCE editor.

Editing Overview

editor

 

In the upper right hand corner there are four commands: Preview Save, Apply, Close and Help. We are going to discuss three:

  • Save - saves any changes and exits the document, leaving you in the document manager (the previous screen).
  • Apply - saves any changes and stays in the document, allowing you to continue editing the document.
  • Close - exits the document without saving any changes you have made.

The Task Bar

The small icons displayed above your document in rows are your task bar. Yours may look slightly different than the one shown above. Hovering your mouse over each icon will show you a "tooltip",  an explanation of what each one does. Most of them are simple, like the Boldface "B" which you use to make your text bold. This primer will cover some of the more complicated, but more useful icons, leaving you to discover the simpler ones by reading the tooltip text.

advlink  Advanced Link Tool

Use this tool to create links to other web pages. This tool will be greyed out and inaccessible until you hightlight some text or an image which is already in your document. When you click on this tool, you get this screen:

advlinkscreen

In the box, labelled "URL", you can insert a url from your own site or another site. A url is a web page's unique address, e.g. www.cnn.com. This is a good place to use your ability to cut and paste. After you enter a url here, click on the Insert button on the bottom of the screen. The box will close. After the document is saved, clicking on the text you highlighted will take you the the web page you specified.

 

imgmanager

Image Manager Tool

This tool will let you upload a picture from your local computer onto your website, then insert the picture into your document. The screen you get looks like this:

advimagescreen

You start by looking at the lower half of the screen, where its says browse. Displayed are the image files currently on your web server. If you see the image you want, you can click on it, click the Insert button on the bottom, and your are done. You've inserted an image. If you want to upload an image to the web server, you have a little more work to do.

In the middle of the screen, on the right side, above the word "details", you will see an up arrow over a folder. This is the upload tool. Click on this to get a browsing screen which lets you select a file from your local computer and upload it to your web server.  After you use this tool, you will be able to select the uploaded image and put it into your document.

advcode  The Code View Tool

The JCE editor is a WYSIWYG editor. It doesn't show the the HTML code that is on your website. It shows you what the HTML code will look like. It is often necessary, or simpler, to edit the HTML code directly. Use this tool to change the code view. You may not recognize all the HTML commands in your document, but you can simply edit the text directly using this tool.

Go to top