Zend FR

Consultez la FAQ sur le ZF avant de poster une question

Vous n'êtes pas identifié.

#1 09-01-2009 11:45:54

zantetsu
Membre
Date d'inscription: 05-01-2009
Messages: 15

[zend_form] ? barre d'outils zend / js --> FCKeditor

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 smile

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

 

#2 09-01-2009 12:49:28

acharrex
Membre
Lieu: Suisse
Date d'inscription: 27-04-2008
Messages: 135

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

Tiens voici le code utilisé par phpBB :

Code:

/**
 * 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 :

Code:

<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 wink

Dernière modification par acharrex (09-01-2009 12:51:18)

Hors ligne

 

#3 09-01-2009 13:25:35

zantetsu
Membre
Date d'inscription: 05-01-2009
Messages: 15

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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 wink
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

 

#4 09-01-2009 14:00:19

nick
Membre
Date d'inscription: 31-05-2008
Messages: 84

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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

 

#5 09-01-2009 14:03:59

nick
Membre
Date d'inscription: 31-05-2008
Messages: 84

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

il faut que tu mettes un return false; dans ton test bidon

Hors ligne

 

#6 09-01-2009 14:22:12

zantetsu
Membre
Date d'inscription: 05-01-2009
Messages: 15

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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

 

#7 09-01-2009 15:07:56

nick
Membre
Date d'inscription: 31-05-2008
Messages: 84

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

pourquoi n'utilises-tu pas TinyMce ou FCKEditor ? il faut quelques secondes pour les intégrer

Hors ligne

 

#8 09-01-2009 15:32:54

zantetsu
Membre
Date d'inscription: 05-01-2009
Messages: 15

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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 smile

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 smile

je retourne à mon js smile

j'éditerais desque j'aurais trouver une solution. si quelqu'un trouve, je veux bien de l'aide hum ^^

Hors ligne

 

#9 12-01-2009 09:59:40

Mr.MoOx
Administrateur
Lieu: Toulouse
Date d'inscription: 27-03-2007
Messages: 1444
Site web

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

Moi pour ce qui est de bbcode and co, j'utilise le super jQuery Markitup

Hors ligne

 

#10 13-01-2009 11:46:06

zantetsu
Membre
Date d'inscription: 05-01-2009
Messages: 15

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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 smile

bref, j'arrête de vous embêter avec mon js qui s'éloigne de plus en plus de zf ^^"

Hors ligne

 

#11 13-01-2009 11:54:44

Mr.MoOx
Administrateur
Lieu: Toulouse
Date d'inscription: 27-03-2007
Messages: 1444
Site web

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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

 

#12 13-01-2009 13:37:51

zantetsu
Membre
Date d'inscription: 05-01-2009
Messages: 15

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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 wink

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 smile  )

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

 

#13 14-01-2009 11:57:57

zantetsu
Membre
Date d'inscription: 05-01-2009
Messages: 15

Re: [zend_form] ? barre d'outils zend / js --> FCKeditor

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 smile

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 smile

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

 

Pied de page des forums

Propulsé par PunBB
© Copyright 2002–2005 Rickard Andersson
Traduction par punbb.fr

Graphisme réalisé par l'agence Rodolphe Eveilleau
Développement par Kitpages