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.
{page_url:23}
23 is the Entry ID of the page you are linking too. Start linking to pages based on ID, not the URI. This makes the site more portable, and easier to update. TIP: You don't have to use the Wyvern Fieldtype to take advantage of these global variables. As long as you are using Pages or Structure modules, just enable the Wyvern Extension, and you are good to go.Make sure your system meets the minimum requirements:
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.
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.
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.
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.
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.
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.
{field_name:text_only word_limit="50" suffix="..."}
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.
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.
{field_name:with_toc}
{exp:channel:entries}
[EE3]