knockout.js - 将 NicEdit 与 Knockout 一起使用

Question

我正在寻找创建自定义 Knockout 绑定(bind)以与 WYSIWYG 编辑器 NicEdit 一起使用 http://nicedit.com/index.php .我在这里找到了一个类似 TinyMCE 库绑定(bind)的 fiddle 示例，但没有成功复制我的需要。

http://jsfiddle.net/rniemeyer/GwkRQ/

之前是否有人为此创建了一个有效的自定义绑定(bind)，或者是否有人找到了解决此问题的其他方法？当正常应用 NicEditor 的实例时，它似乎会相应地更新附加的值，但不会触发 knockout observable 更新。

例如，使用以下 javascript 和 html 不会产生有效结果。

这里是JS

var viewModel = {
    content: ko.observable("<p>I want this text to load and change in the editor</p>"),
};

ko.applyBindings(viewModel);
new nicEditor().panelInstance('testTextArea');

这里是 HTML

<form method="post" action="somepage">
    <textarea id="testTextArea" name="content" style="width:100%" data-bind="value: content"></textarea>
</form>

感谢任何见解。

Answer 1

我想出了以下似乎有效的自定义绑定(bind)。我使用了一点 JQuery，但没那么多，所以您可以随时用非 JQuery 的东西替换它。

自定义绑定(bind):

ko.bindingHandlers.nicedit = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        var area = new nicEditor({fullPanel : true}).panelInstance(element.id, {hasPanel : true});
        $(element).text(ko.utils.unwrapObservable(value)); 

        // function for updating the right element whenever something changes
        var textAreaContentElement = $($(element).prev()[0].childNodes[0]);
        var areachangefc = function() {
            value(textAreaContentElement.html());
        };

        // Make sure we update on both a text change, and when some HTML has been added/removed
        // (like for example a text being set to "bold")
        $(element).prev().keyup(areachangefc);
        $(element).prev().bind('DOMNodeInserted DOMNodeRemoved', areachangefc);
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        var textAreaContentElement = $($(element).prev()[0].childNodes[0]);
        textAreaContentElement.html(value());
    }
};

以及如何使用它:

<textarea id="area1" data-bind="nicedit: title" style="width: 640px"></textarea>

...在我的示例中，“title”当然是您的绑定(bind)属性。

有两个“限制”:

• textarea 必须有一个 DOM“id”属性，否则它会崩溃。
• 使用 IE(至少版本 8)不会触发 DOMNodeInserted 和 DOMNodeRemoved，这意味着您必须在修改文本样式后键入一些内容它会在您的可观察对象中正确更新。