Expresso

Intuitive WYSIWYG field for happy content editors.

Expresso provides you with a WYSI­WYG edit­or field­type for chan­nel entries. Its main aim is to allow intu­it­ive con­tent edit­ing for your users while respect­ing your site’s design.

Second Place AwardDevot:ee Aca­demEE Awards Field­type Run­ner Up

Expresso 1

A WYSI­WYG edit­or should be light­weight 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 tool­bar, although all tool­bars only con­tain the most cru­cial text edit­ing but­tons. You can also cre­ate a com­pletely cus­tom tool­bar. Strict pre­cau­tions are in place so that past­ing text from word or oth­er sources won’t pro­duce ugly html and won’t mess up your design when viewed on the site. You can define the css to be used with­in the edit­or so that the site’s design is reflec­ted there, mak­ing it easi­er to see the end res­ult before publishing.

Expresso uses ExpressionEngine’s nat­ive file man­ager so you will feel right at home when upload­ing and brows­ing files.

Expresso

Expresso integ­rates with NavEE, Struc­ture and Pages and adds links to your pages inside the link dia­log. The link, images and oth­er dia­logs are also style to match the con­trol pan­el theme.

Expresso

Expresso is fully com­pat­ible with Mat­rix, Low Vari­ables, Blo­qs, and Con­tent Ele­ments, so you can have full WYSI­WYG func­tion­al­ity in your third-party fieldstypes.

Expresso

Expresso

Expresso

Require­ments #

Expresso works with Expres­sion­En­gine ver­sion 2.10.0 or above, 3.1.0 or above, 4.0.0 and above and 5.0.0 and above.

For Expres­sion­En­gine 2 and 3, you must down­load and use the leg­acy ver­sion of the add-on from the main add-on page on devot-ee.

Install­a­tion #

Down­load and unzip Expresso, then fol­low 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 set­tings, enter your license num­ber and make any customisations
  5. Cre­ate a cus­tom chan­nel field and select Expresso as the field type

Updat­ing #

Down­load and unzip the latest ver­sion of Expresso, then fol­low the steps below:

  1. Over­write the user/addons/expresso folder
  2. Over­write the themes/addons/expresso folder
  3. Open the Expresso add-on set­tings and modi­fy any newly avail­able features

Tem­plate Tag Para­met­ers #

You can use para­met­ers to alter the out­put of your tem­plate 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 para­met­er allows you to spe­cify what html tags should not be stripped

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

character_limit="100"
Lim­its the out­put to the spe­cified num­ber of characters

word_limit="20"
Lim­its the out­put to the spe­cified num­ber of words

paragraph_limit="1"
Lim­its the out­put to the spe­cified num­ber of paragraphs

Con­tent Ele­ments Sup­port #

Expresso works with Con­tent Ele­ments seam­lessly. You can out­put the con­tents 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 con­tents of the Expresso element

CKEd­it­or Plu­gins & Lan­guage #

You can manu­ally install any CKEd­it­or plu­gins you want as follows:

  1. Upload the plu­gin into the _themes/user/expresso/ckeditor4.x.x/plugins _folder

  2. Edit themes/user/expresso/javascript/expresso.js and add the plu­gin name to the list of extra plu­gins in fol­low­ing line:

    extraPlugins: "headers,mediaembed,autogrow",

You can change the lan­guage of CKEd­it­or as follows:

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

    var defaults = 
    {
     language: "de",

    Pos­sible val­ues 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

Glob­al Field Set­tings #

You can cus­tom­ise a num­ber of things includ­ing the tool­bar in the glob­al field settings
(Con­trol Pan­el > Add-Ons > Field­types > Expresso):

License Number
Enter your license num­ber here

Toolbar Icons
Select the icons that should appear in the toolbar

Header Styles
Select the head­er styles that should appear in the toolbar

Make Editor Full Width
Set to enabled to make the edit­or fill the width of the field

Outline Blocks by Default
Set to enabled to out­line blocks by default

Additional Entities to Escape
Add any entit­ies that should be escaped

Channel URIs
Add a URI for each chan­nel to make its entries link­able in the edit­or. Leave blank to exclude a channel.

CSS
Any CSS code you add here will be applied to the Expresso WYSI­WYG edit­or (it will not be applied to the rendered con­tent). You can also add the url to a CSS file if you prefer.

Custom Toolbar
You can cre­ate a cus­tom tool­bar by manu­ally enter­ing code in the fol­low­ing format (see the CKEd­it­or tool­bar docs for all tool­bar icons)

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

Styles
You can cre­ate cus­tom styles by manu­ally enter­ing code in the fol­low­ing format (see the CKEd­it­or 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" } }

Indi­vidu­al Field Set­tings #

You can cus­tom­ise a num­ber of things spe­cif­ic to an Expresso field in the indi­vidu­al field set­tings at Con­trol Pan­el → Admin → Chan­nel Admin­is­tra­tion → Chan­nel Fields:

Toolbar
Select wheth­er to dis­play the full (all selec­ted icons), basic (only basic icons), light (min­im­al set of icons) or cus­tom tool­bar (as defined in the glob­al settings)

CSS
Any CSS code you add here will be applied to the Expresso WYSI­WYG edit­or in addi­tion to any CSS code you added in the glob­al field set­tings (it will not be applied to the rendered con­tent). You can also add the url to a CSS file if you prefer.

Changelog #

Ver­sion 5.3.1 #
  • Fixed wrong CKEd­it­or ver­sion num­ber in settings.
Ver­sion 5.3.0 #
  • Updated CKEd­it­or to 4.11.3.
  • Fixed issues with RTE and Live Preview.
Ver­sion 5.2.0 #
  • Added com­pat­ib­il­ity with live pre­view (requires EE 4.3.4 or above).
Ver­sion 5.1.0 #
  • Added rel­at­ive URL’s setting
  • Fixed bug with mat­rix integration
Ver­sion 5.0.3 #
  • Fixed deprec­a­tion error in PHP 7.2
Ver­sion 5.0.2 #
  • Fixed use of null coales­cing oper­at­or (PHP7 only)
Ver­sion 5.0.1 #
  • Fixed bug with grid fieldtype
Ver­sion 5.0.0 #
  • Made com­pat­ible with Expres­sion­En­gine 4
Ver­sion 4.2.9 #
  • Removed rel­at­ive URL con­vert­ing in replace tag method
Ver­sion 4.2.8 #
  • Fixed rel­at­ive URL in image dialog
Ver­sion 4.2.7 #
  • Fixed set­tings that would not save when left blank
  • Removed dummy image pre­view text
Ver­sion 4.2.6 #
  • Fixed PHP error that could appear after cre­at­ing a new site in MSM
  • Fixed filepick­er mod­al issue in image dialog
Ver­sion 4.2.5 #
  • Added rel­at­ive URL’s to file picker
  • Fixed filepick­er mod­al issue in full screen mode
  • Fixed full width issue in grid fieldtype
Ver­sion 4.2.4 #
  • Added sup­port for Bloqs
  • Fixed PHP notices when used inside Low Variables
Ver­sion 4.2.3 #
  • Fixed file browser mod­al win­dow in full screen mode
  • Restored com­pat­ib­il­ity with PHP 5.3.x
Ver­sion 4.2.2 #
  • Replaced miss­ing file in pre­vi­ous version
Ver­sion 4.2.1 #
  • Pages list now appears in alpha­bet­ic­al order
Ver­sion 4.2.0 #
  • Added a chan­nel URI set­ting which gives the abil­ity to make entries link­able with­in the editor
  • Updated CKEd­it­or to ver­sion 4.5.10
  • Fixed com­pat­ib­il­ity issues with Low Vari­ables add-on
Ver­sion 4.1.1 #
  • Made com­pat­ible with PHP 7.0.0
Ver­sion 4.1.0 #
  • Added glob­al set­ting to make edit­or full width
  • Fixed bug with source code height in full screen mode
  • Fixed incor­rect tool­bar icons in glob­al settings
Ver­sion 4.0.5 #
  • Fixed error that appears in debug­ging mode
Ver­sion 4.0.4 #
  • Fixed bug with NavEE compatibility
Ver­sion 4.0.3 #
  • Fixed bug with field val­id­a­tion on pub­lish page
Ver­sion 4.0.2 #
  • Fixed bug in Grid field­type settings
Ver­sion 4.0.1 #
  • Fixed bug with file browser
Ver­sion 4.0.0 #
  • Made com­pat­ible with Expres­sion­En­gine 3
End of fea­ture devel­op­ment for EE2 ver­sion #
Ver­sion 3.5.0 #
  • Added a chan­nel URI set­ting which gives the abil­ity to make entries link­able with­in the editor
  • Added com­pat­ib­il­ity with PHP7
Ver­sion 3.4.8 #
  • Fix for Expresso appear­ing inside of a Mat­rix field inside of a Low Vari­ables field
Ver­sion 3.4.7 #
  • Fix for poten­tial miss­ing slashes in link dia­log for Pages, NavEE and Struc­ture links
Ver­sion 3.4.6 #
  • Added {site_​index} tag to gen­er­ated links
Ver­sion 3.4.5 #
  • Updated CKEd­it­or to ver­sion 4.4.7
  • Updated CKEd­it­or docs links
Ver­sion 3.4.4 #
  • Added back­ward com­pat­ib­il­ity sup­port for tem­plates with empty Con­tent Ele­ments tag pair
Ver­sion 3.4.3 #
  • Added tag pair sup­port for Con­tent Ele­ments with {element_​name} and {value} tags
Ver­sion 3.4.2 #
  • Fixed bug with Con­tent Elements
Ver­sion 3.4.1 #
  • Read­ded miss­ing CKEd­it­or plugins
  • Read­ded miss­ing tool­bar icons on set­tings page
  • Read­ded advanced dia­log tab
Ver­sion 3.4.0 #
  • Updated to CKEd­it­or 4.4.5 (release notes)
  • Fixed bug with IE11
Ver­sion 3.3.3 #
  • Added abil­ity to out­line blocks by default
  • Added abil­ity to edit addi­tion­al entit­ies to escape
Ver­sion 3.3.2 #
  • Added sub­script and super­script tool­bar options
Ver­sion 3.3.1 #
  • Added tool­bar select field to Con­tent Ele­ments field­type settings
Ver­sion 3.3 #
  • Added com­pat­ib­il­ity for Con­tent Ele­ments add-on
Ver­sion 3.2.4 #
  • Fixed bug with IE11
Ver­sion 3.2.3 #
  • Fixed bug where ShowBlocks and Source icons would be missing
Ver­sion 3.2.2 #
  • Fixed php error
Ver­sion 3.2.1 #
  • Fixed bug in glob­al set­tings retrieval
Ver­sion 3.2 #
  • Added com­pat­ib­il­ity for Grid
Ver­sion 3.1.7 #
  • Fixed bug with chan­ging the order of Mat­rix rows that con­tain Expresso fields
Ver­sion 3.1.6 #
  • Pro­tocol in link dia­log auto­mat­ic­ally changes to other when using Pages/​Structure/​Navee dropdown
Ver­sion 3.1.5 #
  • Fixed bug with set­ting language
Ver­sion 3.1.4 #
  • Updated link dia­log to use {site_​url} instead of abso­lute url
Ver­sion 3.1.3 #
  • Made com­pat­ible with EE 2.6.0
Ver­sion 3.1.2 #
  • Fixed bug where head­er tags lost their styling
Ver­sion 3.1.1 #
  • Fixed typos in folder name
Ver­sion 3.1 #
  • Updated to CKEd­it­or 4.1 (release notes)
  • Set jquery­Over­rideV­al con­fig vari­able to false
Ver­sion 3.0.2 #
  • Fixed bug in media embed plugin
Ver­sion 3.0.1 #
  • Fixed bug that some­times showed PHP error
Ver­sion 3.0 #
  • Updated to CKEd­it­or 4 (release notes) with Moono theme
  • Added media plu­gin and tool­bar icon
  • Added autogrow plugin
  • Added strip_​line_​breaks tag
  • Removed height from glob­al and field settings
  • Removed video plu­gin and tool­bar icon
  • Removed back­ground col­our from settings
Ver­sion 2.3 #
  • Added sup­port for hav­ing a moved third-party theme folder
Ver­sion 2.2 #
  • Fixed bug with extra links from third-party add-ons
Ver­sion 2.1.2 #
  • Fixed bug with declar­a­tion of CKEd­it­or plugin
Ver­sion 2.1.1 #
  • Made edit­or resizable
  • Fixed bug with miss­ing CKEd­it­or plugin
Ver­sion 2.1 #
  • Added HTML5 video icon and dialog
  • Added check that upload des­tin­a­tions exist
  • Changed to EE’s built-in generate_​json method
  • Fixed bug with para­graph limiter
  • Fixed bug with Bet­ter Workflow
Ver­sion 2.0 #
  • Brand new silk” theme (attri­bu­tions)
  • Added import and export of settings
  • Added anchor icon
  • Made com­pat­ible with Bet­ter Work­flow v1.2
  • Bug­fix when sav­ing set­tings in Low Variables
Ver­sion 1.9 #
  • Added tem­plate tag para­met­ers (strip_​tags, allowable_​tags, character_​limit, word_​limit, paragraph_limit)
  • Added paste from word icon
  • Removed text col­our icon
  • Fixed mis­spelled folder in zip file
Ver­sion 1.8.1 #
  • Added Indent and Out­dent buttons
Ver­sion 1.8 #
  • Added cus­tom­is­able toolbar
  • Changed design of glob­al set­tings page
Ver­sion 1.7.2 #
  • Fixed sta­bil­ity issue in link dialog
Ver­sion 1.7.1 #
  • Bug­fix for Safecrack­er in EE 2.3
  • Bug­fix for font col­our dialog
Ver­sion 1.7 #
  • Added sup­port for Low Variables
Ver­sion 1.6.2 #
  • Bug­fixes when using Expresso in Mat­rix and Safecracker
Ver­sion 1.6.1 #
  • Added PEAR JSON lib­rary to sup­port sys­tems run­ning PHP ver­sions older than 5.2.0
Ver­sion 1.6 #
  • Added sup­port for NavEE (ver­sion 2.1.2 and above), Struc­ture and Pages in link dialog
  • Added Browse Files” but­ton to link and image dialogs
  • Added light tool­box (min­im­al set of icons)
  • File man­ager drop­down removed from field settings
  • Updated CKEd­it­or to ver­sion 3.6.2
Ver­sion 1.5.1 #
  • Added Max­im­ize icon
  • Updated CKEd­it­or to ver­sion 3.6.1
  • Bug­fixes
Ver­sion 1.5 #
  • Com­pat­ible with EE2.2.1
Ver­sion 1.4.2 #
  • Bug­fixes
Ver­sion 1.4.1 #
  • Bug­fixes
Ver­sion 1.4 #
  • Added full sup­port for Matrix
  • Improved effi­ciency of gen­er­ated code
Ver­sion 1.3 #
  • Partly added sup­port for Mat­rix fields
  • Added tool­bar icons
Ver­sion 1.2.3 #
  • Bug­fix in IE
Ver­sion 1.2.2 #
  • Bug­fix in File Manager
Ver­sion 1.2 #
  • Added EE styled dia­logs when adding links and images
  • Replaced Upload Des­tin­a­tion with File Man­ager yes/​no selection
  • Added func­tion­al­ity to Remove Format button
Ver­sion 1.1.1 #
  • Fixed bug with white over­lay not closing
  • Fixed bug with tool­bar icons
Ver­sion 1.1 #
  • Added nat­ive file man­ager integration
  • Added cus­tom­isa­tion to toolbars
Ver­sion 1.0 #
  • Ini­tial release