You are on page 1of 41

Optimizing JCE editor from usability point of view

by Peter Martin (pe7er) twitter: @pe7er website: www.db8.nl

JoomlaDay Bangkok 2012 February 25th 2012

Introduction
Peter Martin (pe7er), Nijmegen, Netherlands Joomla:

Joomla Forum & Joomla Community Leadership Team db8.nl since 2005 (website & extension development) Open Source Software, Linux (Debian / Linux Mint / Ubuntu), Music (electronic & alternative rock / Vinyl records), Arthouse movies, Trivia.

Business:

Interests:

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

A) Don't make me think

Don't make me think Steve Krug


Chapter

5: Omit needless words = Reduce choices for administrators

Which WYSIWYG editor? 1/2

Which WYSIWYG editor? 2/2

JCE Editor

JCE editor Management

JCE Editor Global Configuration


JCE Administration Editor Global Configuration: Reset Editor Styling: Yes

Reset the styling of the editor content. Forces left aligned, black text on a white background.

10

B1. JCE Optimizing Profiles

11

JCE Profiles
JCE Administration Editor Profiles
Create

different profiles

for different users and/or components

Order
12

= important Export / Import Profiles

JCE Profiles
Copy

Default Profile & edit

13

JCE Profiles Edit

14

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

B2. Optimizing JCE JCE Icons

16

Omit needless JCE buttons

Reduce

choices

Remove rarely used icons from Icon Bar Remove options that might mess up the layout

Organize
17

choices

Organize icons into logical groups

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 your
18

is to

sitecompletely...

mess up

JCE Edit Profile > Features

19

Arrange JCE buttons

Logical

groups:

Text appearence | Text alignment Hyperlinks |Tools

Optimized

Icon bar:

20

Remove even more....

Editor Parameters > Options > Format Elements

only keep: Paragraph, Heading2, Heading3, Heading4

21

and more....
Plugin

Parameters > Article Breaks

Show Pagebreak button: No

Plugin

Parameters > Paste

Allow Paste As HTML: No

22

B3. JCE Optimizing Joomla Buttons

23

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

Remove Joomla editor buttons

25

Joomla editor buttons

26

C) JCE CSS Styling

27

editor.css 1/5

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

28

editor.css 2/5
JCE

editor WYSIWYG same as Template

Import some template styles in JCE. Add to your editor.css @import url(system.css); @import url(template.css);

29

editor.css 3/5
Some

CSS files have too many styles!

Don't use: @import url(general.css); @import url(personal.css);

30

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

editor.css 5/5
Create

custom styles

.makethisred{color: #ff0000;}

Note:

32

editor.css is not loaded in front-end template!

D) JCE addons (commercial)

33

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

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

JCE Plugins Captions


Add

captions to images

36

JCE Plugins File Manager


Add

files to website

Automatic file type icon

37

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

JCE Plugins Media Manager


Add

videoclips to website

Why not use a Joomla Plugin like Allvideos Plugin?


Depends

on the number of videos / articles

39

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

Questions?

Download JCE editor (free):

www.joomlacontenteditor.net

Purchase JCE addons (commercial):


$30 / $20 USD per year, unlimited use! www.joomlacontenteditor.net/subscribe

Presentation: Peter Martin (pe7er)


Photos used in presentation:


Don't make me think: Bob Smith Profiles: Sanja Gjenero Buttons: Tomasz Sowanski CSS: Svilen Milev Addons: Michael Faes

twitter: @pe7er e-mail: info at db8.nl website: www.db8.nl

41