JCE Editor is een WYSIWYG editor om gemakkelijker artikelen met foto's in Joomla te plaatsen. Uit oogpunt van gebruikersvriendelijkheid is er veel voor beheerders te configureren in deze editor. Deze presentatie toont je enkele zaken die je kunt optimaliseren (met name door opties weg te laten). NB: de sheets zijn wat ouder dan de presentatie. Van de live demonstratie die ik op de avond deed, met daarin de laatste nieuwigheden, heb ik helaas geen sheets...

1. Optimizing JCE editor from
usability point of view
Peter Martin
Joomla User Group Utrecht
Website: www.db8.nl
Twitter: @pe7er
Linkedin: http://linkedin.com/in/pe7er
Maandag 9 december 2013

2. Introduction
Peter Martin (pe7er), Nijmegen, Netherlands
 Joomla:

–

Business:
–

db8.nl since 2005 (website & extension development)
Interests:
–
2
Joomla Forum & Joomla Community Leadership Team
Open Source Software, Linux (Debian / Ubuntu), Raspberry
Pi, music (vinyl records), arthouse movies, trivia.

3. Contents
A)“Don't make me think”
B)JCE optimizing
B1. Profiles
B2. JCE Icons
B3. Joomla Buttons
C)JCE CSS Styling
D)JCE addons (commercial)
3

4. A) “Don't make me think”
4

5. Don't make me think – Steve Krug
 Chapter
5:
Omit needless
words
= Reduce choices
for administrators
5

6. Which WYSIWYG editor? 1/2
6

7. Which WYSIWYG editor? 2/2
7

8. JCE Editor
8

9. JCE editor – Management
9

10. JCE Editor Global Configuration
JCE Administration ››
Editor Global Configuration:
Reset Editor Styling: Yes
–
10
Reset the styling of the editor content. Forces left
aligned, black text on a white background.

11. B1. JCE Optimizing – Profiles
11

12. JCE Profiles
JCE Administration ››
Editor Profiles
Create different profiles
–for different users
–and/or components
Order = important
Export / Import Profiles
12

13. JCE Profiles
 Copy
13
“Default” Profile & edit

14. JCE Profiles – Edit
14

15. JCE Administration :: Edit Profile
4 tabs:
 Setup
–
–
–
–
Assignment: Front-end / Back-end / both
Components: Assign editor to Components
User Group: Assign editor to User Groups
Users: Assign editor to individual users
 Features:
Icon bar
 Editor Parameters
 Plugin Parameters
15

16. B2. Optimizing JCE – JCE Icons
16

17. Omit needless JCE buttons
17
Reduce choices
–Remove rarely used icons from Icon Bar
–Remove options that might mess up the
layout
Organize choices
–Organize icons into logical groups

18. IMHO needless JCE buttons
 Underline:
= hyperlink ?
 Tables: are only for tables, NOT for layout
 Font family + Font size +
Font color + Background color:
or how easy ιτ is to
mess up your
site completely...
18

19. JCE – Edit Profile > Features
19

20. Arrange JCE buttons
 Logical
–
–
groups:
Text appearence | Text alignment
Hyperlinks |Tools
 Optimized
20
Icon bar:

21. Remove even more....

Editor Parameters > Options > Format Elements
–
21
only keep: Paragraph, Heading2, Heading3,
Heading4

22. and more....
 Plugin
–
Show Pagebreak button: No
 Plugin
–
22
Parameters > Article Breaks
Parameters > Paste
Allow Paste As HTML: No

23. B3. JCE Optimizing – Joomla Buttons
23

24. Omit needless Joomla buttons
Back-end > Extensions > Plug-in Manager >
disable all “editors-xtd type” plugins:
– Button - Article
– Button - Image
– Button - Pagebreak
– Button - Readmore
24

25. Remove Joomla editor buttons
25

26. Joomla editor buttons
26

27. C) JCE CSS Styling
27

28. editor.css 1/5

28
Formatting text without Font / fontstyle / fontcolor
icons?
– Create CSS template used by JCE
/templates/$template/css/editor.css
– Back-end > Components > JCE Administration >
Global Configuration:
Editor Styles: Custom CSS Files
Custom CSS Files:
templates/$template/css/editor.css

29. editor.css 2/5
 JCE
–
–
29
editor WYSIWYG same as Template
Import some template styles in JCE.
Add to your editor.css
@import url(system.css);
@import url(template.css);

30. editor.css 3/5
 Some
–
30
CSS files have too many styles!
Don't use:
@import url(general.css);
@import url(personal.css);

31. editor.css 4/5
 Prevent
template background in JCE editor,
add to editor.css:
body { margin:0;
padding:0;
text-align: left;
background: white;
background-image: none;}
31

32. editor.css 5/5
 Create
custom styles
.makethisred{color: #ff0000;}
 Note:
editor.css is
not loaded in
front-end template!
32

33. D) JCE addons (commercial)
33

34. Joomla Content Editor (JCE)
 My
default Joomla installation:
–
JCE editor
JCE MediaBox (free) → lightbox images
–
Commercial JCE addons (“JCE plugins”):
–
 Captions
 File
Manager
 Image Manager Extended
 Media Manager
34

35. JCE Add-ons
 Add-ons
/ extra's for JCE editor
 No Joomla plugins, install using JCE
 Commercial license
 Set default settings! (in Plugin Parameters)
 Version 2!
– Drag & drop
– Checks upload size before uploading
35

36. JCE Plugins – Captions
 Add
36
captions to images

37. JCE Plugins – File Manager
 Add
–
37
files to website
Automatic file type icon

38. JCE Plugins – Image Manager XTD
 Upload
–
–
images to website
Automatic resize
Automatic thumbnail creation
 Demo:
upload images (with Image Manager
XTD addon: autoresize to 800x600 +
autocreate thumbnail), create small
photogallery with lightbox effect (with free
JCE MediaBox plugin)
38

39. JCE Plugins – Media Manager
 Add
–
videoclips to website
Why not use a Joomla Plugin
like “Allvideos Plugin”?
 Depends
39
on the number of videos / articles

40. non-JCE tips
 Remove
unused components from
Components menu
–
Extensions > Extensions Manager > Manage
 Remove
unused Search & Smart Search
plugins
–
Extensions > Plug-in Manager
 Quick
–
40
Icons
Use Quick Icon component: create shortcuts to
back-end menu items / 3rd party components

41. Questions?

Download JCE editor (free):
–
www.joomlacontenteditor.net

Purchase JCE addons
(commercial):
–
–

Presentation:
– Peter Martin (pe7er)
–
twitter: @pe7er

$30 / $20 USD per year, unlimited use!
www.joomlacontenteditor.net/subscribe
Photos used in presentation:
–
41
website: www.db8.nl
Don't make me think: Bob Smith
–
Profiles: Sanja Gjenero
–
Buttons: Tomasz Sowanski
CSS: Svilen Milev
–
e-mail: info at db8.nl
–
–
–
Addons: Michael Faes