I am new to CKEditor. I just change my page which is currently using jquery and knockoutjs to display CKEditor in place of the text area. It works. However, the knockoutjs data binding does not work, i.e. the text in CKEditor does not get updated to the viewModel.
Any ideas how to make this work? Thanks.
Any ideas how to make this work? Thanks.
Re: Not working with knockoutjs
Re: Not working with knockoutjs
Here's my bindingHandler for
Here's my bindingHandler for CKEditor with Knockout.
ko.bindingHandlers.richText = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var txtBoxID = $(element).attr("id");
var options = allBindingsAccessor().richTextOptions || {};
options.toolbar_Full = [
['Source', '-', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor', '-', 'Bold', 'Italic', 'Underline', 'SpellChecker'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'],
['Link', 'Unlink', 'Image', 'Table']
]
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
if (CKEDITOR.instances[txtBoxID]) { CKEDITOR.remove(CKEDITOR.instances[txtBoxID]); };
});
$(element).ckeditor(options);
//wire up the blur event to ensure our observable is properly updated
CKEDITOR.instances[txtBoxID].focusManager.blur = function () {
var observable = valueAccessor();
observable($(element).val());
};
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var val = ko.utils.unwrapObservable(valueAccessor());
$(element).val(val);
}
}
A typical use then would be in the HTML:
<textarea id="txt_viewModelVariableName" data-bind="richText: viewModelVariableName"></textarea>
Hi, Sorry to bother but for
Hi, Sorry to bother but for some reason it's not working.
Do you have a version in jsfiddle?
Thanks
J.