Durandal 中的内联 CKEditor

Question

我正在使用 Durandal 创建单页应用程序，我想在其中使用 CKEditor。我在 html 页面中使用 javascript 遇到了 Durandal 的一些问题，但考虑到我在做什么，我不知道在 js 中放置必要的 javascript 的替代方法文件。 html 文件本身工作正常，但是当 Durandal 运行文件时，javascript 似乎被忽略了。

通过单击 div，CKEditor 应该显示一个用于编辑 html 内联的工具栏，但是当我运行使用 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;
});

如何让 CKEditor 与 Durandal 一起工作？

Answer 1

为了解决这个问题，我将 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";
        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;
});

现在可以使用了。

Durandal 中的内联 CKEditor

Inline CKEditor in Durandal

javascript

ckeditor

durandal