Salta al contenuto principale
Working from scratch, following simplicity

Drupal 7.x: tag iframe nell'editor TinyMCE

TinyMCE è un fantastico editor HTML disponibile anche per Drupal 7.x, ma non digerisce i tag iframe o più semplicemente tutti quegli elementi che si usano per inserire video, mappe o pagine esterne nei propri articoli. Per fortuna il modulo WYSIWYG IFrames risolve completamente il problema e con una piccola aggiunta supporta anche la modalità allowfullscreen dei video di Youtube. A seguire uno screencast che ne descrive  l'installazione ed il funzionamento.

Scrivendo il mio ultimo articolo sono stato alquanto scocciato dalla solita procedura che adotto per inserire i tag iframe con Drupal. Di solito scrivo gli articoli usando il formato di testo Full HTML (che si avvale di TinyMCE1 3.3.9.4 come editor predefinito) e solo alla fine lo cambio in PHP code per aggiungere gli eventuali iframe, una volta salvato resterà così per sempre! Se in futuro provo a cambiare ancora formato, l'elemento scompare. Riassumendo la mia procedura è alquanto sgradevole per tre ragioni:

  • ogni tanto mi dimentico di questo aspetto e mi ritrovo l'articolo privo di elementi essenziali;
  • mi piace usare un editor HTML perché mi semplifica la scrittura, dandomi al tempo stesso molte funzionalità interessanti;
  • editare un articolo in modalità PHP Code (per aggiungere cose nuove o sistemare qualche mio errore) richiede più tempo soprattutto se il nodo originale è stato scritto prima in Full HTML (TinyMCE elimina tutti gli spazi bianchi e le tabulazioni).

Iframe tags in TinyMCE editor and Drupal 7.x

Perché si utilizzano gli iframe?

Per curiostià ho fatto qualche ricerca in Internet e ho trovato molte discussioni riguardo all'utilizzo di questo tag, il tutto condito da commenti di totale disprezzo verso il povero elemento iframe. Ci sono comunque buone ragioni per averci a che fare, come l'inserimento di pagine esterne nel proprio sito. Ne riporto solo alcuni esempi significativi:

Nel mio articolo Rilievo del traffico con jQuery Mobile ho usato per esempio una pagina html esterna racchiusa in una finestra per mostrare la mia webapp, mettendo il codice seguente:

<iframe src="../../sites/default/files/webapp/Traffic_Surveys/Traffic_Surveys.html" width="400" height="320" frameborder="1" scrolling="auto"></iframe>

Idem quando ho inserito una mia presentazione su Slideshare:

<iframe src="http://www.slideshare.net/slideshow/embed_code/46422192?startSlide=1" width="510" height="420" frameborder="0" scrolling="no"> </iframe>

O una mappa ArcGIS:

<iframe src="http://arcg.is/1GU022r" width="900" height="600" frameborder="0" scrolling="no"> </iframe>

O piuttosto un video YouTtube:

<iframe width="420" height="315" src="https://www.youtube.com/embed/2fs-Mchr5Vk" frameborder="0" allowfullscreen></iframe>

In effetti TinyMCE offre i  media plugins che permettono di risolvere il problema dei video FLASH e introducono una comoda interfaccia per il loro inserimento (si vedano le immagini più sotto). Ma funziona solo con i video e se si guarda il sorgente HTML, si ottiene il seguente codice:

<object width="420" height="305" data="https://youtu.be/2fs-Mchr5Vk" type="application/x-shockwave-flash"><param name="src" value="https://youtu.be/2fs-Mchr5Vk" /></object>
  • How to enable the media plugins (in /admin/config/content/wysiwyg/profile/full_html/edit)

    Come abilitare i media plugins

  • How the media plugins work

    Come funzionano

  • The advanced panel of media plugins

    Il pannello avanzato

 

La soluzione: il modulo WYSIWYG IFrames

Come visto sopra ci sono diversi tipi di contenuti esterni che si possono incorporare nei propri pezzi su Drupal e grazie a questo articolo: Drupal - add iframe in tinymce editor, ho scoperto l'esistenza del modulo WYSIWYG IFrames, che permette di aggiungere questi tag direttamente nell'editor (incollandoli nell'HTML Source Editor, dopo averlo opportunamente abilitato nel menu di configurazione presente nei profili Wysiwyg). A riguardo ho realizzato un semplice screencast, nel quale è possibile vederne l'installazione, la configurazione e come funziona. Sicuramente è un video inutile per un utente navigato di Drupal, ma l'ho anche creato per provare a testare i software per lo screencast presenti in Ubuntu (conoscenza che potrebbe tornarmi utile in futuro).


Il mio video su YouTube

 

Un trucco per abilitare l'attributo allowfullscreen

Il modulo precedentemente installato non supporta a sua volta l'attributo allowfullscreen, così l'unico modo per avere la possibilità di mostrare a tutto schermo i video di YouTube dal proprio sito è quello di editare il file ../sites/all/modules/wysiwyg-iframes/wysiwyg_iframe.module cambiando l'originale:

[...]
array('iframe[src|width|height|frameborder|scrolling]'),
[...]

In:

[...]
array('iframe[src|width|height|frameborder|scrolling|allowfullscreen]'),
[...]

E quando si incorpora l'iframe lo si modifica da così:

<iframe width="560" height="315" src="https://www.youtube.com/embed/0dg1IDTXY_E" frameborder="0" allowfullscreen></iframe>

A così:

<iframe width="560" height="315" src="https://www.youtube.com/embed/0dg1IDTXY_E" frameborder="0" allowfullscreen="1"></iframe>

È l'unico modo che ho trovato per fargli digerire l'attributo fullscreen, se non si aggiungesse un valore qualsiasi scomparirebbe del tutto.

 

E per il momento è tutto!

  • 1TinyMCE è un editor HTML rilasciato sotto licenza LGPL, indipendente dalla piattaforma web scelta.

Aggiungi un commento

Il contenuto di questo campo è privato e non verrà mostrato pubblicamente.

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web ed indirizzi e-mail diventano automaticamente dei link.
  • Linee e paragrafi vanno a capo automaticamente.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Sponsored Links
Pubblicità

Nicola Rainiero

Ingegnere civile specializzato in geotecnica con l'ambizione di facilitare la propria attività lavorativa usando e creando software libero per un sapere condiviso e collettivo. Mi occupo anche di energie rinnovabili ed in particolare di geotermia a bassa entalpia. Sono da sempre appassionato di web design e modellazione 3D.