将 NicEdit 与 Knockout 一起使用

Question

我希望创建一个自定义的 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>

感谢您提供任何见解。

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 不会被触发，这意味着您必须在修改文本样式后键入一些内容才能在您的可观察对象中正确更新。