Nicholas Jackson の bindingHandlerを使用してwysihtml5とノックアウトを実装する場合。この種の作品、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がレンダリングされているが、フィールドに入力できなくなっていることです.textareaがなく、そこには何もありません:
プラグインによってレンダリングされるこの 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>
<span class="current-font">Normal text
</span> <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>
レンダリングされるスクリプトは次のとおりです。
