Editeur web WYSIWYG

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Editeur web WYSIWYG

par Invité » 18 juil. 2006, 16:01

as-tu réussi ?

par bunk » 11 juil. 2006, 18:16

bon, la première ca aurait été pas mal, j'aurais eu l'impression d'avancer, la deuxième ca aurait été excellent, j'aurais fermé la balise img par la même ocasion.

Mais voila je ne comprend rien au javascript, pour le moment, donc je lache
merci

par bunk » 11 juil. 2006, 15:31

ok merci Ryle, je vais essayé !

par Ryle » 10 juil. 2006, 16:54

La fonction execCommand() insert le code de la commande exécutée à l'emplacement ou sur le texte sélectionné. En lui passant 'InsertImage', comme premier paramètre, cela signifie que c'est le tag d'une image qui va être utilisé.

Le deuxième paramètre correspond à l'interface utilisateur :
- si false il n'y en a pas (ici l'utilisateur doit saisir l'url de son image qui sera passée en 3ème argument).
- si true, le navigateur ouvre une fenêtre permettant de spécifier les différentes informations associées au type de commande executée (et pour une image définir tout un tas de chose, comme la largeur, la hauteur).

Du coup si l'utilisateur ne doit pouvoir saisir que l'url et le alt, il te faux spécifier que tu n'utilises pas l'interface, et créer toi même un formulaire pour récupérer ces valeurs.


A partir de là, tu as le système bidouille consistant à te dire que le 3ème argument correspond à ce qu'il y a dans src="" et donc lui passer une chaine du genre :

Code : Tout sélectionner

http://.../monImage.gif" alt="mon alt
(la première et la derniere guillemets étant ajoutées automatiquement par l'execCommand.

Soit au plus propre selon moi, générer dans une chaine le code html dont tu as besoin

Code : Tout sélectionner

var str = '<img src="'+document.fomulaire.champSrc.vlaue+'" alt="'+document.fomulaire.champAlt.vlaue+'">'
Et utiliser la commande pasteHTML() pour coller le code html à l'endroit désiré comme l'aurait fait execCommand() :)

Tout plein d'infos sur MSDN
http://msdn.microsoft.com/library/defau ... ommand.asp
http://msdn.microsoft.com/library/defau ... teHTML.asp

par bunk » 10 juil. 2006, 16:27

c'est cette fonction qui transforme la balise et dans laquelle je voudrais inserer l'argument alt=""

Code : Tout sélectionner

function insertSmiley(img) { if (img) { window.opener.document.getElementById(rte).contentWindow.focus(); window.opener.document.getElementById(rte).contentWindow.document.execCommand('InsertImage', false, img); window.close(); } }
malheuresement je nuis pas capable de modifier ce code pour arriver à mes fins.

Ryle quand tu dis qu'il faut "re"develloper une interface c'est en fait faire un texte area et quand je clique sur mon image ca m'insere la balise formatée ?

par bunk » 07 juil. 2006, 12:53

Bonjour,

je reviens à la charge avec mon conceptRTE, j'ai un peu modifié le petit popup pour inserer des smiley par exemple, sans toucher au javascript parcque jusque la personne ne m'a dit que ca ne venait pas du javascript, et donc voici le code qui est present :
<script language='JavaScript' type='text/javascript'>

var aNameValuePair = location.search.substring(1,location.search.length).split("&");
var aParam = new Array(aNameValuePair.length);
for ( var i=0; i<aNameValuePair.length; i++ ) {
   param = aNameValuePair[i].split("=");
   aParam[param[0]] = aParam[i] = { name: param[0], value: unescape(param[1].replace('+', ' ')) };
   }
   
language = aParam[0].value;
rte = aParam[1].value;    


function insertSmiley(img) {
   if (img) {
      window.opener.document.getElementById(rte).contentWindow.focus();
      window.opener.document.getElementById(rte).contentWindow.document.execCommand('InsertImage', false, img);
	  window.close();
	  }
   }

function InitArray() {
   if (document.getElementsByTagName)
	  var x = document.getElementsByTagName('TD');
   else if (document.all)
	  var x = document.all.tags('TD');
   for (var i=0;i<x.length;i++) {
	  x[i].onmouseover = over;
      x[i].onmouseout = out;
      }
   }
	
function over() {
   this.style.border='1px dotted white';
   }
	
function out() {
   this.style.border='1px solid gray';
   }

</script>
Donc en fait moi ce que je cherche à faire c'est rajouter l'attribut alt="" et si possible fermer la balise <img />, si quelqu'un pouvait m'expliquer ou me donner quelques pistes.

D'avance merci !

par bunk » 03 juil. 2006, 11:36

bonjour,

je ne trouve vraiment pas ou cela se passe. Quelqu'un pourrais t'il m'expliquer si il à compris ?

Merci

par bunk » 30 juin 2006, 09:54

le seul endroit ou j'ai trouvé la balise <img... mais sans comprendre ce qui se passait a cet endroit :

Code : Tout sélectionner

//if there is no content (other than formatting) set value to nothing if (stripHTML(oHdnMessage.value.replace("&nbsp;", " ")) == "" && oHdnMessage.value.toLowerCase().search("<hr") == -1 && oHdnMessage.value.toLowerCase().search("<img") == -1) oHdnMessage.value = "";

par bunk » 30 juin 2006, 09:37

le problème est que je n'ai pas trouvé a quel endroit le code ecrit la balise <img... je ne comprend pas vraiment ce qu'il fait !

je vais essayé de revoir ca. merci

par Ryle » 30 juin 2006, 09:28

Ce n'est pas ce qu'il y a de plus simple... de mémoire conceptRTE utilises la commande et l'interface par défaut pour insérer une image. Si tu souhaites modifier le code généré, il te faut réaliser ta propre interface pour spécifier l'adresse de l'image, largeur, hauteur, alt, etc. générer le code html pour afficher l'image (<img src="..." alt="..." ...>) et utiliser la méthode pasteHTML pour l'insérer à l'emplacement désiré...

Si tu postes du code, colle uniquement le code exécuté quand on clique sur ajouter une image et les fonctions qui sont appellées, ca sera moins volumineux à lire et à détailler que tout le fichier de crte :)

Editeur web WYSIWYG

par bunk » 30 juin 2006, 08:28

Bonjour,

J'utilise cet editeur (conceptRTE) et je rencontre un petit problème, n'etant pas expert en javascrit je n'arrive pas à rajouter quelques caractères utiles dans ce script!

A force de l'utiliser je me suis rendu compte que quand une image, un smiley etait insré la balise alt="" n'étais pas incluse dans la balise <img... je souhaiterai donc la rajouter.

Quelqu'un l'utiliserait t'il ? et si non quelqu'un pourrait il m'aider à réaliser cette modification ?

je peux coller ici toute la page *.js qui contient le javascript (si il faut)

D'avance merci