javascript - meteor 内容可编辑字段不起作用

Question

我是 Meteor 的新手。我现在有一个带有两个引导列的 meteor 应用程序；每个都有一个“卡片”列表，左栏中的卡片与右栏中出现的卡片有父关系。单击左侧的一张卡片，该父卡片的子卡片会加载到右侧的列中。

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

模板.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

在使用不同的 contenteditable 编辑器库之前，我遇到了类似的问题。所以这可能会或可能不会帮助你。

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

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