淘汰赛结合和CK编辑器工具栏没有出现

我完全陌生的敲除自定义绑定，我想的CKEditor与基因敲除招标整合，我有以下的结合从谷歌搜索得到的，淘汰赛结合和CK编辑器工具栏没有出现

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>

的宾迪ng在我的$ .getJSON方法之外调用ko.applyBindings时会工作并显示工具栏。但是当我在里面调用applyBindings时，工具栏不会出现。任何机构能帮助我吗？我一定错过了一些东西，对此非常感激。

的jsfiddle新增

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

Jyothish

来源

2014-07-25 Jyothish

发生了什么事是这样的：

你的页面加载跟单格。 KO尚未被应用于这个div。
document.ready（）触发。 CKEditor脚本将CKEditor应用于任何匹配的div（none）。
你让你的ajax电话。
Ajax调用完成。你应用绑定。
KO插入两个新的div，这两个都没有CKEditor。

为了解决这个问题，你需要添加AJAX成功函数内部一些代码来手动初始化CKEditors，如：

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

这是在你的提琴工作：

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

您的工作版本工作的原因是因为绑定应用于document.ready，所以KO及时呈现了两个div元素，并且CKEditor已成功应用于它们。

来源

2014-07-25 13:41:32 sifriday

Thnaks很多sifriday，真的节省了我的时间，并感谢一步一步的细节， – Jyothish

的CKEditor需要一些时间来加载。

在你的第一个例子中，它适用于ko之后，它工作正常。

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

您可以手动创建它：

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

Doc

Demo

来源

2014-07-25 13:34:38

淘汰赛结合和CK编辑器工具栏没有出现

回答

相关问题