Bon et bein vous aviez raison , c'est iframe et designMode qui vont être la solution. :wink:

ca tourne tip top :D
merci pour la piste :wink:

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. 8-)

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 [url=http://www.mozilla.org/editor/midas-spec.html]iframe et le designMode qui va bien[/url] :-k

si tu ne veux pas reprendre un éditeur prêt à l'emploi regarde comment ils font...

merci ,

ca m'aide quand même , je sais maintenant que c'est coté javascripts qu'il faut que je modifis mon code 8-)

Je ne connais pas suffisamment Javascript pour t'aider.
Ton problème n'est pas un problème d'HTML mais de Javascript.

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.

[code]
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);
}
[/code]

[quote="coacoacoa"]Comment ç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…[/quote]
Ton truc est un peu bidon on dirait :?. 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 ([url=http://fckeditor.net/]fckeditor[/url] par exemple).

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.

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 ?

Mon wisiwyg marche impeccable sous IE mais sous mozilla impossible , du coup je cherche une solution pour le rendre compatible tout navigateur. :D


Exemple:
[code]<div contenteditable="true" name="memoHtml" id="memoHtml" style="width:100%; height:400px;border:1px solid #666666;"> ici mon editeur</div>[/code]

Si tu retrouve ton article je suis preneur :wink:

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.

Bonjour,

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 :cry:

merci d'avance