Wyvern is built to provide the best content entry workflow possible. It is the first and only editor that integrates seemlessly with all of these popular modules: Structure, Pages, Taxonomy, NavEE, SafeCracker, and Assets. It was the first ExpressionEngine editor to include a visual editing mode to see separations in your content blocks so your editors do not get confused and mangle the content.




Make sure your system meets the minimum requirements:

Installation Instructions

Update instructions

Adding 3rd Party Plugins

Place your CKEditor plugin inside the /themes/third_party/wyvern/plugins/ folder. In the ExpressionEngine control panel go to Add-ons » Fieldtypes » Wyvern and select your plugin in the multi-select menu to enable it.

Adding buttons to the toolbar

By default, Wyvern intentionally comes with a limited set of CKEditor buttons in the Fieldtype settings page. I have chosen to keep the default list to the essentials for simplicity. If a button you need is not found in the Toolbar list, open the system/expressionengine/third_party/wyvern/config.php file. You will see an array which defines the default list, as well as the rest of the available CKEditor buttons, which are commented out.

To enable a button, simply remove the code comment prior to that button. Go back to the Add-ons > Fieldtypes > Wyvern page and the button will be available within the Toolbar list.

Adding Custom Styles

The first 2 options in the Wyvern Fieldtype settings let you define the path to a custom JavaScript and CSS file. The paths are automatically filled in for you after installation and point to the wysiwyg.js and wysiwyg.css located within your /themes/third_party/wyvern/ folder. These files contain an example, and usable starting point for you to add custom styles.

The wysiwyg.css and .js files should contain the same styles. Whatever is defined in wysiwyg.js is what will appear in the Styles drop down menu in the Wyvern field.


CKEDITOR.addStylesSet('wyvern', [
    { name: 'Paragraph', element: 'p' },
    { name: 'Heading', element: 'h4' },
    { name: 'Image on left', element: 'img', attributes: { 'class': 'float_left' }},
    { name: 'Image on right', element: 'img', attributes: { 'class': 'float_right' }},


float: left; 
    margin: 0 1em 1em 0;

img.float_right {
    float: right;
    margin: 0 0 1em 1em;

If you use custom styles heavily it is recommended to move the wysiwyg.css and .js file to another location within your project, then change the fieldtype settings paths accordingly. Doing this will prevent the files from be overwritten when you upgrade Wyvern.

For more information see the CKEditor documentation on custom styles.

Google Fonts and Typekit

After entering your Google Font and/or Typekit ID insto the fieldtype settings you will need to add the styles to your wysiwyg.css file as indicated below.

Template tags

Text Only

Wyvern 1.4.3 introduces a :text_only option to each field variable. This will remove all HTML tags from the content. The following optional parameters are also available.

Optional: Limit the content to a specific number of words.

Optional: If using the limit parmeter this allows you to add a string of text after the limited text, such as a "Read More" link.

{field_name:text_only word_limit="50" suffix="..."}

Table of Contents

Wyvern 1.6 introduces a :with_toc option to each field variable. This will generate a linkable table of contents of your field content based on the headers used. The following optional parameters are also available.

Optional. Defaults to ordered list.

Optional. Defaults to list item.

Optional. Defaults to blank.

Optional. Defaults to blank.

Optional. Defaults to blank. This is a class that will be added to all nested/child lists, e.g. ul > li > ul.

Optional. Defaults to yes. Set to "n" or "no" to turn off the table of contents rendering on a per field usage.



2.0.0 (00-00-2017) (not yet released)

1.8.0 (13-01-2017)