JCE je WYSIWYG (What You See Is What You Get) HTML editor pomoću kojeg oblikujemo sadržaj članaka.

Pogledajmo sliku:

1. Title - Naslov članka

2. Alias - Alternativni naslov članka. Generira se automatski ali ovdje ga je moguće izmijeniti

3. Section i Category (sekcija i kategorija) - Odabir sekcije i kategorije (OBAVEZNO - moguće podesiti na "Uncategorised", ali bolje je imati sekciju i kategoriju za svaki članak)

4. Preview, Save, Apply, Cancel, Help - Nazivi objašnjavaju sami sebe. Save se koristi kada želimo spremiti članak i prestati ga editirati (zatvoriti ga), a Apply ako želimo da članak nakon spremanja ostane otvoren u editoru

5. Published i Front Page opcije - s published određujemo je li članak objavljen ili ne, a ako odaberemo Yes na Show on front page, članak će se pokazati na naslovnici (u suprotnom će biti dostupan jedino preko menija za katagoriju ili sekciju)

6. Show / hide - Prikaži kod ili editor.

Sve ikone editora imaju tooltipe (ako držimo miš iznad ikonice pokazat će se njezina funkcija). Zato ćemo istaknuti samo najbitnije ikone jer ih većinu ni nećemo koristiti.

7. Prvi blok ikona editora predstavlja standardne opcije za uređivanje teksta (bold, italic, font, itd..)

8. Paste opcija - Dok pejstamo tekst iz bilo kojeg tekst editora (Word, Notepad, Gedit...) to činimo preko "Paste as plain text" - druge opcije u ovom izborniku. U suprotnom tekst ostane čudno formatiran, a to je najbolje izbjeći radi kompatibilnosti s browserima!

9. Insert / Edit image - Ovo je jedna od najbitnijih opcija JCE editora - nudi upload i ubacivanje slika pri editiranju članka (bez JCE-a trebali bismo FTP-om ili Media Managerom uploadati sliku prije nego što krenemo uređivati članak).

10. Read more - Ovo je "razdjelnik" između uvodnog (intro) i glavnog teksta članka. Tekst prije read more razdjelnika prikazuje se u popisu članaka dok se tekst ispod njega prikazuje tek nakon što kliknemo na "Više", odnosno "Read More".

11. Glavni editor - prostor za pisanje

12. Metadata information (ako je zatvoreno, potrebno je kliknuti kako bi se otvorilo) - opis i ključne riječi članka - popuniti za svaki članak!

Dodavanje slike u članak

1. URL (putanja do slike) - možemo je napisati ili jednostavno odabrati sliku na popisu u srednjem stupcu pri dnu (broj 9)

2. Alternate text - opis slike - obavezno popuniti!

3. Dimenzije slike - ovdje je moguće proporcionalno izmijeniti dimenzije slike - iako je ovo dosta korisno, nije preporučljivo velike slike u male smanjivati ovim putem (nego ručno prije uploadanja na server)

4. Alignment - određuje kako će tekst oko slike izgledati - iako je dostupno više opcija koriste se većinom samo Left ili Right. U preview prozoru (7) vidimo kako će tekst izgledati

5. Margin - margina oko slika - preporučljivo namjestiti na 5 (izraženo u pikselima) i ostaviti "equal value"

7. Preview - kako će slika i tekst izgledati nakon ubacivanja slike

8. Ikone za novi direktorij, uploadanje slike i pomoć - srednja ikona (za upload slike) je bitna!

9. Popis datoteka u direktoriju

10. Detalji - prikaz slike i više informacija o njoj

11. Refresh - osvježavanje izbornika za slike, Insert - ubacivanje slike, Cancel - cancel

Pritiskom na Insert slika se ubacuje TAMO GDJE U EDITORU PRIJE PRITISKA NA IKONU ZA UBACIVANJE SLIKE NAMJESTIMO KURSOR!

Upload slike

Pritiskom na srednju ikonu (8) dobivamo dijalog za upload slika. S Add odaberemo sliku/e (ako odabiremo više slika, potrebno je više puta stisnuti Add) s računala, a s "Upload" pokrećemo upload. Kad završi upload, sliku možemo odabrati u srednjem stupcu (9).