Question

我正在寻找创建一个自定义Knockout绑定，以便与WYSIWYG编辑器NicEdit http://nicedit.com/index.php一起使用。我在TinyMCE库中找到了类似绑定的小例子，但在复制我的需求方面没有取得任何成功。

之前是否有人为此创建了有效的自定义绑定，或者是否有人为此找到了其他任何解决方法？当正常应用NicEditor的实例时，它似乎相应地更新附加的值，但不会触发敲除可观察的更新。

例如，使用以下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 here

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

感谢您的任何见解。

Answer 1

我提出了以下自定义绑定，它似乎有效。我使用了一些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>

...在我的例子中，“title”当然是你的绑定属性。

有两个“限制”：

textarea必须具有DOM“id”属性，否则会崩溃。
使用IE（至少版本8），DOMNodeInserted和DOMNodeRemoved不会被触发，这意味着您必须在修改文本样式后输入内容才能正确更新你的可观察对象。

使用NicEdit和Knockout

1 个答案: