Question

我有一个WYSIWYG编辑器（Tinymce），我允许用户发布youtube视频。

为了使视频内容具有响应性，我想附加课程＆＃34; video-container＆＃34;周围＆＃34; iframe中＆＃34;当用户通过编辑器粘贴youtube链接时插入的标记，否则视频将从编辑器容器中删除。

我唯一想到的就是使用＆＃34; setInterval＆＃34;并查找iframe标签是否已插入且其父级是否具有＆＃34;视频容器＆＃34;上课，否则附上它。

这是一个好方法吗？我想知道是否有更好的方法，或者我可以用简单的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)

Answer 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);
          });
   }
});

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

1 个答案: