敲除绑定和 CK 编辑器工具栏未出现

Question

我对淘汰自定义绑定完全陌生，我正在尝试将 ckeditor 与淘汰竞标集成，我从 Google 搜索中获得了以下绑定，

    ko.bindingHandlers.wysiwyg = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor();
            var valueUnwrapped = ko.unwrap(value);
            var allBindings = allBindingsAccessor();
            var $element = $(element);


            $element.attr('contenteditable', true);
            if (ko.isObservable(value)) {
                var isSubscriberChange = false;
                var isEditorChange = true;
                $element.html(value());
                var isEditorChange = false;

                $element.on('input, change, keyup, mouseup', function () {
                    if (!isSubscriberChange) {
                        isEditorChange = true;
                        value($element.html());
                        isEditorChange = false;
                    }
                });
                value.subscribe(function (newValue) {
                    if (!isEditorChange) {
                        isSubscriberChange = true;
                        $element.html(newValue);
                        isSubscriberChange = false;
                    }
                });
            }
        }
    }

我有以下代码要绑定，

$(function () {
    $.getJSON("/getdata", function (data) {

            ko.applyBindings({
                testList: [{
                    test: ko.observable()
                },
                {
                    test: ko.observable()
                }]
            }, document.getElementById('htmled'));

    });
});

HTML如下

 <div id="htmled" data-bind="foreach:testList">
                 Data
     <div class="editor" data-bind="wysiwyg: test">Edit this data</div>

 </div>

当我在 $.getJSON 方法之外调用 ko.applyBindings 时，绑定工作并显示工具栏。但是当我在里面调用 applyBindings 时，工具栏没有出现。任何机构都可以帮助我吗？我肯定错过了一些东西，非常感谢任何帮助。

添加了 Jsfiddle

工作：http://jsfiddle.net/jogejyothish/h4Lt3/1/ 不工作：http://jsfiddle.net/jogejyothish/Se8yR/2/

乔希斯

Answer 1

CKEditor 需要一些时间来加载。

在您的第一个示例中，它在 ko 应用后加载，效果很好。

在第二个示例中，它在 ko 应用之前加载。问题是CKEditor寻找你用ko设置的contenteditable属性，所以没有创建编辑器。

您可以手动创建它：

CKEDITOR.inline(element).setData(valueUnwrapped || $element.html());

Doc

Demo

Answer 2

发生了什么是这样的：

1. 您的页面使用单个 div 加载。 KO 尚未应用于此 div。
2. document.ready() 触发。 CKEditor 脚本将 CKEditor 应用于任何匹配的 div（无）。
3. 您进行 ajax 调用。
4. Ajax 调用完成。您应用绑定。
5. KO 插入两个新的 div，它们都没有 CKEditor。

为了修复它，您需要在 ajax 成功函数中添加一些代码来手动初始化 CKEditors，例如：

        $(".editor").each(function(idx, el) {
            CKEDITOR.inline(el)
        });

在这里，在你的小提琴中工作：

http://jsfiddle.net/Se8yR/5/

你的工作版本之所以有效，是因为在document.ready中应用了绑定，所以KO及时渲染了两个div元素，CKEditor成功应用到了它们。