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
Top Related