Javascript 如何在TinyMce的ko.bindingHandler中传递事件

如何从ko.binding中调用viewModel中的函数

我想点击一个可编辑的区域，同时在一个选择框中显示所选文本

我还遇到了一些其他问题：

在用户从“选择”中选择之前，全文不会显示在

在全文内联编辑器中编辑文本会导致大纲编辑器崩溃

编辑标题会导致可观察对象包含编辑标题的所有HTML代码

在绑定中：“tinymceInstance.remove（）”返回错误消息。然而，注释它会导致所需的高亮显示功能，但无法访问内联编辑器

高亮显示不会按需要进行

以下是html：

<select size="2" style="width: 170px;" data-bind="options: Textbatches, optionsCaption: 'Choose...', optionsText: 'TextbatchTitle', value: SelectedText, click: $root.showIt2Me"></select> 

<div>
    <fieldset>
    <legend>Textbatches:<img id="btnMetatoggle" class="ui-icon ui-icon-arrow-4-diag" style="display: inline-block" /></legend>
    <div id="details" class="textbatchdetails" data-bind="with: SelectedText">
        <div class="editor" data-bind="tinymce: TextbatchText, tinymceOptions: { selector: 'div.editor', inline: false }"></div>
    </div>
    </fieldset>
</div>

<div id="full-text">
   <fieldset>
    <legend >Full text:</legend>
    <div>                    
    <!-- ko with: $root.SelectedText -->             
    <!-- ko foreach: $root.Textbatches() -->
        <div data-bind="attr: {'id': 'Text' + TextbatchId}, event:{ click: $root.clickedThis }, css: { 'inverted-text': TextbatchId === $root.SelectedText().TextbatchId}">
           <h2 class="editableArea" data-bind="tinymce: TextbatchTitle, tinymceOptions: { selector: 'h2.editableArea', inline: true }"></h2>
           <div class="editableArea" data-bind="tinymce: TextbatchText, tinymceOptions: { selector: 'div.editableArea', inline: true }"></div>
       </div>
    <!-- /ko -->
    <!-- /ko -->
    </div>
    </fieldset>
 </div>

文本批次：
全文:

参见小提琴：

非常感谢您的帮助。

---

先走一步

绑定处理程序的参数不正确。您误用了其中一个参数，这可能会导致后续问题。对于

init（）

和

update（）

，参数为：

元素

valueAccessor

所有绑定

viewModel

bindingContext

由于您最终需要对视图模型的引用，因此不需要使用绑定上下文，您可以在第四个参数中直接引用视图模型

function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    ...
    viewModel.someFunction(someArgs); // call directly on the view model
}

至于你的其他问题，我对tiny mce了解不多，但你所做的一些假设是无效的。元素上没有

id

，因此它在处理程序中总是未定义的。在元素上初始化tiny mce后，将分配id。但是，由于您只需要访问对实例的引用，所以只需要使用元素本身，而不是id

ko.utils.domNodeDisposal.addDisposeCallback(element, function (element) {
    var tinymceInstance = $(element).tinymce(); // get the instance
    if (tinymceInstance) {
        tinymceInstance.remove();
    }
});

---

谢谢，杰夫！它看起来很结实。但是，将此解决方案引入我的开发环境（DNN7）时，会导致意外的NS\u错误。奇怪的是，每当我进入编辑器时，它都会出现。卸下tinymceInstance.remove（）-这行代码在一段时间内似乎没有问题，直到出现“太多递归”错误（大约是我第十次点击编辑器）。