【问题标题】：Meteor contentEditable field not working流星内容可编辑字段不起作用
【发布时间】：2014-05-20 17:48:57
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript html meteor

【解决方案1】：

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

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

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

【讨论】：

差不多就是这样。将 contenteditable 编辑器对象初始化放置在 Template.parentTemplate.rendered 块中而不是 Template.childTemplate.rendered 块中解决了这个问题，但有一个有趣的警告。我已经有一个用于父模板的 .rendered 块，但是将对象 init 添加到该块会导致相同的故障结果。但是添加第二个 Template.parentTemplate.rendered 并将对象 init 粘贴在其中会导致它工作。哦，好吧。
在使用 .defer() 或为同一模板制作多个独立的 .rendered() 时，我也发现了类似流星的奇怪“时间旅行”功能会导致不同的行为。最终尽可能多地删除客户端代码以避免这些问题。

【解决方案2】：

您通过 Template.myTemplate.rendered 提供的回调只被调用一次。我认为随着 Meteor 更新到 0.8 版，这种情况发生了变化。

文档是这样说的：

此回调在 Template.myTemplate 的实例时调用一次被渲染到 DOM 节点中，并首先放入文档中时间。

因此，问题中发布的 Matt M 版本对我来说开箱即用。

【讨论】：