wysihtml5 и нокаут дают пустой iframe

Question

При реализации wysihtml5 и нокаут с использованием Nicholas Jackson's bindingHandler. Такие работы, css все еще немного грязные, но ничего не могу исправить.

Html из текстового поля:

<!-- ko 'if': choice()=='0' --> 
<p>Please define your alternative benchmark:</p> 
<textarea id="test" data-bind="wysihtml5: alternative" placeholder="Enter text ..."></textarea> 
    <!-- /ko --> 

У меня есть проблема в том, что IFrame визуализируется, но я не могу ввести в поле больше, нет текстовое поле, ничего там:

HTML, этот фрейм , оказываемые плагины (с помощью инструментов разработчика Chrome):

<ul id="test-wysihtml5-toolbar" class="wysihtml5-toolbar" style=""> 
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-font"></i>&nbsp; 

<span class="current-font">Normal text 
</span>&nbsp;<b class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="div" href="javascript:;" unselectable="on">Normal text</a></li> 
<li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" href="javascript:;" unselectable="on">Heading 1</a></li> 
<li><a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" href="javascript:;" unselectable="on">Heading 2</a></li> 
</ul></li> 
<li> 

<div class="btn-group"><a class="btn" data-wysihtml5-command="bold" title="CTRL+B" href="javascript:;" unselectable="on">Bold</a><a class="btn" data-wysihtml5-command="italic" title="CTRL+I" href="javascript:;" unselectable="on">Italic</a> 
</div></li> 
<li> 

<div class="btn-group"><a class="btn" data-wysihtml5-command="insertUnorderedList" title="Unordered List" href="javascript:;" unselectable="on"><i class="icon-list"></i></a><a class="btn" data-wysihtml5-command="insertOrderedList" title="Ordered List" href="javascript:;" unselectable="on"><i class="icon-th-list"></i></a><a class="btn" data-wysihtml5-command="Outdent" title="Outdent" href="javascript:;" unselectable="on"><i class="icon-indent-right"></i></a><a class="btn" data-wysihtml5-command="Indent" title="Indent" href="javascript:;" unselectable="on"><i class="icon-indent-left"></i></a> 
</div></li> 
<li> 

<div class="bootstrap-wysihtml5-insert-link-modal modal hide fade"> 

<div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Insert Link</h3> 
</div> 

<div class="modal-body"> 
<input value="http://" class="bootstrap-wysihtml5-insert-link-url input-xlarge"> 
</div> 

<div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">Cancel</a><a href="#" class="btn btn-primary" data-dismiss="modal">Insert link</a> 
</div> 
</div><a class="btn" data-wysihtml5-command="createLink" title="Link" href="javascript:;" unselectable="on"><i class="icon-share"></i></a></li> 
<li> 

<div class="bootstrap-wysihtml5-insert-image-modal modal hide fade"> 

<div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>Insert Image</h3> 
</div> 

<div class="modal-body"> 
<input value="http://" class="bootstrap-wysihtml5-insert-image-url input-xlarge"> 
</div> 

<div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">Cancel</a><a href="#" class="btn btn-primary" data-dismiss="modal">Insert image</a> 
</div> 
</div><a class="btn" data-wysihtml5-command="insertImage" title="Insert image" href="javascript:;" unselectable="on"><i class="icon-picture"></i></a></li> 
</ul> 
<textarea id="test" data-bind="wysihtml5: alternative" style="display: none;" placeholder="Enter text ...">sdf 
</textarea> 
<input type="hidden" name="_wysihtml5_mode" value="1"><iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="background-color: rgb(255, 255, 255); border-collapse: separate; border: 1px solid rgb(226, 226, 226); /* clear: none; */ /* display: inline-block; */ /* float: none; */ margin: 16px; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; padding: 5px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: 99999; vertical-align: top; text-align: justify; box-sizing: border-box; -webkit-box-shadow: none; box-shadow: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; width: 80%; height: auto;"></iframe> 

скриптов, которые визуализируются являются:

Answer 1

Если вы ищете простую интеграцию WYSIWYG редактора с нокаутом, я могу вам посоветовать следующие библиотеки:

ckeditor: При установке этого зверя убедитесь, что вы добавили все в одну и ту же папку и ссылаетесь на ckeditor.js (у него есть собственный скрипт-загрузчик)

Пользовательские Нокаут bindingHandler:

/* 
Usage: <textarea data-bind="inlineCkeditor: observable"></textarea> 
*/ 

(function (ko, CKEDITOR) { 
    ko.bindingHandlers.inlineCkeditor = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      element.editor = CKEDITOR.inline(element); 

      element.editor.on('blur', function() { 
       valueAccessor()(element.editor.getData()); 
      }); 

      //handle destroying 
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
       if (element.editor) 
        element.editor.destroy(true); 
      }); 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      //handle programmatic updates to the observable 
      var value = ko.utils.unwrapObservable(valueAccessor()), 
       existingEditor = element.editor; 

      if (existingEditor) { 
       if (value !== existingEditor.getData()) { 
        existingEditor.setData(value); 
       } 
      } 

     } 
    }; 

})(ko, CKEDITOR); 

И все, что должно дать вам это: