Javascript 剔除绑定和CK编辑器工具栏未出现
我是全新的敲出定制绑定,我正在尝试将ckeditor与敲出竞价相结合,我从谷歌搜索中获得了以下绑定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
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
工作:
不工作:
JyothishCKEditor需要一些时间来加载 在第一个示例中,它在ko应用后加载,这很好 在第二个示例中,它在应用ko之前加载。问题是CKEditor查找您用ko设置的
contenteditable
属性,因此不会创建编辑器
您可以使用以下工具手动创建它:
CKEDITOR.inline(element).setData(valueUnwrapped || $element.html());
发生的事情是:
$(".editor").each(function(idx, el) {
CKEDITOR.inline(el)
});
在这里,用你的小提琴演奏:
您的工作版本之所以能够工作,是因为绑定应用于document.ready中,所以KO及时呈现了两个div元素,并且成功地将CKEditor应用于它们。Thnak了很多sifriday,真的节省了我的时间,感谢逐步提供的详细信息,