Devot:ee 2011 AcademEE Awards Fieldtype Runner Up

A WYSIWYG editor should be lightweight and easy to use, and should not break your design. That is what Expresso sets out to do. There is a choice of either a full, basic or light toolbar, although all toolbars only contain the most crucial text editing buttons. You can also create a completely custom toolbar. Strict precautions are in place so that pasting text from word or other sources won't produce ugly html and won't mess up your design when viewed on the site. You can define the css to be used within the editor so that the site's design is reflected there, making it easier to see the end result before publishing.

Expresso

Expresso uses ExpressionEngine's native file manager so you will feel right at home when uploading and browsing files.

Expresso

Expresso integrates with NavEE, Structure and Pages and adds links to your pages inside the link dialog. The link, images and other dialogs are also style to match the control panel theme.

Expresso

Expresso is fully compatible with Matrix, Low Variables, Bloqs, and Content Elements, so you can have full WYSIWYG functionality in your third-party fieldstypes.

Expresso

Expresso

Expresso

Requirements

Expresso works with ExpressionEngine version 2.10.0 or above, 3.1.0 or above, and 4.0.0 and above.

For ExpressionEngine 2 and 3, you must download and use the legacy version of the add-on from the main add-on page on devot-ee.

Installation

Download and unzip Expresso, then follow the simple steps below:

  1. Upload the __user/addons/expresso folder
  2. Upload the themes/addons/expresso folder
  3. Enable the Expresso add-on
  4. Open the Expresso add-on settings, enter your license number and make any customisations
  5. Create a custom channel field and select Expresso as the field type

Updating

Download and unzip the latest version of Expresso, then follow the steps below:

  1. Overwrite the user/addons/expresso folder
  2. Overwrite the themes/addons/expresso folder
  3. Open the Expresso add-on settings and modify any newly available features

Template Tag Parameters

You can use parameters to alter the output of your template tag. If your field name is "page_text" then you can use the tag as follows:

{page_text strip_tags="true" allowable_tags="<em><strong>" word_limit="20"}

strip_tags="true"
Strips all html tags from the output

allowable_tags="<em><strong>"
If _striptags is set to true then this parameter allows you to specify what html tags should not be stripped

strip\_line\_breaks="true"
Strips all line breaks, carriage returns and tabs (\n, \r, \t) from the html source code

character_limit="100"
Limits the output to the specified number of characters

word_limit="20"
Limits the output to the specified number of words

paragraph_limit="1"
Limits the output to the specified number of paragraphs

Content Elements Support

Expresso works with Content Elements seamlessly. You can output the contents of your Expresso field using the {expresso} tag pair as follows:

{ce_field}
  {expresso}
    {element_name}: {value}
  {/expresso}
{/ce_field}

element_name
The name of the Expresso element

value
The contents of the Expresso element

CKEditor Plugins & Language

You can manually install any CKEditor plugins you want as follows:

  1. Upload the plugin into the _themes/user/expresso/ckeditor4.x.x/plugins _folder
  2. Edit themes/user/expresso/javascript/expresso.js and add the plugin name to the list of extra plugins in following line:

     ​extraPlugins: "headers,mediaembed,autogrow",
    

You can change the language of CKEditor as follows:

  1. Edit themes/user/expresso/javascript/expresso.js and add the language attribue as follows:

     var defaults = 
     {
     	language: "de",
    
    

    Possible values are:
    af, ar, bg, bn, bs, ca, cs, cy, da, de, el, en-au, en-ca, en-gb, en, eo, es, et, eu, fa, fi, fo, fr-ca, fr, gl, gu, he, hi, hr, hu, is, it, ja, ka, km, ko, ku, lt, lv, mk, mn, ms, nb, nl, no, pl, pt-br, pt, ro, ru, sk, sl, sq, sr-latn, sr, sv, th, tr, ug, uk, vi, zh-cn, zh

Global Field Settings

You can customise a number of things including the toolbar in the global field settings
(Control Panel > Add-Ons > Fieldtypes > Expresso):

License Number
Enter your license number here

Toolbar Icons
Select the icons that should appear in the toolbar

Header Styles
Select the header styles that should appear in the toolbar

Make Editor Full Width
Set to enabled to make the editor fill the width of the field

Outline Blocks by Default
Set to enabled to outline blocks by default

Additional Entities to Escape
Add any entities that should be escaped

Channel URIs
Add a URI for each channel to make its entries linkable in the editor. Leave blank to exclude a channel.

CSS
Any CSS code you add here will be applied to the Expresso WYSIWYG editor (it will not be applied to the rendered content). You can also add the url to a CSS file if you prefer.

Custom Toolbar
You can create a custom toolbar by manually entering code in the following format (see the CKEditor toolbar docs for all toolbar icons)

[ "Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript" ],
[ "Link", "Unlink", "Anchor" ],
[ "Image", "Flash", "Table", "HorizontalRule", "Iframe" ]

Styles
You can create custom styles by manually entering code in the following format (see the CKEditor styles docs)

{ name: "Red Title" , element: "h3", styles: { "color": "Red" } },
{ name: "CSS Style", element: "span", attributes: { "class": "my_style" } },
{ name: "Marker: Yellow", element: "span", styles: { "background-color": "Yellow" } }

Individual Field Settings

You can customise a number of things specific to an Expresso field in the individual field settings
(Control Panel > Admin > Channel Administration > Channel Fields):

Toolbar
Select whether to display the full (all selected icons), basic (only basic icons), light (minimal set of icons) or custom toolbar (as defined in the global settings)

CSS
Any CSS code you add here will be applied to the Expresso WYSIWYG editor in addition to any CSS code you added in the global field settings (it will not be applied to the rendered content). You can also add the url to a CSS file if you prefer.

Support

Get support by creating a new issue here.