Forum d'entraide PHPFrance

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

merci d'avance

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.

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

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>

Si tu retrouve ton article je suis preneur

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 ?

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.

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…

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 (fckeditor par exemple).

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

merci ,

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

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

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

ca tourne tip top

merci pour la piste

Forum d'entraide PHPFrance

Rendre un DIV editable sous mozilla Firfox

Rendre un DIV editable sous mozilla Firfox