web-dev-qa-db-fra.com

L'éditeur TinyMCE casse mon beau HTML

Ceci est à peu près une copie exacte de: Comment faire en sorte que Wordpress et TinyMCE acceptent les balises <a> encapsulant les éléments de niveau bloc comme cela est autorisé dans HTML5? et problème HTML5, WordPress et Tiny MCE - envelopper la balise d'ancrage autour des résultats div en une sortie géniale

Mon problème est que la solution suggérée (filtre tiny_mce_before_init) ne semble pas résoudre mon problème. J'ai du HTML qui ressemble à ceci:

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

Le est parfaitement légal en HTML5. Cependant, l'éditeur WP ne l'aime pas et le transforme en:

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

Ceci, bien sûr, casse ma mise en page. Est-ce que quelqu'un connaît un moyen de prévenir ce comportement? Je ne peux pas abandonner le composant Visual de l'éditeur et m'en tenir au texte brut. Toutes les suggestions sont les bienvenues.

Soyons clairs: quand j’utilise le code ci-dessous ( suggéré ici ), les balises <p> peuvent rester à l’intérieur des ancres mais de nombreux espaces supplémentaires sont ajoutés, ainsi qu’une entité &nbsp; qui se multiplie chaque fois que vous passez Mode visuel et texte.

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
tinymcevisual-editorhtml5
9
Dominic P

Indépendamment de ce que vous avez configuré en tant qu’enfants valides, Wordpress gère les balises p ainsi que les sauts de ligne d’une manière tout à fait unique. Vous remarquerez probablement éventuellement, si vous ne l’avez pas déjà fait, que lorsque vous passez de l’éditeur de texte à l’éditeur visuel et inversement, vos balises <p> sont supprimées, comme pour l’interface frontale. Pour empêcher cela, vous pouvez attribuer une classe personnalisée aux balises <p>.

<p class="text">This p tag won't get removed"</p>.

Bien que ↑, ceci ↑ empêchera votre balise p de disparaître, cela ne résoudra pas le problème, car votre balisage sur le front-end sera tout de même foutu. Vous pouvez DÉSACTIVER wpautop. Si vous faites cela et avez p inclus dans les enfants valides, ceci FIXERA VOTRE PROBLEME.

OPTION 1: désactiver l'activation automatique et définir les enfants valides

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Je devrais toutefois vous prévenir que dès que vous basculez du HTMLeditor à TinyMCE, votre code HTML sera détruit. Une solution de contournement consiste à désactiver TinyMCEpour certains types de publication, comme dans option 2 ci-dessous.

OPTION 2: Désactiver Auto P, TinyMCE et définir les enfants valides

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

Pour la plupart des gens cependant ↑ ceci ↑ n'est pas une option.

Alors, quelles sont les autres options? Une solution de contournement que j'ai remarquée consiste à utiliser une balise span avec une classe) et à vous assurer que il n'y a pas d'espace blanc entre vos balises html. Si vous le faites Vous pouvez utiliser l'option 1 ci-dessus et éviter de désactiver TinyMCE dans son ensemble. N'oubliez pas que vous devrez également ajouter des CSS à votre feuille de style pour afficher correctement la plage.

OPTION 3: Option 1 + balises Span stylisées

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

CSS dans Stylesheet

.noautop {
    display: block;
}

Option 4: Utiliser le shortcode intégré de téléchargement de média

shortcode media uploader

J'ai initialement oublié celui-ci, mais le shortcode [caption] ressemblera à ceci:

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption
[/caption]

La sortie ressemblera à ceci:

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

Si vous ne voulez pas de tags de figures, vous pouvez utiliser un plugin comme custom content shortcode qui vous permet de le faire:

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

Pourquoi l'éditeur ne fonctionne-t-il pas comme je le souhaite?

J'ai passé d'innombrables heures à essayer de bien faire fonctionner cela au cours des deux dernières années. Parfois, je trouve une solution qui fonctionne parfaitement, mais Wordpress envoie alors une mise à jour qui gâche encore tout. La seule solution que j'ai jamais trouvée pour fonctionner complètement comme il se doit, me conduit à la meilleure réponse que j'ai.

Option 5: annotation conservée de l'éditeur HTML plus

Alors gardez-vous le mal de tête et allez-y avec ça. Par défaut, Conserve HTML Editor Markup Plusn'affecte que les nouvelles pages. Si vous souhaitez modifier des pages déjà créées, vous devez vous rendre à l'adresse www.example.com/wp-admin/options-writing.php. et modifiez les paramètres du plug-in. Vous pourrez également modifier le comportement de nouvelle ligne par défaut.

Remarque: si vous décidez de l'utiliser, assurez-vous de vérifier le fil d'assistance lors du lancement d'une nouvelle mise à jour de wordpress. Parfois, une modification perturbera le contenu. Il est donc préférable de s'assurer que le plug-in fonctionne avec les versions les plus récentes.

Crédit supplémentaire: déboguer votre problème/modifier d'autres options Tinymce

Si vous voulez inspecter facilement éditervos configurations TINYMCE manuellement, comme vous le faites avec les filtres, vous pouvez installer advanced tinymce config . Il vous permet d'afficher TOUS des options TINYMCE configurées. et les éditer depuis une simple interface.Vous pouvez également ajouter de nouvelles options, comme vous le feriez avec les filtres, ce qui rend les choses beaucoup plus faciles à comprendre.

Par exemple, j'ai à la fois cela et préservé HTML Editor Markup Plus. La capture d'écran ci-dessous est celle de la page d'administration de Advanced Tinymce Config. Bien que la capture d'écran supprime 90% de ce qui s'y trouve réellement, vous pouvez voir qu'il indique les enfants valides disponibles pour l'édition et ceux que vous avez Conservés dans l'éditeur de balisage HTML ajouté.

tinymce editor

C'est un moyen extrêmement utile non seulement de personnaliser complètement votre éditeur, mais également de voir ce qui se passe. Vous pourrez peut-être même déterminer la cause de votre problème à ce moment-là. Après avoir examiné les paramètres moi-même lorsque l'option Préservation de l'éditeur HTML préservé a été activée, j'ai découvert certaines options supplémentaires pouvant être ajoutées à un filtre personnalisé.

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

Malheureusement, cette méthode n'a pas fonctionné. Il y a probablement des expressions régulières ou javascript lors de la mise à jour de la publication et/ou du basculement entre éditeurs. Si vous examinez le code source de Preserved HTML Editor, vous constaterez qu'il fonctionne en mode javascript côté administrateur. Mon dernier conseil serait donc de vérifier comment fonctionne le plug-in si vous souhaitez ajouter cette fonctionnalité. dans ton thème.

Quoi qu'il en soit, désolé pour ceux qui ont été aussi loin dans ma réponse. Je pensais que je partagerais mes propres expériences avec l'éditeur Wordpress, afin que les autres n'aient pas à passer des heures à essayer de comprendre cela comme je l'ai fait!

16
Bryan Willis