Étiquette : WYSIWYG

Ajouter plusieurs éditeurs visuels

Fred,

WordPress utilise l’éditeur TinyMce pour l’édition des articles et pages, et parfois ont aurai bien besoin d’un éditeur supplémentaire pour faire différents blocs par exemple.

Pour ajouter plusieurs éditeurs visuels dans vos pages et articles ouvrez votre fichier function.php et a jouté le code suivant :

define('WYSIWYG_META_BOX_ID', 'my-editor');
define('WYSIWYG_EDITOR_ID', 'myeditor'); //Important pour le CSS sois différent
define('WYSIWYG_META_KEY', 'extra-content');
 
add_action('admin_init', 'wysiwyg_register_meta_box');
function wysiwyg_register_meta_box(){
        add_meta_box(WYSIWYG_META_BOX_ID, __('WYSIWYG Meta Box', 'wysiwyg'), 'wysiwyg_render_meta_box', 'post');
}
 
function wysiwyg_render_meta_box(){
	
        global $post;
        
        $meta_box_id = WYSIWYG_META_BOX_ID;
        $editor_id = WYSIWYG_EDITOR_ID;
        
        //Add CSS & jQuery original WYSIWYG
        echo "
                <style type='text/css'>
                        #$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
                        #$editor_id{width:100%;}
                        #$meta_box_id #editorcontainer{background:#fff !important;}
                        #$meta_box_id #$editor_id_fullscreen{display:none;}
                </style>
            
                <script type='text/javascript'>
                        jQuery(function($){
                                $('#$meta_box_id #editor-toolbar > a').click(function(){
                                        $('#$meta_box_id #editor-toolbar > a').removeClass('active');
                                        $(this).addClass('active');
                                });
                                
                                if($('#$meta_box_id #edButtonPreview').hasClass('active')){
                                        $('#$meta_box_id #ed_toolbar').hide();
                                }
                                
                                $('#$meta_box_id #edButtonPreview').click(function(){
                                        $('#$meta_box_id #ed_toolbar').hide();
                                });
                                
                                $('#$meta_box_id #edButtonHTML').click(function(){
                                        $('#$meta_box_id #ed_toolbar').show();
                                });
 
				//Tell the uploader to insert content into the correct WYSIWYG editor
				$('#media-buttons a').bind('click', function(){
					var customEditor = $(this).parents('#$meta_box_id');
					if(customEditor.length > 0){
						edCanvas = document.getElementById('$editor_id');
					}
					else{
						edCanvas = document.getElementById('content');
					}
				});
                        });
                </script>
        ";
        
        //Create The Editor
        $content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
        the_editor($content, $editor_id);
        
        //Clear The Room!
        echo "<div style='clear:both; display:block;'></div>";
}
 
add_action('save_post', 'wysiwyg_save_meta');
function wysiwyg_save_meta(){
	
        $editor_id = WYSIWYG_EDITOR_ID;
        $meta_key = WYSIWYG_META_KEY;
	
        if(isset($_REQUEST[$editor_id]))
                update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);
                
}

 

 

Puis éditer votre fichier single.php ou page.php et ajouter le code suivant qui va afficher le contenu du second éditeur.

<?php echo get_post_meta($post->ID, WYSIWYG_META_KEY, true);?>

 

Activer des boutons supplémentaires dans l’éditeur visuel de WordPress

Fred,

 

Cette fonction va permettre d’afficher des boutons en plus dans l’éditeur visuel de WordPress qui ne sont pas activer par défaut.


Trait horizontal, indice, exposant, famille des polices, taille de la police, styles css.


 

Insérer  le code ci-dessous dans le fichier function.php de votre thème pour activer les boutons :

// activation des bouttons
function add_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'del';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");
//fin

 

Ici les class css par défaut dans WordPress à ajouter dans le fichier style.css de votre thème et dans editor-style.css pour avoir un aperçu dans l’éditeur visuel.

Vous pouvez modifier les class pour l’adapter a votre thème.

 

/* wp-caption--- Surligne le texte */
.wp-caption {
	margin-top: 0.4em;
}
.wp-caption {
	background: #eee;
	margin-bottom: 1.625em;
	max-width: 96%;
	padding: 9px;
}

/* wp-caption-dd --- Surligne le texte avec une police plus petite */
.wp-caption-dd {
background: #eee;
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0;
}

/* wp-caption-text --- Affiche le texte avec une police plus petite et un espacement de ligne */
.wp-caption-text {
	line-height: 1.5;
	font-size: 10px;
	margin: 0;
	}

/* Alignement */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*wp-smiley*/
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
/*wp-oembed --- Pour mettre en forme les videos */
.wp-oembed {
background:#000;
padding:15px;
}

.size-full{
/* ici vous pouvez définir une mise en forme */
}

 

wpGallery = ajoute la class wpGallery par défaut dans wordpress a une image