WordPress : ajouter des événements dans l’iframe TinyMCE

J’ai ajouté des styles d’emballage div à WordPress, mais lorsque je les utilise dans la page, il est impossible d’ajouter du contenu en dessous d’eux dans la page. CSS:after fonctionne à l’intérieur des divs pour créer une zone sélectionnable, mais cela ne fonctionne pas pour créer une zone sélectionnable après la div.

Dans mon functions.php j’ai :

  function my_mce_before_init( $settings ) {
    $style_formats = array(
        array(
            'title' => 'Box Two Columns',
            'block' => 'div',
            'classes' => 'twocolbox',
            'wrapper' => true
        ),
        array(
            'title' => 'Image with Caption',
            'block' => 'div',
            'classes' => 'img_caption',
            'wrapper' => true
        ),
        array(
            'title' => 'Gallery Horizontal',
            'block' => 'div',
            'classes' => 'scroller horizontal',
            'wrapper' => true
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;

}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
add_editor_style();

Existe-t-il un moyen d’utiliser execCommand ici pour ajouter du code HTML après les styles div que j’ai définis? Ajouter ensuite quelque chose comme une balise de paragraphe vide avec un flotteur clair ?

J’ai essayé:

tinyMCE.execCommand('mceInsertContent',false,'Hello world!!');"

L’éditeur MCE se casse alors.

… J’ai essayé ceci mais c’est trop bogué : Dans editor-styles.css :

#tinyMCE:after {
 content: "    ";
 clear:both;
 width: 4em; height:4em;
}

Notez que vous devrez peut-être vider le cache ET le bouton shift-reload pour voir les modifications apportées à editor-styles.css dans WordPress.

…

Je travaille toujours là-dessus. Trouvé un fil: Pour accéder aux éléments iframe minuscules via jquery

J’ai essayé d’ajouter le code de ce fil à my_mce_before_init, mais il s’est juste cassé.

…. J’ai également essayé de charger un script jQuery, mais les chemins cibles ne fonctionneraient pas sur l’iframe TinyMCE. Aucun de ces sélecteurs ne fonctionne :

jQuery(document).ready(function($) {

    $("#tinyMCE").find("div").after('<p style="width:100%; clear:both; height:1em;">&nbsp; 6789</p>');
     $("div").css("color","red");

    $("#content_ifr").contents().find("div").after('<p style="width:100%; clear:both; height:1em;">&nbsp; 6789</p>');
    $("#content_ifr").contents().find("#tinymce p").css("color","red");

    $("#wp-content-editor-container").find("textarea").css("color","red");
    $("iframe").contents().find("p").css("color","red");

    $('#content_ifr').load(function(){
        $('#content_ifr').contents().find('p').css("color","red");
    });
 });

Solution n°1 trouvée

Vous pouvez ajouter des pseudo-éléments html à l’aide de l’option de configuration tinymce content_css. Là, vous pouvez définir après les éléments. Essaie!

Mise à jour:

Lors de l’initialisation de tinymce, définissez le paramètre de configuration sur ce qui suit (à l’intérieur de tinyMCE.init({...})

...
theme: "advanced",   // example param
setup : function(ed) {
    ed.onInit.add(function(ed, evt) {
        $("#content_ifr").contents().find("p").css("color","red");

        // other approach
        //$(ed.getBody()).find('p').css("color","red");
    });
},
cleanup: true,      // example param
...