Optimizing JCE editor from usability point of viewby Peter Martin (pe7er) twitter: @pe7er website: www.db8.nl

JoomlaDay Bangkok 2012 February 25th 2012

IntroductionPeter 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:

2

ContentsA)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

4

Don't make me think Steve Krug Chapter

5: Omit needless words = Reduce choices for administrators

5

Which WYSIWYG editor? 1/2

6

Which WYSIWYG editor? 2/2

7

JCE Editor

8

JCE editor Management

9

JCE Editor Global ConfigurationJCE 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 ProfilesJCE Administration Editor Profiles Create

different profiles

for different users and/or components

Order12

= 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 Parameters15

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

Organize17

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 your18

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 buttonsBack-end > Extensions > Plug-in Manager > disable all editors-xtd type plugins: Button - Article Button - Image Button - Pagebreak Button - Readmore24

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 Manager34

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 uploading35

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 menuExtensions > 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