javascript - Meteor contentEditable 字段不起作用

Question

我是 Meteor 新手。我现在有一个 meteor 应用程序，有两个引导列；每个都包含一个“卡片”列表，左列中的卡片与右列中显示的卡片具有父关系。单击左侧的卡，该父级的子卡将加载到右列中。

对于右列中的卡片，我希望将其上的文本设为内容可编辑。我尝试过使用一些所见即所得的库，这样我也可以获得一些编辑功能，但它们都以同样的方式失败。您单击要编辑的文本，它会清楚地突出显示该字段，就像它可以编辑一样，但您无法输入任何内容。但是...如果您切换到另一个窗口或应用程序，然后再切换回来，现在光标会闪烁，您可以键入。相关代码如下(在本例中，我使用的是medium-editor，但正如我所说，我认为问题与此无关)。我不确定事件处理程序是否有帮助；没有它它也无法工作。

模板.js

Template.editFrame.cards = function () {
    return ExCards.find({varId: Session.get("selectedArc")}, {sort: {sortOrder: 1}});
};

Template.exCards.events({

    'click .editable': function (evt) {
        var field = $('p.editable', evt.target.parentNode);
        field.focus();
    }
});


};

Template.exCards.rendered = function () {
    var editor = new MediumEditor(".editable");
};

模板.html

<template name="editFrame">
    <div class="col-lg-10 section-exCards">
        <div class="scrollable list">
            {{#each cards}}
                {{> exCards }}
            {{/each}}
            {{#if newStoryBox }}
                {{> editStory}}
            {{/if}}
            <div class="add-button-container">
                <button class="add-button add-ex-button" id="addExCard">Add Story Item</button>
            </div>
        </div>

        {{> metadataFrame }}
    </div>
        <!--</div>-->
</template>


<template name="exCards">
    <div class="ex-card card-container item row" id="{{_id._str}}">
        <div class="item-inner">
            <div class="info col-xs-7">
                <div class="address">
                    <p class="editable" id="new_{{_id.str}}">{{name}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

Answer 1

在使用不同的内容可编辑编辑器库之前，我遇到了类似的问题。所以这可能对你有帮助，也可能没有帮助。

因此，发生的一件事是您的 Template.exCards.rendered 函数被多次调用，这意味着您创建的多个媒体编辑器可能会或可能不会导致此问题。我所做的是在创建新的 MediumEditor 之前检查编辑器变量。

您必须在全局范围内设置编辑器变量的范围，以便下次呈现时您仍然可以访问它。另外，您必须在适当的时候手动销毁编辑器。