Documentation

Requirements

  • ExpressionEngine 2.7 or greater
  • CKEditor 4.0 or greater
  • PHP 5
  • Pages, Structure, Taxonomy, or NavEE module to use the Pages Link feature
  • CKEditor package

Installing Wyvern

CKEditor is not packaged with Wyvern. There are 1450 reasons why. After installing and enabling the Fieldtype and Extension, you will need to install CKEditor itself:

  1. Go to http://ckeditor.com/download and download the latest .zip or tar.gz file.
  2. After unzipping the file you will have a folder ckeditor.
  3. Place the ckeditor folder into /themes/third_party/ (screenshot)

Adding 3rd Party Plugins (after version 1.2.7)

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 3rd Party Plugins (prior to version 1.2.7)

Wyvern supports 3rd party plugins for CKEditor such as Channel Images and Flickr for ExpressionEngine. Installation can be done in a few easy steps.

  1. Edit the third_party/wyvern/config.php file, and at the bottom of the $config['toolbar_buttons'] array, add the name of the plugin with the value set to yes (Examples are included for ChannelImages and Flickr).
  2. Go to Add-Ons > Fieldtypes > Wyvern, and in the Extra Plugins field enter a comma separated list of the plugin names you are adding.
  3. On the same page, you should see new toolbar button options from the additions to the $config array. Edit and save your toolbars and add the plugin buttons as necessary.

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.

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.

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.

wysiwyg.js

CKEDITOR.addStylesSet('wyvern', [<br />     { name: 'Paragraph', element: 'p' },<br />     { name: 'Heading', element: 'h4' },<br />     { name: 'Image on left', element: 'img', attributes: { 'class': 'float_left' }},<br />     { name: 'Image on right', element: 'img', attributes: { 'class': 'float_right' }},<br /> ]);

wysiwyg.css

img.float_left {<br />     float: left; <br />     margin: 0 1em 1em 0;<br /> }<br /> <br /> img.float_right {<br />     float: right;<br />     margin: 0 0 1em 1em;<br /> }<br />

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.

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.

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

word_limit=""

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

suffix=""

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.

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.

{field_name:with_toc}

list_type="ol"

Optional. Defaults to ordered list.

item_type="li"

Optional. Defaults to list item.

list_class=""

Optional. Defaults to blank.

item_class=""

Optional. Defaults to blank.

child_class=""

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

show="y"

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