将NicEdit与Knockout结合使用

我正在创建一个定制的Knockout绑定，以便与所见即所得编辑器NicEdit http://nicedit.com/index.php一起使用。我发现了一个类似于TinyMCE库的类似绑定的小例子，但在我的需求中没有成功复制。将NicEdit与Knockout结合使用

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

有没有人创造了一个工作在此之前自定义绑定，或有没有人找到任何其他工作围绕这个？当正常应用NicEditor的实例时，它似乎会相应地更新附件的值，但不触发可观察的更新。

作为一个例子，使用下面的javascript和html不会产生有效的结果。这里

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');

JS这里

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

感谢任何见解HTML。

来源

2013-04-02 derickt

正如你所说，创建一个自定义绑定是要走的路。分享当你试图创建自定义绑定的NicEditor版本创建的代码，我们可以帮助你找出它为什么不工作。 – CodeThug

我想出了以下自定义绑定似乎工作。我使用了一些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>

...这里在我的例子 “标题” 是你的课程绑定属性。

有两个 “限制”：

文本区域必须有一个DOM “id” 属性，否则它崩溃。
使用IE（至少版本8）时，DOMNodeInserted和DOMNodeRemoved未被触发，这意味着您必须在修改文本样式以便在可观察对象中正确更新后输入内容。

来源

2013-04-18 14:21:23 Jalayn

除了提到的限制之外，这很有用。可能会尝试扩展它以将配置作为另一个绑定来允许更多的灵活性。 – derickt

这种近乎完美的作品，但由于某种原因，文本光标一直跳到编辑器的启动：我已经添加了的jsfiddle/ –

显示此问题：http://jsfiddle.net/swkbt68h/1/ –

将NicEdit与Knockout结合使用

回答

相关问题