Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/78.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 剔除绑定和CK编辑器工具栏未出现_Javascript_Jquery_Knockout.js_Ckeditor - Fatal编程技术网

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

Javascript 剔除绑定和CK编辑器工具栏未出现,javascript,jquery,knockout.js,ckeditor,Javascript,Jquery,Knockout.js,Ckeditor,我是全新的敲出定制绑定,我正在尝试将ckeditor与敲出竞价相结合,我从谷歌搜索中获得了以下绑定 ko.bindingHandlers.wysiwyg = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { var value = valueAccessor(); var valueUnwrapped = ko.unwrap

我是全新的敲出定制绑定,我正在尝试将ckeditor与敲出竞价相结合,我从谷歌搜索中获得了以下绑定

    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

工作: 不工作:


Jyothish

CKEditor需要一些时间来加载

在第一个示例中,它在ko应用后加载,这很好

在第二个示例中,它在应用ko之前加载。问题是CKEditor查找您用ko设置的
contenteditable
属性,因此不会创建编辑器

您可以使用以下工具手动创建它:

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


发生的事情是:

  • 使用单个div.KO加载的页面尚未应用于此div
  • document.ready()激发。CKEditor脚本将CKEditor应用于任何匹配的div(无)
  • 您可以进行ajax调用
  • Ajax调用完成。应用绑定
  • KO插入两个新div,两个div都没有CKEditor
  • 为了修复它,您需要在ajax成功函数中添加一些代码来手动初始化CKeditor,如:

            $(".editor").each(function(idx, el) {
                CKEDITOR.inline(el)
            });
    
    在这里,用你的小提琴演奏:


    您的工作版本之所以能够工作,是因为绑定应用于document.ready中,所以KO及时呈现了两个div元素,并且成功地将CKEditor应用于它们。

    Thnak了很多sifriday,真的节省了我的时间,感谢逐步提供的详细信息,