关闭内容可编辑区域的反应性 (Meteor)答案

【问题标题】：Turning off reactivity for contenteditable areas (Meteor)关闭内容可编辑区域的反应性 (Meteor)
【发布时间】：2016-08-04 22:34:26
【问题描述】：

我知道您可以在获取集合时使用 reactive: false 关闭反应性。如何在内容可编辑区域内的集合字段中完成相同的操作？示例：

Template.documentPage.events({
  'input .document-input': (function(e) {
    e.preventDefault();

    content = $(e.target).html();
    Documents.update(this._id, {
      $set: {
        content: content
      }
    });
   }
});

<template name="documentPage">
  <div class='document-input' contenteditable='true'>{{{content}}}</div>
</template>

【问题讨论】：

有趣。自从 Blaze 出现以来，反应性通常适用于所有类型的输入元素，所以我想它也应该适用于 contenteditable。如果不是，那么它可能是可以在流星代码库中轻松修复的东西。
@apendua Blaze 复制 contenteditable 区域中的内容：github.com/meteor/meteor/issues/1964

标签： meteor

【解决方案1】：

转向例如的反应性助手或其他反应函数用 Tracker.nonreactive(fn) 包装你的函数。见：http://docs.meteor.com/#/full/tracker_nonreactive

【讨论】：

没用。我在contenteditable 助手中做了类似Tracker.nonreadtive(function(){ return @content }); 的操作，而Meteor 抛出了一个关闭的Websocket 错误。
你能分享更多代码吗？不看全貌很难帮你

【解决方案2】：

您可以将反应数据设置为属性并将其移动到 onRendered 中的 html

<template name="documentPage">
  <div class='document-input' contenteditable='true' data-content='{{content}}'></div>
</template>

Template.documentPage.onRendered(function () {
  var doc = this.find(".document-input");
  doc.innerHTML = doc.dataset.content;
});

这样，data-content 属性将在输入时由 blaze 更新，而不是元素的文本。

安全注意事项：我将模板更改为使用{{content}} 而不是{{{content}}}，因此它可以被流星转义，但使用了doc.innerHTML，因此元素中的内容将“未转义” .每当您从用户输入呈现 html 时，都应确保对其进行清理，以免在您的站点中打开 xss 漏洞。

替代方法是使用像 https://github.com/UziTech/jquery.toTextarea.js 这样的库将 div 的可编辑内容更改为文本，并使用 doc.textContent 代替 doc.innerHTML 来消除 xss 的任何机会

【讨论】：