Wyvern
Requirements
- ExpressionEngine 2.1.3 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:
- Go to http://ckeditor.com/download and download the latest .zip or tar.gz file.
-
After unzipping the file you will have a folder
ckeditor. -
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.
-
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). - Go to Add-Ons > Fieldtypes > Wyvern, and in the Extra Plugins field enter a comma separated list of the plugin names you are adding.
- 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', [
{ 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' }},
]);
wysiwyg.css
img.float_left {
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.