Configuring JoomlaContentEditor (JCE) (from usability point of view)

Peter Martin (pe7er)

twitter: @pe7er www.db8.nl

Thank you JCE!

for sponsoring my travel + accommodation for this marvelous Joomla extension for the friendly licensing model for JCE addons I am not working for, or affiliated with JCE. I just like it and I use JCE on every website

Contents
A)Don't make me think B)JCE optimizing
B1. Profiles B2. Joomla Buttons B3. JCE Buttons + styles

C)JCE CSS Styling D)JCE addons (commercial)

A) Don't make me think

Don't make me think Steve Krug

Chapter 5: Omit needless words

Which WYSIWYG editor? 1/2

Which WYSIWYG editor? 2/2

JCE Editor...

B1. JCE Optimizing Profiles

JCE Profiles
Priceless! Create different profiles for different users and/or components Order = important

B2. JCE Optimizing Joomla Buttons

Omit needless Joomla buttons

Back-end > Extensions > Plug-in Manager > disable all editors-xtd type plugins: Button - Article Button - Image Button - Pagebreak Button - Readmore

B3. JCE Optimizing JCE Buttons & styles

Omit needless JCE buttons

Back-end > Components > JCE Administration > Editor Profiles > Default > Features:
Move rarely used icons from "Current Editor Layout" to "Available Buttons"

IMHO needless JCE buttons

Underline: = hyperlink ? Tables: are you still living in the 90s? Font family + Font size + Font color + Background color: or how

easy

is

to

sitecompletely...

mess up your

JCE Needless buttons removed

Arrange JCE buttons

Logical groups:
Text appearence Text alignment Tools Hyperlinks

Remove even more....

Format Elements
(Editor Param > Options)

Paragraph, Div, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Address, Code, Preformatted, Sample, Span

and more....
Paste options (Plugin Params > Paste > Allow Paste As HTML = No):

Paste, Paste as Plain Text

Export Profile
Optimizing JCE = relatively much work
Save your profile with Export: Editor Profiles > click Default > Export

C) JCE CSS Styling

editor.css 1/5
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

editor.css 2/5
For better WYSIWYG: Import some template styles in JCE. Add to your editor.css
@import url(system.css); @import url(template.css);

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

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;}

editor.css 5/5
Create custom styles
.makethisred{color: #ff0000;}

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

D) JCE addons (commercial)

Joomla Content Editor (JCE)

My default Joomla installation:
JCE + JCE MediaBox (free) JCE addons (JCE plugins):
Captions File Manager Image Manager Extended Media Manager

JCE Plugins
Add-ons / extra's No Joomla plugins, install using JCE Commercial license Set default settings! Version 2! Drag & drop Checks upload size before uploading The Brian switch

JCE Plugins Captions

Add captions to images

JCE Plugins File Manager

Add files to website
Automatic file type icon

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)

JCE Plugins Media Manager

Add videoclips to website
Difference between this plugin & Plugins like Allvideos Plugin

JCE Plugins Various

Emotions Fullpage Iframe Template manager

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