Spraw, aby WordPress WYSIWYG nie usuwał ramek iframe

16

Mam blog, z którego często muszę wstawiać elementy iframe do postów z różnych powodów (nie pytaj, dlaczego mi zaufaj!)

Kiedy używam widoku „wizualnego” do edycji moich postów, WYSIWYG stale usuwa moje iframe ...

Wiem, że mogę zachować ramki iframe w poście, jeśli użyję widoku „html” i wyświetlę / zapisz tylko w widoku „html” ... ale naprawdę chciałbym móc używać normalnego WYSIWYG do edycji mojego postu bez konieczności uciekania się do widoku „HTML”.

Czy mogę coś zrobić, aby wyłączyć to zachowanie? Widziałem ten post , który sugeruje edytowanie wp-includes/js/tinymce/tiny_mce_config.php, ale naprawdę wolałbym unikać takich działań, które prawdopodobnie po prostu przerwałyby aktualizację!

wysiwyg iframe Justin Jenkins
źródło
Wpis, do którego prowadzisz link, ma także rozwiązanie do edycji filtrów, które nie jest edytowane przez Otto. Próbowałeś tego?
Rarst
Aby wyjaśnić trochę więcej, wolałbym nie hackować PHP, aby to zrobić (prawdopodobnie zapomnę, zaktualizuję i zepsuję rzeczy) ... jeśli jest to kwestia ustawień (nawet jeśli jest w PHP) lub coś, co mogę zrobić, powiedząc, owijając trochę kodu wokół mojego iframe, który też by działał. W tym momencie prawdopodobnie użyję do tego jakiegoś javascript, ale wydaje się to bałagan.
Justin Jenkins,
1
Nie ma w tym opcji konfiguracyjnej i nie ma możliwości, aby kodować go w edytorze (byłaby to dziura w zabezpieczeniach, gdyby istniało obejście). Umieszczenie wspomnianego kodu we wtyczce jest najlepszym sposobem, aby to zrobić, a także przetrwa aktualizacje (wtyczki nie są usuwane podczas aktualizacji).
Jan Fabry
@Jan, Trzymając nadzieję, że jest ktoś, kto wie coś, czego nie wiemy ... Jeśli nie, dziękuję. Wydaje się dziwne, że jest to dziura tylko w części wizualnej, a nie HTML? Rozumiem, że łatwiej jest wsunąć rzeczy pod ludzkie nosy w trybie wizualnym ... Ale nadal.
Justin Jenkins
iframessą przydatne do osadzania filmów. <object>Metoda opiera się na pamięci flash, natomiast <iframe>metoda, której większość witryn do udostępniania wideo obsługują te dni, pozwala na HTML5 video.
TRiG

Odpowiedzi:

9

Jeśli nie chcesz pisać własnego kodu, istnieje wtyczka umożliwiająca osadzanie <iframe>:

Następnie po prostu użyj takiego kodu :

[iframe http://example.com 400 500]
Ethan Seifert
źródło
@Ethan Seifert - Ładna odpowiedź!
MikeSchinkel
To naprawdę dotyczy mojego pytania, nie wymaga „hakowania”. Wciąż musisz korzystać z widoku HTML ... Dzięki.
Justin Jenkins
Wtyczka w tej odpowiedzi nie jest już aktualna, ale ta wygląda dobrze: wordpress.org/plugins/iframe
Tim Malone
23

Możesz dostosować filtr TinyMCE, zobacz poniższy przykład <iframe>s i innych tagów, aby korzystać z Google Maps w TinyMCE.

function fb_change_mce_options( $initArray ) {

    // Comma separated string od extendes tags.
    // Command separated string of extended elements.
    $ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $ext = ',' . $ext;
    }
    $initArray['extended_valid_elements'] = $ext;

    // Maybe, set tiny parameter verify_html
    //$initArray['verify_html'] = false;

    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );

Dodaj to do niestandardowej wtyczki lub functions.php motywu. Możesz również przeczytać więcej informacji w moim poście: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

bueltge
źródło
@bueltge - Ładna odpowiedź. Byłem właśnie na twojej stronie, czytając dzisiaj ten post. Wiesz, większość przykładów w Internecie dla TinyMCE nie jest w kontekście WordPress, a gdy w kontekście WordPress jest znacznie bardziej skomplikowana. Dobrze to rozumiesz. O TinyMCE możesz napisać o wiele więcej; czy zastanawiałeś się nad zrobieniem na nim serii postów na blogu?
MikeSchinkel
moim największym problemem jest czas; ale mam inny post o tym temacie w moich szkicach i może opublikuję go w ciągu najbliższych tygodni. Dzięki za hołd.
bueltge
1

Musiałem uaktualnić do Wordpress 3.2.1, a następnie zainstalowałem Embed Iframe i działało to świetnie.

Tagi iframe nie były już usuwane podczas przełączania z HTML do Visual na WordPressie.

WordpressDude
źródło
1

W środowisku wielostanowiskowym każdy użytkownik inny niż superadmin otrzymuje filtrowanie HTML (ponieważ potencjalne luki w zabezpieczeniach ). Na tej podstawie możesz dodać opcję Dodaj unfiltered_html do edytorów.

/**
 * Enable unfiltered_html capability for Editors.
 *
 * @param  array  $caps    The user's capabilities.
 * @param  string $cap     Capability name.
 * @param  int    $user_id The user ID.
 * @return array  $caps    The user's capabilities, with 'unfiltered_html' potentially added.
 */
function km_add_unfiltered_html_capability_to_editors( $caps, $cap, $user_id ) {
    if ( 'unfiltered_html' === $cap && user_can( $user_id, 'editor' ) ) {
        $caps = array( 'unfiltered_html' );
    }
    return $caps;
}
add_filter( 'map_meta_cap', 'km_add_unfiltered_html_capability_to_editors', 1, 3 );
doker
źródło
0

Jeśli nie lubisz używać dodatkowej wtyczki do rozwiązania shortcode, możesz dodać coś wzdłuż tych linii do swojego motywu, wtyczki lub funkcji. Php, aby dodać ją ręcznie. W razie potrzeby może być konieczne dodanie kilku kluczy do tablicy kluczy.

add_shortcode( 'iframe' , 'mycustom_shortcode_iframe' );
function mycustom_shortcode_iframe($args, $content) {
    $keys = array("src", "width", "height", "scrolling", "marginwidth", "marginheight", "frameborder");
    $arguments = mycustom_extract_shortcode_arguments($args, $keys);
    return '<iframe ' . $arguments . '></iframe>';
}

function mycustom_extract_shortcode_arguments($args, $keys) {
    $result = "";
    foreach ($keys as $key) {
        if (isset($args[$key])) {
            $result .= $key . '="' . $args[$key] . '" ';
        }
    }
    return $result;
}

Następnie na stronie postu użycie będzie wyglądać tak:

[iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=New+York+City,+New+York,+USA&amp;aq=0&amp;oq=new+york&amp;sll=51.238455,6.81435&amp;sspn=0.373151,1.056747&amp;ie=UTF8&amp;hq=&amp;hnear=New+York+City,+New+York,+Vereinigte+Staaten&amp;t=m&amp;z=11&amp;iwloc=A&amp;output=embed"]
SunnyRed
źródło
to nie działa. po prostu umieszcza iframe jako tę samą treść
Ankit Agrawal
Nie wiem, co chcesz, aby kod działał, ale umieszczanie elementu iframe w treści w takiej postaci, w jakiej go napisałeś, jest tym, co powinien zrobić kod. Jeśli więc element iframe pojawi się w widoku interfejsu użytkownika, wszystko działa zgodnie z oczekiwaniami.
SunnyRed
0

Przekonałem się, że użycie wtyczki Fusion Editor do budowy moich stron w Wordpress działa dobrze.

Ten film pokazuje, jak korzystać z Fusion Builder (przejdź do 4:15 w części dotyczącej dodawania kontenerów, kolorów, elementów i bloków kodu): https://www.youtube.com/watch?v=UDyNsnB_COA

Klikam, aby dodać kontener, następnie klikam dodaj element, a następnie dodaj blok kodu zamiast bloku tekstowego (blok tekstowy usunie element iframe, ale blok kodowy tego nie zrobi). W moim bloku kodu wklejam kod iframe i publikuję. Działa świetnie i nie muszę modyfikować żadnych plików PHP!

Brandon Barney
źródło