Lightning Renderer External Script Dependency

Question

I'm trying to write a Lightning component renderer that has an external script dependency, specifically CKEditor. I know there's already a Lightning rich text component that uses CKEditor but it doesn't do everything I'd like it to.

I've got my own CKEditor static resource loaded by ltng:require, the problem is that neither render, rerender or afterRender have access to the script on first load using ltng:require. Is there a way to guarantee that the render is run after scripts are loaded?

I've tried the doneRendering event but it is still undefined and my understanding is that dom manipulation shouldn't be done outside of the renderer

({
render: function(component, helper) {
    var ren = this.superRender();

    console.debug('Render CKEditor: '+typeof CKEDITOR);
    console.debug('Render $: '+typeof $);


    return ren
},

rerender: function(component, helper){

    this.superReRender();

    console.debug('ReRender CKEditor: '+typeof CKEDITOR);
    console.debug('ReRender $: '+typeof $);

},

afterRender: function(component, helper) {

    console.debug('afterRender CKEditor: '+typeof CKEDITOR);
    console.debug('afterRender $: '+typeof $);

}

})

<aura:component>


<ltng:require scripts="/resource/cmsltng__jqueryui/js/rendering/jquery.min.js,
     /resource/cmsltng__jqueryui/js/rendering/jquery-ui.min.js,
     /resource/cmsltng__ckedit/ckeditor/ckeditor.js" />


<aura:handler event="aura:doneRendering" action="{!c.initCKEditor}" />  

<textarea aura:id="richText"></textarea>

There's a similar question but the answers are stale and pre ltng:require

How to use jQuery (or any JS lib) in initial post rendering of Lightning Components

Answer 1

There is a "afterScriptsLoaded" event that gets fired when all of your ltng:require stuff finishes loading. I suppose you can have some renderer code that runs afterSciptsLoaded. For example

<ltng:require scripts="/resource/cmsltng__jqueryui/js/rendering/jquery.min.js,
 /resource/cmsltng__jqueryui/js/rendering/jquery-ui.min.js,
 /resource/cmsltng__ckedit/ckeditor/ckeditor.js"
 afterScriptsLoaded="{!c.afterLoad}"/>

And then a controller like so:

render: function(component, event, helper) {
    var ren = this.superRender();
    //etc...
    return ren
},
afterLoad: function(component, event, helper) {
    this.render(component, event, helper);
},

Answer 2

this.superRender() in controller won't work. Try this instead.

Component:

<aura:component>
        <ltng:require scripts="/resource/CKEditor" afterScriptsLoaded="{!c.afterLoad}" />  
        <aura:attribute name="isCKEditorLoaded" type="Boolean" default="false"/>
</aura:component>

Controller:

({
    afterLoad: function(component, event, helper) {
        component.set("v.isCKEditorLoaded", true);
    }
})

Helper:

({
    modifyDom: function(component) {
        if(component.get("v.isCKEditorLoaded")) {
            //Do the required DOM modification
        }

    }
})

Renderer:

({
    afterRender: function(component, helper) {
        this.superAfterRender();
        helper.modifyDom(component);
    }
})