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:
ckeditor
./themes/third_party/
(screenshot)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.
Wyvern supports 3rd party plugins for CKEditor such as Channel Images and Flickr for ExpressionEngine. Installation can be done in a few easy steps.
$config['toolbar_buttons']
array, add the name of the plugin with the value set to yes (Examples are included for ChannelImages and Flickr).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.
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.
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.
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.
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.