Page 1

Here is our site at the current stage of development.

It looks a bit bare. We'd like to add some more graphics to the main page.

Adding graphics to the site content is much easier with the JCE (Joomla Content Editor) Component, a replacement for the default editor. The JCE  is much more powerful and easy to use than the built-in Joomla editor.

  Click on the image for page view.

Page 2

The JCE  can be downloaded from the Joomla Extensions library.

In this screen:

1. We've searched for JCE
2. The listing is shown
3. We'll click the Download button

  Click on the image for page view.

Page 3

Here's the download page for the JCE.

  Click on the image for page view.

Page 4

First we need to install the JCE Component.

Click on JCE Components.

  Click on the image for page view.

Page 5

We'll download the latest version of the JCE Admin Component.

  Click on the image for page view.

Page 6

We'll save the package to disk.

  Click on the image for page view.

Page 7

Here's the Joomla Adminstrator. We'll pull down Installers - Components.

  Click on the image for page view.

Page 8

1. Browse to the file that you just downloaded,
2. then click on Upload File & Install.

  Click on the image for page view.

Page 9

The Upload component - Success screen appears.

  Click on the image for page view.

Page 10

We need to install several more things before we can use the JCE.

Back in the JCE downloads page, we're now going to click on JCE core Mambot. A "mambot" is a special type of component that doesn't have any direct user interface. It is used by other components. We need to download the JCE mambot so that the other JCE components will work.

  Click on the image for page view.

Page 11

We'll download the most recent JCE Mambot. (At the time of this writing, the version number is 1.0.4).

  Click on the image for page view.

Page 12

Returning to the Joomla Administrator, we'll now choose Installers - Mambots.

  Click on the image for page view.

Page 13

1. We browse to the JCE mambot package we just downloaded and
2. click on Upload File & Install

  Click on the image for page view.

Page 14

The Success screen appears. We'll click Continue.

  Click on the image for page view.

Page 15

The JCE is now installed. Next we'll install some JCE plugins.

Select Components - JCE Admin - JCE Plugins.

  Click on the image for page view.

Page 16

This brings us to the JCE Plugin Manager. We'll click on Install.

  Click on the image for page view.

Page 17

Returning to the JCE Downloads page, we'll click on JCE Plugins.

  Click on the image for page view.

Page 18

The first plugin on the list is the Templates plugin. We'll download this package as before.

  Click on the image for page view.

Page 19

Here we've browsed to the file that we just downloaded, and will click on Upload File & Install.

  Click on the image for page view.

Page 20

The plugin has been successfully installed.

  Click on the image for page view.

Page 21

In the same way, we're going to go through the list of available plugins and install one version of each. Some plugins have two or more versions listed, in which case we'll install just the latest version.

Note that the JCE Media Manager plugin in this listing has two versions. We'll install the latest.

  Click on the image for page view.

Page 22

After installing all of the plugins in the manner of the first, the list of installed plugins now looks like this:

  Click on the image for page view.

Page 23

We're now ready to switch over to using the JCE editor. Select Site - Global Configuration.

  Click on the image for page view.

Page 24

1. Select the Site tab
2. Change the Default WYSIWYG Editor to "JCE Editor Mambot"
3. Click Save.

  Click on the image for page view.

Page 25

If we now look at a content edit screen, for example by selecting Content - Content by Section - Services - Services Items ...

  Click on the image for page view.

Page 26

And then clicking on an item of content...

  Click on the image for page view.

Page 27

We can see that there are more icons appearing on the editor than before. The JCE editor gives us a lot more options than the default editor, and we'll try some out in the next tutorial.

  Click on the image for page view.