我是流星新手。我有一个流星应用程序，现在有两个引导列;每个人都拥有一张“卡片”列表，而左列中的卡片与显示在右列上的卡片具有父亲关系。点击左侧的一张卡片，将该父装载的子卡片点击到右侧列中。流星contentEditable field not working

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

template.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"); 
};

template.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>

来源

2013-12-23 Matt M

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

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

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

来源

2013-12-24 03:19:03 emgee

这是非常多的。将可用编辑器对象初始化置于Template.parentTemplate.rendered模块内而不是Template.childTemplate.rendered模块解决了该问题，但有一个有趣的注意事项。我已经有了父模板的渲染块，但是将对象init添加到该块中导致相同的毛病结果。但添加第二个Template.parentTemplate.rendered并在该目录中粘贴对象init会导致它工作。好吧。 –

当使用.defer（）时，或者在为同一个模板创建多个独立的.rendered（）时会导致不同的行为，我在流星中发现了类似函数的奇怪“时间旅行”。最终删除尽可能多的客户端代码，以避免这些问题。 – DeBraid

您通过Template.myTemplate.rendered提供的回调仅调用一次。我认为这会随着Meteor更新版本更改为0.8。

这是个什么文件说：有一次，当Template.myTemplate 的实例渲染成DOM节点，放入文件的第一次

此回调被调用。

因此，马特M的版本发布在问题中为我开箱即用。

来源

2014-05-20 09:48:57 cutemachine

流星contentEditable field not working

template.js

template.html

回答

相关问题