Как загрузить видео Vimeo с помощью плагина Media (а не HTML)

Question

Я работаю над Ruby on Rails 2.3.8 и последней версией плагина rails tinyMCE.

Я бы хотел, чтобы пользователи имели возможность добавлять все виды видео в текстовый редактор.Сейчас они могут добавлять видео с YouTube, а также загружать их со своего компьютера.

Проблема в том, что видео Vimeo не только создают общий код HTML <object>, но и iframe для них, и если я попытаюсь импортировать один из них с помощью плагина Media, мне нужно будет вставить это видео, например: http://vimeo.com/16430948,, и он сгенерирует следующий HTML (который не будет работать):

<object width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="http://vimeo.com/16430948" name="src"><embed width="100" height="100" type="application/x-shockwave-flash" src="http://vimeo.com/16430948">
</object>

В то время как для просмотра видео Vimeo требуется следующий HTML-код:

<p><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/16430948" width="400"></iframe></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="100" width="100">
<param name="src" value="http://vimeo.com/16430948" /><embed src="http://vimeo.com/16430948" width="100" height="100" type="application/x-shockwave-flash"></embed>
</object>

Теперь, В чем разница между этими двумя сгенерированными HTML?iframe отсутствует в первом опубликованном мной коде, поэтому он не работает.

Итак, вопрос: как мне добавить этот iframe к программируемости tinyMCEто есть он автоматически добавляется при вставке видео Vimeo?

Answer 1

Ну, вы должны написать свой собственный плагин (это довольно просто) , чтобы проверить изменения, сделанные пользователем. Когда пользователь вводит ссылку vimeo, вы просто берете соответствующий контент из редактора и помещаете его в новый элемент (iframe).

Ваш код должен выглядеть примерно так (вам придется изменить его, но я уверен, что вы получите правильное направление):

// you may choose an other event to check for
ed.onChange.add(function(ed){

  var body = ed.getBody();

  // check for vimeo using jquery object
  $(body).find('param').each(function(index, Element){
    // vimeo adress is found in value
    if (this.value.search('http://vimeo.com') == -1) return;
    var node = this;
    var iframe_not_parent = 1;    
    while(node.nodeName !== 'body'){
      node = node.parentNode;
      if (node.nodeName !== 'iframe'){
        iframe_not_parent = 0; 
        break;
      }
    }

    // ok, this vimeo thing is not inside an iframe - put it inside
    if (iframe_not_parent){

        with(document.getElementById(iframe_id).contentWindow){         
          var new_iframe = document.createElement("iframe");
          this.parentNode.parentNode.append(new_iframe);
          new_iframe.append(this.parentNode);
        }
    }
  });
});