Update to Wyvern 6

Wyvern 6 replaces CKEditor 4 with CKEditor 5. Most sites can update without changes, but check the points below before you update a live site.

Before you update

• Wyvern 6 requires ExpressionEngine 7 and PHP 8.0 or later. On ExpressionEngine 6 stay on Wyvern 5.7.0 (legacy_versions/ee_wyvern-v5.7.0.zip).
• Backup the files and the database.
• Remove the old themes/user/wyvern folder completely before you upload the new one. The old ckeditor and ckeditor_plugins folders are no longer used.
• Run the update from the add-on page. It adds a "Complete (CKEditor 5)" toolbar, your own toolbars are not changed.

After updating

• Go to Add-ons → Wyvern → Broken links and click Rebuild index once, see Broken links.
• Responsive images are on by default: images from the File Manager get a srcset, sizes, width/height and lazy loading on your site, so the HTML of your templates changes. Turn it off in the settings or per tag, see Responsive images.
• Your toolbars keep Allowed HTML: Everything, so no content is lost; new toolbars get Default. See Allowed HTML.
• New, and off until you turn them on: Linkable channels to link to entries, and the AI writing assistant.

Content

Your existing content is kept: elements, classes, inline styles, iframes, scripts and HTML comments are preserved. CKEditor 5 does write some markup slightly differently when an entry is saved again:

CKEditor 4	CKEditor 5
<table>	<figure class="table"><table>
<img style="float:left">	<img class="image-style-align-left" style="float:left;margin-right:1.5em">
<a id="top" name="top"></a>	<a id="top"></a>
<iframe> between paragraphs	<p><iframe></p>

Wyvern keeps writing the inline float styles for aligned images, so your front-end does not need extra CSS. Block images are wrapped in <figure class="image">.

Toolbars

Toolbars are translated to CKEditor 5 on the fly, nothing is changed in the database until you save a toolbar again.

CKEditor 4	CKEditor 5
Format	Heading (dropdown)
h1 ... h6	Heading 1 ... Heading 6
Styles	Styles
Font, FontSize, TextColor, BGColor	Font family, Font size, Font color, Background color
Strike	Strikethrough
JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock	Align left, Align center, Align right, Justify
Blockquote	Block quote
Anchor	Anchor / bookmark
Image	Image
Filemanager	EE File manager
Youtube, Embed	Media
Iframe	HTML snippet
Smiley	Emoji
SpecialChar	Special characters
HorizontalRule	Horizontal line
Find, Replace	Find and replace
Maximize	Fullscreen
Source	Source
- (separator) and / (new line)	separator and new line

These buttons no longer exist and are dropped: Cut, Copy, Paste, PasteText, PasteFromWord (pasting from Word is cleaned up automatically), Scayt (the browser spellchecker is used), CopyFormatting, CreateDiv, BidiLtr, BidiRtl, Unlink (part of the link balloon) and Flash.

The update logs per toolbar which buttons were dropped, see the log page under Logging in the sidebar of the add-on.

Custom CSS (wysiwyg.css)

CKEditor 4 showed the content in an iframe, CKEditor 5 edits inline in the page. Wyvern scopes every rule of your stylesheet (and the custom CSS per field) to the editor, so your existing file keeps working. body, html and .cke_editable refer to the editable area.

Styles dropdown (wysiwyg.js)

CKEditor 5 applies styles with CSS classes. Add your styles with REINOS_WYVERN.addStyles():

REINOS_WYVERN.addStyles([
    { name: 'Lead paragraph', element: 'p', classes: ['lead'] },
    { name: 'Marker', element: 'span', classes: ['marker'] },
]);

The CKEditor 4 format still works for styles that use a class:

CKEDITOR.stylesSet.add('wyvern', [
    { name: 'Lead paragraph', element: 'p', attributes: { 'class': 'lead' } },
]);

Styles with only inline styles (for example styles: { color: 'Red' }) are skipped, with a warning in the browser console. Give them a class and style that class in wysiwyg.css and on your site.

Extra CKEditor Config Options

The extra config now takes CKEditor 5 options. CKEditor 4 options are ignored, except forcePasteAsPlainText: true which still pastes everything as plain text.

CKEditor license key

CKEditor 5 runs under the open source GPL license unless you enter a commercial key, see CKEditor license key. This is not your Wyvern license.