je rencontre un soucis avec mon editeur de contenu sous firefox, en effet le paramètre contenteditable="true" n'est pas prit en compte sous mozila, j'essai de passer à ce navigateur mais il fait tout pour me renvoyer cher microsoft
merci d'avance
la communauté d'entraide francophone dédiée au PHP
Rendre un DIV editable sous mozilla Firfox
Hey 
,
On ne peut pas rendre un div éditable sous n'importe quel navigateur respectant les standards. Si tu as cette possibilité, c'est un plus du navigateur. Mais tu peux toujours bricoler avec des champs de saisies (input, textarea) et un peu de Javascript. J'avais lu un article, mais je n'arrive pas à remettre la main dessus … Si je le retrouve, je le donne.
,On ne peut pas rendre un div éditable sous n'importe quel navigateur respectant les standards. Si tu as cette possibilité, c'est un plus du navigateur. Mais tu peux toujours bricoler avec des champs de saisies (input, textarea) et un peu de Javascript. J'avais lu un article, mais je n'arrive pas à remettre la main dessus … Si je le retrouve, je le donne.
« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »
Hoa : http://hoa-project.net (sur @hoaproject).
Hoa : http://hoa-project.net (sur @hoaproject).
Mon wisiwyg marche impeccable sous IE mais sous mozilla impossible , du coup je cherche une solution pour le rendre compatible tout navigateur. 
Exemple:
Si tu retrouve ton article je suis preneur 
Exemple:
Code : Tout sélectionner
<div contenteditable="true" name="memoHtml" id="memoHtml" style="width:100%; height:400px;border:1px solid #666666;"> ici mon editeur</div>Tu es sûr de ne pas avoir un Javascript qui va détecter ton attribut contenteditable et transformer sa balise en WYSIWYG avec tout le tralala ?
« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »
Hoa : http://hoa-project.net (sur @hoaproject).
Hoa : http://hoa-project.net (sur @hoaproject).
non je ne pense pas , regarde sur quoi je me suis basé
http://www.coacoacoa.net/wysiwyg/wysiwyg.asp
j'ai juste modifié son editeur et lui est créer une fonction qui transfert les donnée du div dans un textarea, ce qui me permet de pouvoir tranferer les données à une requete php.
http://www.coacoacoa.net/wysiwyg/wysiwyg.asp
j'ai juste modifié son editeur et lui est créer une fonction qui transfert les donnée du div dans un textarea, ce qui me permet de pouvoir tranferer les données à une requete php.
Ton truc est un peu bidon on diraitComment ça marche
…
<script type="text/javascript" src="wysiwyg.js"></script>
…
Note: les exemples de cette page ne fonctionnent toujours qu'avec Microsoft Internet Explorer 5.5 minimum (sans parler du fait que je ne teste que sous IE6).
…
et pour ceux qui serait enfin prêt à migrer vers Microsoft Internet Explorer…
. Le développement ne se fait que sur Internet Explorer, il doit utiliser des spécifications Javascript d'IE.Il existe plein d'autres WYSIWYG beaucoup plus sérieux et qui ont fait leur preuve (fckeditor par exemple).
« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »
Hoa : http://hoa-project.net (sur @hoaproject).
Hoa : http://hoa-project.net (sur @hoaproject).
justement , j'ai passé des heures et des nuits à developper sur sont exemple et d'autres, passer à un autre et oublier mes travaux me déchire le ventre 
, il n'est pas le seul toturial sur le quel je me suis basé cela dit, j'en est fais beaucoup pour arriver à mes objectifs qui etait de ne pas utiliser un scripts tout fait mais mon propre travail.
, il n'est pas le seul toturial sur le quel je me suis basé cela dit, j'en est fais beaucoup pour arriver à mes objectifs qui etait de ne pas utiliser un scripts tout fait mais mon propre travail.Code : Tout sélectionner
function selOn(ctrl)
{ //mouse déjà passée
ctrl.style.borderColor = '#003399';
ctrl.style.backgroundColor = '#F3C475';
ctrl.style.cursor = 'hand';
}
function selOff(ctrl)
{
ctrl.style.borderColor = '#003399';
ctrl.style.backgroundColor = '#FFFFFF';
ctrl.style.cursor = 'hand';
}
function selUp(ctrl)
{
ctrl.style.borderColor = '#003399';
ctrl.style.backgroundColor = '#99CCFF';
ctrl.style.cursor = 'hand';
}
function selDown(ctrl)
{
ctrl.style.borderColor = '#003399';
ctrl.style.backgroundColor = '#99CCFF';
ctrl.style.cursor = 'hand';
}
function doCommand(idCommand)
{
var oSelection;// Vérifie qu'il s'agit d'une sélection de type texte
oSelection = document.selection.createRange();
if (document.selection.type == "Control")
{
if (oSelection.length != 1)
return;
var oImage = oSelection(0);
oSelection = document.body.createTextRange();
oSelection.moveToElementText(oImage);
oSelection.select();
}
// Vérifie que le texte sélectionné est modifiable
if (oSelection.parentElement().isContentEditable != true)
if (idCommand != 'copy')
return;
if (idCommand == 'createLink')// Cas où insertion d'un lien
{ doCreateLink(oSelection); return; }
if (idCommand == "insertTab")// Cas où insertion d'un tableau
{ doInsertTab(oSelection); return; }
if (idCommand == "insertMov")// Cas où insertion d'une video
{ doInsertMov(oSelection); return; }
if (idCommand == "insertImage")// Cas où insertion d'une image 2 insertTab
{ doInsertImage(oSelection); return; }
document.execCommand(idCommand);// Exécute les autres commandes telles quelles
}
function doInsertMov(oSelection)
{
// Configure la boite de dialogue
var sFeatures;
sFeatures = "dialogHeight:450px;dialogWidth:450px;help:no;scroll:yes;status:yes;edge:raised";
// Teste si création ou modification d'une image
var bIsImage = false;
var aArguments;
aArguments = new Array();
if (oSelection.parentElement().tagName == "IMG")
{
// - mémorise qu'il y a déjà une image
bIsImage = true;
// - récupère l'url, la légende et l'alignement de l'image
aArguments[0] = oSelection.parentElement().src;
aArguments[1] = oSelection.parentElement().alt;
aArguments[2] = oSelection.parentElement().align;
}
else
{
// - initialise une nouvelle image
aArguments[0] = "";
aArguments[1] = "";
aArguments[2] = "";
}
// Affiche la boite de dialogue d'insertion d'une image
var sNewImage;
sNewImage = window.showModalDialog('tolbar/insertVideo.php', aArguments, sFeatures);
// Rien à faire si clic sur le bouton [Annuler]
if (sNewImage == "~")
return;
// Cas où pas d'image sélectionnée
if (sNewImage == "")
{
// => supprime éventuellement l'image en cours
if (bIsImage == true)
oSelection.parentElement().outerHTML = "";
}
// Insère l'image saisie
if (sNewImage != "")
{
if (bIsImage == true)
{
// - remplace l'image en cours par la nouvelle image
oSelection.parentElement().outerHTML = sNewImage;
}
else
{
// - insère la nouvelle image
oSelection.pasteHTML(sNewImage);
}
}
}
function doInsertImage(oSelection)
{
// Configure la boite de dialogue
var sFeatures;
sFeatures = "dialogHeight:450px;dialogWidth:450px;help:no;scroll:yes;status:yes;edge:raised";
// Teste si création ou modification d'une image
var bIsImage = false;
var aArguments;
aArguments = new Array();
if (oSelection.parentElement().tagName == "IMG")
{
// - mémorise qu'il y a déjà une image
bIsImage = true;
// - récupère l'url, la légende et l'alignement de l'image
aArguments[0] = oSelection.parentElement().src;
aArguments[1] = oSelection.parentElement().alt;
aArguments[2] = oSelection.parentElement().align;
}
else
{
// - initialise une nouvelle image
aArguments[0] = "";
aArguments[1] = "";
aArguments[2] = "";
}
// Affiche la boite de dialogue d'insertion d'une image
var sNewImage;
sNewImage = window.showModalDialog('tolbar/insertImage.php', aArguments, sFeatures);
// Rien à faire si clic sur le bouton [Annuler]
if (sNewImage == "~")
return;
// Cas où pas d'image sélectionnée
if (sNewImage == "")
{
// => supprime éventuellement l'image en cours
if (bIsImage == true)
oSelection.parentElement().outerHTML = "";
}
// Insère l'image saisie
if (sNewImage != "")
{
if (bIsImage == true)
{
// - remplace l'image en cours par la nouvelle image
oSelection.parentElement().outerHTML = sNewImage;
}
else
{
// - insère la nouvelle image
oSelection.pasteHTML(sNewImage);
}
}
}
function AddLink()
{
//identify selected text
var sText = document.selection.createRange();
if (sText.text != "")
{
//create link
doCommand('createLink');
//document.execCommand("CreateLink");
//change the color to indicate success
if (sText.parentElement().tagName == "A")
{
sText.execCommand("ForeColor",false,"#FF0033");
}
}
else
{
alert("veuillez selectionner votre texte!");
}
}
function doCreateLink (oSelection)
{
// Configure la boite de dialogue
var sFeatures;
sFeatures = "dialogHeight:160px;dialogWidth:450px;help:no;scroll:no;status:no";
// Teste si création ou modification d'un lien
var bIsLink = false;
var sOldHtml = "";
var aArguments;
aArguments = new Array();
if (oSelection.parentElement().tagName == "A")
{
// La sélection correspond à un lien =>
// - mémorise l'élément lié actuel
bIsLink = true;
sOldHtml = oSelection.parentElement().innerHTML;
// - récupère l'url et la légende du lien
aArguments[0] = oSelection.parentElement().href;
aArguments[1] = oSelection.parentElement().title;
}
else
{
// La sélection ne correspond pas à un lien
// => teste si l'élément supérieur n'est pas un lien
if (oSelection.parentElement().parentElement.tagName == "A")
{
// L'élément supérieur correspond à un lien =>
// - mémorise l'élément lié actuel
bIsLink = true;
sOldHtml = oSelection.parentElement().parentElement.innerHTML;
// - récupère l'url et la légende du lien
aArguments[0] = oSelection.parentElement().parentElement.href;
aArguments[1] = oSelection.parentElement().parentElement.title;
}
if (bIsLink == false)
{
// L'élément supérieur ne correspond pas à un lien =>
// - initialise un nouveau lien
aArguments[0] = "";
aArguments[1] = "";
// - sélectionne éventuellement le mot en cours
if (oSelection.text == "")
{
oSelection.collapse();
oSelection.expand("word");
if (oSelection.text.charAt(oSelection.text.length - 1) == " ")
oSelection.moveEnd("character", -1);
oSelection.select();
oSelection = document.selection.createRange();
}
}
}
// Affiche la boite de dialogue de création d'un lien
var sNewLink;
sNewLink = window.showModalDialog('tolbar/createLink.htm', aArguments, sFeatures);
// Rien à faire si clic sur le bouton [Annuler] ou [X]
if (sNewLink == "~")
return;
// Cas où pas de lien sélectionné
if (sNewLink == "")
{
// => supprime éventuellement le lien en cours
if (bIsLink == true)
document.execCommand('Unlink');
}
// Insère le lien saisi
if (sNewLink != "")
{
if (bIsLink == true)
{
// - remplace le lien en cours par le nouveau lien
sNewLink = sNewLink + sOldHtml + "</a>";
if (oSelection.parentElement().tagName == "A")
oSelection.parentElement().outerHTML = sNewLink;
else
oSelection.parentElement().parentElement.outerHTML = sNewLink;
}
else
{
// - insère le nouveau lien
sNewLink = sNewLink + oSelection.htmlText + "</a>";
oSelection.pasteHTML(sNewLink);
}
}
}
function CopyContent (sHtmlSource, sTextTarget)
{
var sHtml = document.getElementById(sHtmlSource).innerHTML;
var sXhtml = HtmlToXhtml(sHtml);
document.getElementById(sTextTarget).innerText = sXhtml;
}
function HtmlToXhtml (sHtmlCode)
{
return(sHtmlCode);
}
Je ne connais pas suffisamment Javascript pour t'aider.
Ton problème n'est pas un problème d'HTML mais de Javascript.
Ton problème n'est pas un problème d'HTML mais de Javascript.
« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »
Hoa : http://hoa-project.net (sur @hoaproject).
Hoa : http://hoa-project.net (sur @hoaproject).
pas sur qu'il s'agisse à 100% de javascript... mais je vais déplacer le sujet malgré tout
Pour FF tu peux passer par un iframe et le designMode qui va bien
si tu ne veux pas reprendre un éditeur prêt à l'emploi regarde comment ils font...
Pour FF tu peux passer par un iframe et le designMode qui va bien
si tu ne veux pas reprendre un éditeur prêt à l'emploi regarde comment ils font...
/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute
Pour les iframe c'est très bien coté mozilla, mais la ou ca bloque!
C’est au moment de transférer du iframe à un texarea, pour pouvoir y traiter dans une requête PHP.
J’avais vu cette petite application richedit de mozilla et ca me plaisait énormément, une très bonne base, malheureusement pas très compatible avec IE.
http://www.mozilla.org/editor/midasdemo/
si on peu faire mon transfert de valeur d'un iframe à un texarea c'est plutôt intéressant.
C’est au moment de transférer du iframe à un texarea, pour pouvoir y traiter dans une requête PHP.
J’avais vu cette petite application richedit de mozilla et ca me plaisait énormément, une très bonne base, malheureusement pas très compatible avec IE.
http://www.mozilla.org/editor/midasdemo/
si on peu faire mon transfert de valeur d'un iframe à un texarea c'est plutôt intéressant.