Bonsoir !!
Je fais l'intégration de l'éditeur de texte TinyMCE et je me retrouve confronté à deux problèmes que je n'arrive pas à résoudre...
Je fais référence au tutoriel du Jour 2 de la série développer un site avec CakePhp2.
J'utilise la dernière version de tinyMCE qui est la 3.4.7 et le dernier bootstrap from twitter (v.1.4.0).
Le premier n'est que d'ordre visuel mais mes textareas sur lesquels vient s'appliquer TinyMCE perdent leur propriétés CSS (notamment celle du margin-left) ce qui à le colle au label. De même, les petits arrondis des input du bootstrap from twitter disparaissent pour redevenir des angles droits contrairement à la video du tuto ou grafikart ne semble pas être confronté à ce problème.
J'ai bien tenté de re-modifier le css du bootstrap et même d'aller trifouiller dans les css de tiny mais sans aucun succès... Quelqu'un pourrait me dire si cela vient des versions ? Ou s'il y a un changement à faire quelque part et si oui à quel endroit ??
Le second problème correspond à l'application du css dans le textarea pour appliqué le wysiwyg... Je n'arrive aucunement à charger le css dans le <head> et n'ai donc aucune action css possible dans mes textarea. :(
voici mon code,
Admin_edit.ctp
<div class="page-header">
<h1>Edition de la page</h1>
</div>
<?php echo $this->Form->create('Post'); ?>
<?php echo $this->Form->input('name', array('label'=>'Titre')); ?>
<?php echo $this->Form->input('slug', array('label'=>'URL')); ?>
<?php echo $this->Form->input('id', array('label'=>'ID du Post')); ?>
<?php echo $this->Form->input('type', array('value'=>'page', 'type'=>'hidden')); ?>
<?php //echo $this->Form->input('author_id', array('label'=>'ID de l\'auteur')); ?>
<?php echo $this->Form->input('content', array('label'=>'Contenu')); ?>
<?php echo $this->Form->input('online', array('label'=>'En ligne ?')); ?>
<?php echo $this->Form->end('Envoyer'); ?>
<?php
// Récupération de l'url correspondant au post (post_id) pour l'injecter dans le bouton image de tinymce.
$media_url = $this->Html->url(array('controller'=>'medias', 'action'=>'index', $this->request->data'Post']'id']));
// Variable du css
$media_css = $this->Html->url('/css/wysiwyg.css');
?>
<?php echo $this->Html->script('tiny_mce/tiny_mce.js', array('inline'=>false)); ?>
<?php echo $this->Html->scriptStart(array('inline'=>false)); ?>
tinyMCE.init({
// Initialisation et indication sur quoi est appliqué l'éditeur
mode : 'textareas',
theme : 'advanced',
// Chargement des plugins utilisés
plugins : 'inlinepopups, paste, table, image',
// Gestion de l'apparence et des options disponible
theme_advanced_buttons1 : 'bold,italic,underline,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,image,|,formatselect,code',
theme_advanced_buttons2 : 'tablecontrols',
theme_advanced_buttons3 : '',
theme_advanced_buttons4 : '',
theme_advanced_toolbar_location: 'top',
theme_advanced_statusbar_location : 'bottom',
theme_advanced_resizing : true,
// Gestion des actions de copie coller dans le tinyMCE
paste_remove_styles : true,
paste_remove_spans : true,
paste_strip_class_attributes : 'all',
// Gestion des medias
relative_urls : false,
image_explorer : '<?php echo $media_url; ?>',
content_css : '<?php echo $media_css; ?>'
});
// Fonction permettant d'ajouter du contenu directement dans le textarea depuis la popin d'insertion de media
function send_to_editor(content){
var ed = tinyMCE.activeEditor;
ed.execCommand('mceInsertContent',false, content);
}
<?php echo $this->Html->scriptEnd(); ?>Merci par avance ! :)
10 réponses
Quand tu appelles tes files css appelle d'abord tiny et ensuite TON css. Comme ça celui-ci 'écrasera' celui de tiny.
euuuh je crois que je n'ai pas compris... Je ne comprends pas ce que tu entends par appeler mon css après ?
J'ai tenté de faire ça :
// Gestion des medias
relative_urls : false,
image_explorer : '<?php echo $media_url; ?>',
content_css : '<?php echo $this->Html->url('/css/wysiwyg.css'); ?>'mais sans succès... Avec cette formule, je respecte à la lettre près le tuto de jonathan sans que le css soit appelé tout court dans la page...
Je n'ai toujours pas réussi à faire fonctionner correctement le css au sein de l'éditeur//textareas... En regardant ce qu'il se passait comme css sur l'image, il y a en réalité du css venant du fichier wysiwyg.css mais en surnombre (4 classes alignLeft par exemple et la dernière finit par mettre un float : right sans aucune raison) et avec à chaque fois des paramètre différents s'annulant etc. Je ne pige vraiment pas !! :(
Salut tu as essayé de reprendre le tutoriel de grafikart à ce sujet, tu détecteras sans doute mieux ton erreur ?
Oui, je l'ai déjà repris plusieurs fois sur cette partie (sans trouver mon erreur). Je ne l'ai par contre pas repris de fond en comble ayant décider d'avancer sur l'ensemble du site, quitte à reprendre totalement cette partie là à la fin.
Je n'ai pas contre pas exactement compris ce que voulait dire Hotgeart... et il ne répond plus :(
oui en fait quand tu déclares tes fichiers CSS dans ton header, il est toujours préférables de tout d'abord déclarer le fichiers css de tinyMCE en premier suivi par la suite de ton fichier CSS wysings.css, comme cela les modifications que tu apportes dans ton fichiers sont prises en compte.
Bon je crois que je vais reprendre la vidéo depuis le début, j'ai l'impression d'avoir zappé une étape sur ces histoires de déclaration de css... Je ne mets pas le sujet en résolu pour le moment, je reprends la vidéo et je remonterai ou pas le topic au besoin.
merci des tes réponses lepetitnico ! :)
si ça peut t'aider, j'ai utilisé ça pour aligner le textarea :
*suppression du margin-left mais je met un margin-right au label
form .input {
label {
margin-right:20px;
}
//input, textarea {
//margin-left: 20px;
//}
}