UIkit styling into CKEditor

Question

I would like my CKEditor text area to be styled based on the UIkit framework in order to have a direct overview of the display without having to click on proview. I have already added the css in the config.js using

/* uikit.css */
    config.contentsCss = '/css/uikit.min.css';

However, UIkit also need its JS file to properly dynamic content such as tab or accordion for example.

How can I add the uikit.js into CKEditor?

Answer 1

By adding the following in the config.js, it works as expect:

 CKEDITOR.on('instanceReady', function(ev) {
    var uikitScript = document.createElement('script');

    uikitScript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js';


    var editorHead = ev.editor.document.$.head;
    editorHead.appendChild(uikitScript);   
});