Consultez la FAQ sur le ZF avant de poster une question
Vous n'êtes pas identifié.
Pages: 1
bonjours à tous,
je suis actuellement en train de "créer" une interface d'administration, afin de pourvoir poster des news/ les supprimer/modifier.....
toute ses actions marchant, je suis passer à la présentation du texte (cad mettre mon texte en gras, italic....)donc ce qu'il y a dans mon textArea si dessous. celui ci étant dans mon formulaire "NewsForm".
pour ca, je me suis aider d'un tutorial pour la création de barre d'outils en javascript. c'est d'ailleurs pour ca que j'ésitais a poster car, "js" ce n'est pas du zend
bref.
voici donc comment j'ai procéder:
-création de mes fonctions JS dans mon fichier barreoutils.js contenue dans mon dossier public/js/
-modification de la page modifiernews.phtml (qui sois dit en passant marchais avant et marche toujours)
quel est donc le problème alors ? ba la barre d'outils (qui est bien affiché) ne fonctionne pas tout simplement alors que l'action modifiernews marche toujours et je ne vois pas pkoi >_<
contenu de mon NewsForm
$news = new Zend_Form_Element_TextArea('news');
$news->setLabel('news :')
->setRequired(true)
->addValidator('NotEmpty');
voici ce que contient mon fichier barreoutils.js :
function format(f) {
var str = document.selection.createRange().text;
document.NewsForm.news.focus();
var sel = document.selection.createRange();
sel.text = "<" + f + ">" + str + "</" + f + ">";
return;
}
function lien() {
var str = document.selection.createRange().text;
document.NewsForm.news.focus();
var lien = prompt("URL:","http://");
if (lien != null) {
var sel = document.selection.createRange();
sel.text = "<a href=\"" + lien + "\">" + str + "</a>";
}
return;
}
et voici mon modifiernews.phtml
<script language="Javascript" src="<?php echo $this->baseUrl()?>/public/js/barreoutils.js"></script>
<div id="outils">
<img class="out" src="<?php echo $this->baseUrl()?>/public/images/bold.jpg"
width="25" align="left" height="25"
onMouseOver="this.className='over';"
onMouseOut="this.className='out';"
onClick="format('b');">
<img class="out" src="<?php echo $this->baseUrl()?>/public/images/Italics.jpg"
width="25" align="left" height="25"
onMouseOver="this.className='over';"
onMouseOut="this.className='out';"
onClick="format('i');">
</div>
<?php echo $this->form; ?>
lorsque je clique sur le bouton pour mettre en gras, rien ne se passe, pareil pour le bouton italic.
si quelqu'un a des idées ou autre,je prend car je rame -_-"
Dernière modification par zantetsu (15-01-2009 09:43:39)
Hors ligne
Tiens voici le code utilisé par phpBB :
/** * Toolbar for text editor * * phpBBB and others sources... */ /** * Some browser detection */ var clientPC = navigator.userAgent.toLowerCase(); // Get client info var is_macos = navigator.appVersion.indexOf('Mac') != -1; var is_gecko = ((clientPC.indexOf('gecko')!=-1) && (clientPC.indexOf('spoofer')==-1) && (clientPC.indexOf('khtml') == -1) && (clientPC.indexOf('netscape/7.0')==-1)); var is_safari = ((clientPC.indexOf('AppleWebKit')!=-1) && (clientPC.indexOf('spoofer')==-1)); var is_khtml = (navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled )); if (clientPC.indexOf('opera')!=-1) { var is_opera = true; var is_opera_preseven = (window.opera && !document.childNodes); var is_opera_seven = (window.opera && document.childNodes); } /** * Format selection * * Apply tagOpen/tagClose to selection in textarea, use sampleText instead * of selection if there is none. Copied and adapted from phpBB * * @author phpBB development team * @author MediaWiki development team * @author Andreas Gohr <andi@splitbrain.org> * @author Jim Raynor <jim_raynor@web.de> */ function insertTags(edid,tagOpen, tagClose, sampleText) { var txtarea = document.getElementById(edid); // IE if(document.selection && !is_gecko) { var theSelection = document.selection.createRange().text; var replaced = true; if(!theSelection){ replaced = false; theSelection=sampleText; } txtarea.focus(); // This has change var text = theSelection; if(theSelection.charAt(theSelection.length - 1) == " "){// exclude ending space char, if any theSelection = theSelection.substring(0, theSelection.length - 1); r = document.selection.createRange(); r.text = tagOpen + theSelection + tagClose + " "; } else { r = document.selection.createRange(); r.text = tagOpen + theSelection + tagClose; } if(!replaced){ r.moveStart('character',-text.length-tagClose.length); r.moveEnd('character',-tagClose.length); } r.select(); // Mozilla } else if(txtarea.selectionStart || txtarea.selectionStart == '0') { replaced = false; var startPos = txtarea.selectionStart; var endPos = txtarea.selectionEnd; if(endPos - startPos){ replaced = true; } var scrollTop=txtarea.scrollTop; var myText = (txtarea.value).substring(startPos, endPos); if(!myText) { myText=sampleText;} if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " "; } else { subst = tagOpen + myText + tagClose; } txtarea.value = txtarea.value.substring(0, startPos) + subst + txtarea.value.substring(endPos, txtarea.value.length); txtarea.focus(); //set new selection if(replaced){ var cPos=startPos+(tagOpen.length+myText.length+tagClose.length); txtarea.selectionStart=cPos; txtarea.selectionEnd=cPos; }else{ txtarea.selectionStart=startPos+tagOpen.length; txtarea.selectionEnd=startPos+tagOpen.length+myText.length; } txtarea.scrollTop=scrollTop; // All others } else { var copy_alertText=alertText; var re1=new RegExp("\\$1","g"); var re2=new RegExp("\\$2","g"); copy_alertText=copy_alertText.replace(re1,sampleText); copy_alertText=copy_alertText.replace(re2,tagOpen+sampleText+tagClose); if (sampleText) { text=prompt(copy_alertText); } else { text=""; } if(!text) { text=sampleText;} text=tagOpen+text+tagClose; //append to the end txtarea.value += "\n"+text; // in Safari this causes scrolling if(!is_safari) { txtarea.focus(); } } // reposition cursor if possible if (txtarea.createTextRange){ txtarea.caretPos = document.selection.createRange().duplicate(); } } /* * Insert the given value at the current cursor position * * @see http://www.alexking.org/index.php?content=software/javascript/content.php */ function insertAtCarret(edid, value){ var oField = document.getElementById(edid); // For Internet Explorer if (document.selection) { oField.focus(); sel = document.selection.createRange(); sel.text = value; } // For Mozilla / Netscape else if (oField.selectionStart || oField.selectionStart == '0') { var startPos = oField.selectionStart; var endPos = oField.selectionEnd; var scrollTop = oField.scrollTop; oField.value = oField.value.substring(0, startPos) + value + oField.value.substring(endPos, oField.value.length); oField.focus(); var cPos=startPos+(value.length); oField.selectionStart=cPos; oField.selectionEnd=cPos; oField.scrollTop=scrollTop; } else { oField.value += "\n" + value; } // If possible, reposition cursor if (oField.createTextRange){ oField.caretPos = document.selection.createRange().duplicate(); } return; }
Utilisation :
<a href="#" onclick="insertTags('message', '[b]', '[/b]', 'Texte en gras')"><img src="..." /></a>
Tu peux essayer de t'en inspirer pour voir les problèmes que tu pourras rencontrer selon les navigateurs et ça répondra très certainement à ton souci
Dernière modification par acharrex (09-01-2009 12:51:18)
Hors ligne
bon, ba en faite nan, marche pas....
je viens de faire un test bidon pour voir si mes fonctions js était appelé quand je cliquais sur les boutons, et apparemment non.
ma fonction :
function test(){
alert("ennemy spotted");
}
lorsque je fait apelle a celle-ci, depuis ma page ajouter, ca ne marche pas, que ce soit sous firefox ou I.E
sachant que le onMouseOver marche et idem pour le onMouseout.
<script language="Javascript" src="<?php echo $this->baseUrl()?>/public/js/barreoutils.js"></script>
<div id="outils">
<img class="out" src="<?php echo $this->baseUrl()?>/public/images/Italics.jpg"
width="25" align="left" height="25"
onMouseOver="this.className='over';"
onMouseOut="this.className='out';"
onClik="test()";">
</div>
jai donc, mis mes fonctions dans la même page que mon ajouternews.phtml (dc la page ou je fait appelle à elles; cf premier post) pour verifier qu'il n'y avais pas un problème au niveau de l'appelle, et tjrs même résultat.
ps: merci pour le code acharrex, je vais regarder ca
ps*: si quelqu'un sais pourquoi mes fonction js ne sont pas exécuter ? ca devrais débloquer le tout je pense?
edit: encore un test bidon <input type=button value="ICI" onClick="alert("enemy down");">
le boutton apparait mais l'alert ne se lance pas....
dc j'ai du rater qque chose (surement bidon aussi -_-" ) mais je vois pas quoi....
Dernière modification par zantetsu (09-01-2009 13:43:55)
Hors ligne
onclick et non onclik ?
ta fonction js est dans un fichier ?
si oui, quel est le chemin d'insertion du fichier,est-il correct ?
utilises-tu firebug ?
Dernière modification par nick (09-01-2009 14:03:01)
Hors ligne
il faut que tu mettes un return false; dans ton test bidon
Hors ligne
edit: j'ai réussi a debuger le bouton et la fonction test. (erreur de syntaxe..... et oui un vrai débutant :p )
la bonne syntaxe:
<img class="out" src="<?php echo $this->baseUrl()?>/public/images/Italics.jpg"
width="25" align="left" height="25"
onMouseOver="this.className='over';"
onMouseOut="this.className='out';"
onClick="test()";> //un " en trop...
<input type=button value="ICI" onClick="alert('enemy down')";> //mettre des ' à la place de " ds le message d'alert
maintenant que je suis sur que le scrypte js est bien appelé et que c'était moi le problème dans l'histoire, faut que je trouve ou ça bug sur mes vrais fonctions (cf plus haut) ^^"
en tout cas, déjà merci pour le tps que vous m'avez accordé...
Dernière modification par zantetsu (09-01-2009 14:58:44)
Hors ligne
pourquoi n'utilises-tu pas TinyMce ou FCKEditor ? il faut quelques secondes pour les intégrer
Hors ligne
nick a écrit:
pourquoi n'utilises-tu pas TinyMce ou FCKEditor ? il faut quelques secondes pour les intégrer
tout simplement qu'en tant que débutant, je ne les connaissais pas jusqu'à ton intervention. Je viens de regarder FCKEditor et j'ai tésté une version en ligne, c'est sympa
mais je préfère finir le miens, qui sera certes pas aussi poussé, mais suffisant je l'espère pour avoir quelque chose de convenable et surtout, ça me fera du travail et de l'apprentissage en plus, dont j'aurais besoin pour ma soutenance
je retourne à mon js
j'éditerais desque j'aurais trouver une solution. si quelqu'un trouve, je veux bien de l'aide hum ^^
Hors ligne
Moi pour ce qui est de bbcode and co, j'utilise le super jQuery Markitup
Hors ligne
me revoici, dsl j'ai eu un week end assez chargé ^^
enfin bref, je me suis donc re-pencher sur ma fonction js, et j'y ai inclu ceci pour effectuer des test:
if ( window.selection ){
alert("window.selection="+window.selection());
}
else{
if (window.getSelection){
alert("window.getSelection="+window.getSelection());
}
else{
if ( document.getSelection ){
alert("document.getSelection="+document.getSelection);
}
else{
if (document.selection){
alert("document.selection.createRange().text="+document.selection.createRange().text);
}
else{
alert("marche pas");
}
}
}
}
et cela me retourne ceci sous firefox
window.getSelection=
donc comme vous l'avez compris une chaine vide :S mais je vois pas pkoi -_-"
je viens de tester sous explorer et ca me retourne bien le texte comme ceci:
document.selection.createRange().text=bonjour
j'ai plus qu'a la peaufiner et faire les autres
bref, j'arrête de vous embêter avec mon js qui s'éloigne de plus en plus de zf ^^"
Hors ligne
Mouais... J'insiste sur le fait que de très bonne barre d'outils existe déjà et leur efficacité est prouvé...
http://fr.wikipedia.org/wiki/Réinventer_la_roue_carrée
Hors ligne
Mr.MoOx a écrit:
Mouais... J'insiste sur le fait que de très bonne barre d'outils existe déjà et leur efficacité est prouvé...
http://fr.wikipedia.org/wiki/Réinventer_la_roue_carrée
c'est pas faux
je vais suivre vos conseils et prendre une barre d'outils déjà existante car bien complète (mais ca m'aura permit d'approfondir le peu de connaissance que j'avais en js )
je me penche sur la barre de fckeditor, apparemment d'après la doc aucune installation préalable n'est nécessaire ("the editor doesn't need any kind of installation on your compute").
donc, je ne vois pas comment faire pour la faire apparaitre et l'utiliser dans mon formulaire "newsForm" que j'utilise pour ajouter ou modifier une news.
ps: ui, je suis un noob :p
Hors ligne
re, encore moi, comme dit, j'ai laisser tomber l'idée de départ pour installer la barre d'outils fckeditor dans mon form.
apres avoir trifouiller un peu partout, la barre d'outils apparait mais le problème c'est que elle ne prend pas mon $news = new Zend_Form_Element_TextArea('news')
mais un autre qui est crée par fckeditor....comment faire pour que la barre d'outils s'applique a mon texte area.... :S
je suis dessus depuis ce matin, et je ne trouve tjrs pas.... -_-"
edit: jai finis par trouvé tt seul -_-" avec du mal mais bon, le résultat est la
voila ce que j'ai fait, je sais pas si c'est la bonne méthode, mais c'en est une.
dans ma vue ou je fait apparaitre mon form je met ce code et zend se débrouille tt seul
<script type="text/javascript" src="http://localhost/..../fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor1 = new FCKeditor( 'news' ) ;
oFCKeditor1.BasePath = "http://localhost/..../fckeditor/" ;
oFCKeditor1.ReplaceTextarea() ;
} </script>
// le news ds " new FCKeditor( 'news' ) ; " correspond au nom de votre Zend_Form_Element_TextArea('news')
//le fckeditor est a la racine de mon projet.
//je crois avoir modifier 2-3ligne ds fckeditor_php5 qui est ciblé par le fckeditor_php
enfin bref, j'espère que ca servira aux autre "débutant" comme moi
et rien ne vaut la doc officiel et aussi savoir la lire sans se tromper de page xD
Dernière modification par zantetsu (16-01-2009 14:39:55)
Hors ligne
Pages: 1