3

我希望创建一个自定义的 Knockout 绑定，以便与 WYSIWYG 编辑器 NicEdit http://nicedit.com/index.php一起使用。我在这里找到了一个类似于 TinyMCE 库的类似绑定的小提琴示例，但在复制满足我的需求方面没有任何成功。

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

之前有没有人为此创建了一个有效的自定义绑定，或者有没有人找到任何其他解决方法？当 NicEditor 的实例正常应用时，它似乎会相应地更新附加的值，但不会触发淘汰赛 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>

感谢您的任何见解。

4

1 回答 1

3

我想出了以下似乎可行的自定义绑定。我使用了一点 JQuery，但不多，所以你总是可以用非 JQuery 的东西来替换它。

自定义绑定：

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>

...在我的示例中，“标题”当然是您的绑定属性。

有两个“限制”：

  • textarea 必须有一个 DOM "id" 属性，否则它会崩溃。
  • 使用 IE（至少，版本 8）不会触发DOMNodeInsertedand DOMNodeRemoved，这意味着您必须在修改文本样式后键入一些内容才能在可观察对象中正确更新。
于 2013-04-18T14:21:23.093 回答