Javascript API

With the Javascript API, you are able to set the content for an wyvern instance.

Ready

Execute a callback function when the Wyvern editor is ready. Since v6.0.0 the callback receives the CKEditor 5 editor instance.

REINOS_WYVERN.ready(id, function(editor){
    // you callback code
});

You can also listen for the wyvern:ready event, it bubbles up from the editor:

document.addEventListener('wyvern:ready', function(event){
    console.log(event.detail.id, event.detail.editor);
});

GetEditor

Available from v6.0.0

Get the CKEditor 5 instance of a Wyvern field, or null when it is not (yet) ready.

var editor = REINOS_WYVERN.getEditor(id);
editor.getData();

AddStyles

Available from v6.0.0

Add styles to the Styles dropdown, see Path to custom JS file.

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

SetContent

Set the content of a Wyvern instance

REINOS_WYVERN.setContent({
    id: 'id-of-the-instance',
    content: 'override content',
    defaultContent: 'Some default text',
});

Examples

Practical use case for channel form, setting a default value

{exp:channel:form id="wyvern" channel="wyvern" return="site/channel-form" include_assets="yes"}
   <input name="title" type="text">
   <input name="url_title" type="text">

   <div class="wyvern-channel-form">{field:wyvern}</div>

   <input type="submit" value="Submit">
{/exp:channel:form}


<script>
    window.onload = function(){
        var id = document.querySelector('.wyvern-channel-form textarea').dataset.id;
        REINOS_WYVERN.ready(id, function(){
            REINOS_WYVERN.setContent({
                id: id,
                content: 'override content',
                defaultContent: 'Some default text',
            });
        });
    }
</script>