将类附加到用户输入的正确方法答案

【问题标题】：Proper way to attach class to user input将类附加到用户输入的正确方法
【发布时间】：2016-12-22 13:07:03
【问题描述】：

我有一个所见即所得的编辑器 (Tinymce)，我允许用户在其中发布 youtube 视频。

为了使视频内容具有响应性，我想在周围附加“视频容器”类当用户通过编辑器粘贴 youtube 链接时插入的“iframe”标签，否则视频会脱离编辑器容器。

我想出的唯一方法是使用“setInterval”并查找 iframe 标记是否已插入并且其父级是否具有“video-container”类，否则附加它。

这是一个好方法吗？我想知道是否有更好的方法或者我可以用简单的 css 做到这一点？

顺便说一句，我这里使用的是Vuejs和Jquery。当文档准备好时我执行这个函数

setInterval(function() {
   //this.$els.body is just to access the editor content

    var target = this.$els.body.querySelectorAll('iframe:not(#article-body_ifr)')
    for (var i = 0; i < target.length; i++) {
        if(! $(target[i]).parents().hasClass('video-container')) {
            $(target[i]).wrap("<div class='video-container'></div>")
        }
    }
  }.bind(this), 6000)

【问题讨论】：

标签： javascript jquery iframe tinymce vue.js

【解决方案1】：

您可以使用 tniyMCE onChange 代替 http://archive.tinymce.com/wiki.php/API3:event.tinymce.Editor.onChange

// Adds an observer to the onChange event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
          ed.onChange.add(function(ed, l) {
                  console.debug('Editor contents was modified. Contents: ' + l.content);
          });
   }
});

【讨论】：