2016-12-22 11 views
1

私はユーザーがYouTubeビデオを投稿できるようにするWYSIWYGエディタ(Tinymce)を持っています。ユーザー入力にクラスを接続する適切な方法

動画コンテンツを反応的にするには、ユーザーがYouTubeリンクをエディタに貼り付けるときに挿入される 「iframe」タグの周りにクラス「ビデオコンテナ」を付けます。そうでない場合、動画はエディタコンテナから取り出されます。

「setInterval」を使用してiframeタグが挿入され、その親に「video-container」クラスがある場合は、それを添付してください。

これは良い方法ですか?よりよい方法があるかどうかを知りたいのですが、単純なCSSでこれを行うことはできますか?ところで

、私はVuejsとjQuery here.Whenを使用していた文書は準備ができて私は

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) 

答えて

2

この機能を実行する代わりに、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); 
      }); 
    } 
}); 
をtniyMCEのonChangeを使用することができます
関連する問題