Inline CKEditor in Durandal

Question

I'm using Durandal to create a single page application, and I want to use CKEditor in it. I've had some issues with Durandal using javascript within an html page, but given what I'm doing, I don't know an alternative to put the necessary javascript in the js file. The html file works fine on its own, but when Durandal runs it, the javascript seems to be ignored.

By clicking in the div, CKEditor should display a toolbar for editing the html inline, but that doesn't happen when I run it with Durandal.

createCourse.html

<section style="max-height: 20%;max-width: 100%">
    <script src="../viewmodels/createCourse.js"></script>
    <h2>Create a Course</h2>
    <div id="editor1" contenteditable="true">
        <h1>Inline Editing in Action!</h1>
        <p>The "div" element that contains this text is now editable.
    </div>

</section>

createCourse.js

define(["plugins/http", "durandal/app", "knockout", "ckeditor"], function (http, app, ko, cke) {
    var ctor = function () {
        this.displayName = "Create a Course";
        this.description = "Add a new course";
    };

    return ctor;
});

What can I do to allow CKEditor to work with Durandal?

Answer 1

To fix this, I updated createCourse.js to

define(["plugins/http", "durandal/app", "knockout", "ckeditor"], function (http, app, ko, cke) {
    var ctor = function () {
        this.displayName = "Create a Course";
        this.description = "Add a new course";
        this.attached = function () {
            CKEDITOR.disableAutoInline = true;
            var cke = CKEDITOR.inline('editor', {/*some settings*/});

            cke.on('instanceReady', function (ev) {
                var editor = ev.editor;
                editor.setReadOnly(false);
            });
        };
    };

    return ctor;
});

and now it works.