删除绑定和CK编辑器工具栏不显示

Knockout binding and CK Editor toolbar not appearing

本文关键字:工具栏 显示 编辑器 CK 绑定 删除      更新时间:2023-09-26

我是全新的敲出自定义绑定,我正试图将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>

当我调用ko时,绑定工作并显示工具栏。$之外的applyBindings。getJSON方法。但当我在内部调用applyBindings时,工具栏没有出现。有人能帮我吗?我肯定是遗漏了什么,任何帮助都是非常感谢的。

Jsfiddle添加

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

Jyothish

是这样的:

  1. 您的页面加载为单个div。KO尚未应用于此div。
  2. document.ready()火灾。CKEditor脚本应用CKEditor到任何匹配的div (none)。
  3. 进行ajax调用。
  4. Ajax调用完成。
  5. KO插入了两个新的div,它们都没有CKEditor。
为了修复它,您需要在ajax成功函数中添加一些代码来手动初始化ckeditor,如:
        $(".editor").each(function(idx, el) {
            CKEDITOR.inline(el)
        });

在这里,在你的小提琴上工作:

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

你的工作版本工作的原因是因为绑定应用在文档中。ready,因此KO及时呈现两个div元素,并且CKEditor成功应用于它们。

CKEditor需要一些时间来加载。

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

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

可以手动创建:

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

医生