如何: redactor.js Knockout.js活页夹
如何: redactor.js Knockout.js活页夹
提问于 2013-02-08 05:59:54
我正在使用这个很棒的编辑器，但我不知道如何将内容绑定到knockout：
http://imperavi.com/redactor/
回答 3
Stack Overflow用户
发布于 2013-12-18 08:23:15
下面是一个双向绑定处理程序，它可以完成这项工作。与通常的处理程序一样，update函数将更改从VM传递到UI元素( Redactor元素)，然后init将更改从Redactor传递回VM。
当我发布这篇文章时，它是为Redactor 9准备的，现在我已经为Redactor 10更新了它。
ko.bindingHandlers.redactor = {
init: function(element, valueAccessor) {
var value = valueAccessor();
// We only want Redactor to notify our value of changes if the value
// is an observable (rather than a string, say).
if (ko.isObservable(value)) {
$(element).redactor({
changeCallback: value
});
}
},
update: function(element, valueAccessor) {
// New value, note that Redactor expects the argument passed to 'set'
// to have toString method, which is why we disjoin with ''.
var value = ko.utils.unwrapObservable(valueAccessor()) || '';
// We only call 'set' if the content has changed, as we only need to
// to do so then, and 'set' also resets the cursor position, which
// we don't want happening all the time.
// This code would work with Redactor 9, but no longer works with Redactor 10
//if (value !== $(element).redactor('get')) {
// $(element).redactor('set', value);
//}
// The API method has become 'code.get', and it behaves a bit differently: it
// returns formatted HTML, i.e. with whitespace and EOLs. That means that we
// would update the Redactor content every time the observable changed, which
// was bad. So instead we can use this:
if (value !== $(element).redactor('core.getTextarea').val()) {
$(element).redactor('code.set', value );
}
}
}如果要使用Redactor编辑的内容的KO可观察值为content，则可以执行以下操作：
<textarea data-bind="redactor: content"></textarea>要让上面的代码在Redactor 10上运行，您必须做一些更改。首先，您必须使用'code.set‘和'code.get’来与HTML交互，而不是简单地使用'set‘和'get’。但是如果你只这样做，你会发现'code.get‘返回的超文本标记语言
Stack Overflow用户
发布于 2013-09-21 19:16:46
我不知道它是正确的还是错误的，但这段代码对我来说是有效的：
正在创建新的绑定处理程序：
ko.bindingHandlers.imperavi =
{
init: function(element, valueAccessor, allBindings)
{
var startValue = allBindings().value();
var $el = $(element);
$el.val(startValue).change();
$el.redactor({
changeCallback: function(html)
{
$el.val(html).change();
}
});
}
};在HTML中：
<textarea data-bind="value: Text, imperavi: true"></textarea>ViewModel：
var VM = function()
{
this.Text = ko.observable('<p>Hello world</p>');
};
var vm = new VM();
ko.applyBindings(vm);Stack Overflow用户
发布于 2015-12-08 02:37:55
我已经更新了dvijaz的Redactor 10版本，以支持新的Redactor 2版本(感谢dvijaz!)：
ko.bindingHandlers.redactor = {
init: function(element, valueAccessor) {
var value = valueAccessor();
// We only want Redactor to notify our value of changes if the value
// is an observable (rather than a string, say).
if (ko.isObservable(value)) {
$(element).redactor({ callbacks: { change: value } });
}
},
update: function(element, valueAccessor) {
// New value, note that Redactor expects the argument passed to 'set'
// to have toString method, which is why we disjoin with ''.
var value = ko.utils.unwrapObservable(valueAccessor()) || '';
// We only call 'set' if the content has changed, as we only need to
// to do so then, and 'set' also resets the cursor position, which
// we don't want happening all the time.
// This code would work with Redactor 9, but no longer works with Redactor 10
//if (value !== $(element).redactor('get')) {
// $(element).redactor('set', value);
//}
// The API method has become 'code.get', and it behaves a bit differently: it
// returns formatted HTML, i.e. with whitespace and EOLs. That means that we
// would update the Redactor content every time the observable changed, which
// was bad. So instead we can use this:
if (value !== $(element).redactor('core.textarea').val()) {
$(element).redactor('code.set', value);
}}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14761822
复制相关文章
相似问题
腾讯云开发者
