Win3x.Org
http://www.win3x.org/win3board/

Legacy [style de forum compatible anciens navigateurs]
http://www.win3x.org/win3board/viewtopic.php?f=68&t=24855
Page 4 sur 13
Auteur :  raymater [ 25 sept. 2016 13:17 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

Ok, je vais procéder à un examen du code par interrogations successives pour tenter de résoudre ton problème :

:?: - Est ce que cette condition est remplie quand on exécute sous IE4 ?
if ((clientVer >= 4) && is_ie && is_win) {
      // Get text selection
      theSelection = document.selection.createRange().text;

      if (theSelection) {
         // Add tags around selection
         document.selection.createRange().text = bbopen + theSelection + bbclose;
         textarea.focus();
         theSelection = '';
         return;
      }

   }
Pour tester : rajouter la ligne dans le if ((clientVer >= 4) && is_ie && is_win) { :
alert("Passé sous IE4");
et regarde ensuite si le message de pop-up apparait lors du chargement de cette fonction. Si oui alors c'est qu'on est sûr que ta condition fonctionne, si non alors c'est que ça ne marche pas.[/i]



:?: - Essaye d'afficher dans un pop-up les valeurs des paramètres de ta fonction bbfontstyle() à savoir bbopen et bbclose. Pour cela sélectionne le même texte d'un même texte d'exemple en guise d'essai sur deux navigateurs différents : un récent et un sous IE4 et vois si tu as les mêmes valeurs bbopen et bbclose des deux côtés. Pour cela rajoute une ligne :
alert("Valeur de bbopen : " + bbopen + "  ;  Valeur de bbclose : " + bbclose);
Si tu vois que les deux valeurs sont identiques d'une part et d'autres alors tu peux écarter le problème de valeurs. Si non je pense que cela viens de là.



Enfin serait-il possible d'avoir le code des fonctions getCaretPosition(), storeCaret() et insert_text() afin que je puisse tester tout ça sur une page HTML ?

Auteur :  Big Monstro [ 25 sept. 2016 15:36 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

Merci raymater pour ta contribution.

J'ai inséré le code alert("Passe sous IE4") au début de la fonction, dans la partie if (theSelection) { ... },

ainsi que le code if ((clientVer >= 4) && is_ie && is_win) { alert("Valeur de bbopen : " + bbopen + " ; Valeur de bbclose : " + bbclose); } en fin de parcours.
Concrètement, les navigateurs Microsoft - en principe de IE3 à IE10 - sont susceptibles de faire apparaitre des messages lors de l'insertion de balises.

Résultats
Internet Explorer 4 => http://zupimages.net/up/16/38/9vni.jpg
Internet Explorer 5 => http://zupimages.net/up/16/38/679x.jpg
Internet Explorer 9 => http://zupimages.net/up/16/38/ril8.jpg

Constat
Même en sélectionnant préalablement du texte, IE4 se comporte de la même façon que IE5/IE9 lorsque j'insère une balise SANS avoir sélectionné quoi que ce soit. Mon intuition étant que IE4 ne comprend pas la condition if (theSelection), existe-t-il une alternative à theSelection ou est-ce que ma compréhension est erronée ?
raymater a écrit :
Enfin serait-il possible d'avoir le code des fonctions storeCaret() et insert_text() afin que je puisse tester tout ça sur une vraie page ?
Si tu es en train de publier une réponse en style subsilver2/legacy et que tu demandes à ton navigateur d'enregistrer la page, tu récupéreras le fichier editor.js (c'est ça le "désavantage" de JavaScript pour certaines personnes, c'est qu'on ne peut pas masquer le code source aux visiteurs curieux). Sinon, le voici dans son intégralité :
/**
* bbCode control by subBlue design [ www.subBlue.com ]
*/

// Startup variables
var imageTag = false;
var theSelection = false;
var bbcodeEnabled = true;

// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion, 10); // Get browser version

var is_ie = ((clientPC.indexOf('msie') !== -1) && (clientPC.indexOf('opera') === -1));
var is_win = ((clientPC.indexOf('win') !== -1) || (clientPC.indexOf('16bit') !== -1));
var baseHeight;

/**
* Shows the help messages in the helpline window
*/
function helpline(help) {
	document.forms[form_name].helpbox.value = help_line[help];
}

/**
* Fix a bug involving the TextRange object. From
* http://www.frostjedi.com/terra/scripts/demo/caretBug.html
*/ 
function initInsertions() {
	var doc;

	if (document.forms[form_name]) {
		doc = document;
	} else {
		doc = opener.document;
	}

	var textarea = doc.forms[form_name].elements[text_name];

	if (is_ie && typeof(baseHeight) !== 'number') {
		textarea.focus();
		baseHeight = doc.selection.createRange().duplicate().boundingHeight;

		if (!document.forms[form_name]) {
			document.body.focus();
		}
	}
}

/**
* bbstyle
*/
function bbstyle(bbnumber) {
	if (bbnumber !== -1) {
		bbfontstyle(bbtags[bbnumber], bbtags[bbnumber+1]);
	} else {
		insert_text('[*]');
		document.forms[form_name].elements[text_name].focus();
	}
}

/**
* Apply bbcodes
*/
function bbfontstyle(bbopen, bbclose) {
	theSelection = false;

	var textarea = document.forms[form_name].elements[text_name];

	textarea.focus();

	if ((clientVer >= 4) && is_ie && is_win) {
		// Get text selection
		theSelection = document.selection.createRange().text;

		if (theSelection) {
			// Add tags around selection
			document.selection.createRange().text = bbopen + theSelection + bbclose;
			textarea.focus();
			theSelection = '';
		alert("Passe sous IE4");	return;
		}
	} else if (textarea.selectionEnd && (textarea.selectionEnd - textarea.selectionStart > 0)) {
		mozWrap(textarea, bbopen, bbclose);
		textarea.focus();
		theSelection = '';
		return;
	}

	//The new position for the cursor after adding the bbcode
	var caret_pos = getCaretPosition(textarea).start;
	var new_pos = caret_pos + bbopen.length;

	// Open tag
	insert_text(bbopen + bbclose);

	// Center the cursor when we don't have a selection
	// Gecko and proper browsers
	if (!isNaN(textarea.selectionStart)) {
		textarea.selectionStart = new_pos;
		textarea.selectionEnd = new_pos;
	}
	// IE
	else if (document.selection) {
		var range = textarea.createTextRange(); 
		range.move("character", new_pos); 
		range.select();
		storeCaret(textarea);
	}

	textarea.focus();
	if ((clientVer >= 4) && is_ie && is_win) {
		alert("Valeur de bbopen : " + bbopen + "  ;  Valeur de bbclose : " + bbclose);
}	return;
}

/**
* Insert text at position
*/
function insert_text(text, spaces, popup) {
	var textarea;

	if (!popup) {
		textarea = document.forms[form_name].elements[text_name];
	} else {
		textarea = opener.document.forms[form_name].elements[text_name];
	}

	if (spaces) {
		text = ' ' + text + ' ';
	}

	// Since IE9, IE also has textarea.selectionStart, but it still needs to be treated the old way.
	// Therefore we simply add a !is_ie here until IE fixes the text-selection completely.
	if (!isNaN(textarea.selectionStart) && !is_ie) {
		var sel_start = textarea.selectionStart;
		var sel_end = textarea.selectionEnd;

		mozWrap(textarea, text, '');
		textarea.selectionStart = sel_start + text.length;
		textarea.selectionEnd = sel_end + text.length;
	} else if (textarea.createTextRange && textarea.caretPos) {
		if (baseHeight !== textarea.caretPos.boundingHeight) {
			textarea.focus();
			storeCaret(textarea);
		}

		var caret_pos = textarea.caretPos;
		caret_pos.text = caret_pos.text.charAt(caret_pos.text.length - 1) === ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;
	} else {
		textarea.value = textarea.value + text;
	}

	if (!popup) {
		textarea.focus();
	}
}

/**
* Add inline attachment at position
*/
function attachInline(index, filename) {
	insert_text('[attachment=' + index + ']' + filename + '[/attachment]');
	document.forms[form_name].elements[text_name].focus();
}

/**
* Add quote text to message
*/
function addquote(post_id, username, l_wrote) {
	var message_name = 'message_' + post_id;
	var theSelection = '';
	var divarea = false;
	var i;

	if (typeof l_wrote === 'undefined') {
		// Backwards compatibility
		l_wrote = 'wrote';
	}

	if (document.all) {
		divarea = document.all[message_name];
	} else {
		divarea = document.getElementById(message_name);
	}

	// Get text selection - not only the post content :(
	// IE9 must use the document.selection method but has the *.getSelection so we just force no IE
	if ((window.getSelection && !is_ie && !window.opera) || (window.opera && window.matchMedia)) {
		theSelection = window.getSelection().toString();
	} else if (document.getSelection && !is_ie) {
		theSelection = document.getSelection();
	} else if (document.selection) {
		theSelection = document.selection.createRange().text;
	}

	if (theSelection === '' || typeof theSelection === 'undefined' || theSelection === null) {
		if (divarea.innerHTML && document.getElementById) {
			theSelection = divarea.innerHTML.replace(/<br>/ig, '\n');
			theSelection = theSelection.replace(/<br\/>/ig, '\n');
			theSelection = theSelection.replace(/&lt\;/ig, '<');
			theSelection = theSelection.replace(/&gt\;/ig, '>');
			theSelection = theSelection.replace(/&amp\;/ig, '&');
			theSelection = theSelection.replace(/&nbsp\;/ig, ' ');
		} else if (document.all) {
			theSelection = divarea.innerText;
		} else if (divarea.textContent) {
			theSelection = divarea.textContent;
		} else if (divarea.firstChild.nodeValue) {
			theSelection = divarea.firstChild.nodeValue;
		}
	}

	if (theSelection) {
		if (bbcodeEnabled) {
			insert_text('[quote="' + username + '"]' + theSelection + '[/quote]');
		} else {
			insert_text(username + ' ' + l_wrote + ':' + '\n');
			var lines = split_lines(theSelection);
			for (i = 0; i < lines.length; i++) {
				insert_text('> ' + lines[i] + '\n');
			}
		}
	}

	return;
}

function split_lines(text) {
	var lines = text.split('\n');
	var splitLines = new Array();
	var j = 0;
	var i;

	for(i = 0; i < lines.length; i++) {
		if (lines[i].length <= 80) {
			splitLines[j] = lines[i];
			j++;
		} else {
			var line = lines[i];
			var splitAt;
			do {
				splitAt = line.indexOf(' ', 80);

				if (splitAt === -1) {
					splitLines[j] = line;
					j++;
				} else {
					splitLines[j] = line.substring(0, splitAt);
					line = line.substring(splitAt);
					j++;
				}
			}
			while(splitAt !== -1);
		}
	}
	return splitLines;
}

/**
* From http://www.massless.org/mozedit/
*/
function mozWrap(txtarea, open, close) {
	var selLength = (typeof(txtarea.textLength) === 'undefined') ? txtarea.value.length : txtarea.textLength;
	var selStart = txtarea.selectionStart;
	var selEnd = txtarea.selectionEnd;
	var scrollTop = txtarea.scrollTop;

	var s1 = (txtarea.value).substring(0,selStart);
	var s2 = (txtarea.value).substring(selStart, selEnd);
	var s3 = (txtarea.value).substring(selEnd, selLength);

	txtarea.value = s1 + open + s2 + close + s3;
	txtarea.selectionStart = selStart + open.length;
	txtarea.selectionEnd = selEnd + open.length;
	txtarea.focus();
	txtarea.scrollTop = scrollTop;

	return;
}

/**
* Insert at Caret position. Code from
* http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
*/
function storeCaret(textEl) {
	if (textEl.createTextRange && document.selection) {
		textEl.caretPos = document.selection.createRange().duplicate();
	}
}

/**
* Caret Position object
*/
function caretPosition() {
	var start = null;
	var end = null;
}

/**
* Get the caret position in an textarea
*/
function getCaretPosition(txtarea) {
	var caretPos = new caretPosition();

	// simple Gecko/Opera way
	if (txtarea.selectionStart || txtarea.selectionStart === 0) {
		caretPos.start = txtarea.selectionStart;
		caretPos.end = txtarea.selectionEnd;
	}
	// dirty and slow IE way
	else if (document.selection) {
		// get current selection
		var range = document.selection.createRange();

		// a new selection of the whole textarea
		var range_all = document.body.createTextRange();
		range_all.moveToElementText(txtarea);

		// calculate selection start point by moving beginning of range_all to beginning of range
		var sel_start;
		for (sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++) {
			range_all.moveStart('character', 1);
		}

		txtarea.sel_start = sel_start;

		// we ignore the end value for IE, this is already dirty enough and we don't need it
		caretPos.start = txtarea.sel_start;
		caretPos.end = txtarea.sel_start;
	}

	return caretPos;
}


Par rapport à celui fourni par l'équipe de phpBB, j'ai viré les dépendances à jQuery (ce qui l'a rendu pleinement compatible avec IE 5.x 32-bit) et corrigé un bug spécifique à Opera 12.1x. Les modifications que tu m'as suggéré à titre de diagnostic sont toujours incluses dans le code. Notes qu'il y a aussi du code JavaScript au sein de la page HTML de l'éditeur de message.

Auteur :  raymater [ 25 sept. 2016 16:02 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

Big Monstro a écrit :
Résultats
Internet Explorer 4 => http://zupimages.net/up/16/38/9vni.jpg
Internet Explorer 5 => http://zupimages.net/up/16/38/679x.jpg
Internet Explorer 9 => http://zupimages.net/up/16/38/ril8.jpg
Au vu des résultats, IE passe donc bien dans le if comme prévu. En tout cas je sais maintenant quoi mettre dans les variables bbopen et bbclose pour tester. Donc si je comprends bien au vu du code que tu as mis, dans le premier cas sous IE4, tu n'as eu qu'un seul pop-up (celui marqué Valeur de bbopen: ; Valeur de bbclose : ) et sur le deuxième et le troisième cas tu en as eu deux d'affiché à la suite (celui des valeurs des variables comme sous IE4 + celui marqué "Passe dans IE4") ; c'est bien ça ?

Du coup si c'est ça c'est qu'au vu que l'alert("Passe sous IE4") ne soit pas affiché c'est donc qu'il ne passe pas dans le if (theSelection) { ... }. Dans ce cas c'est peut-être que la variable theSelection est undefined et dans ce cas il faudrait la tester en insérant le code suivant dans le if ((clientVer >= 4) && is_ie && is_win) { et avant le if (theSelection) { :
if (typeof theSelection == 'undefined') {
	alert("La variable theSelection n'est pas définie");
}
Si ce pop-up s'affiche alors c'est que theSelection = document.selection.createRange().text; qui pose problème.

S'il n'y a aucun pop-up ne s'affichent c'est que if (theSelection) { n'est pas géré pas IE4 et dans ce cas il faudra le remplacer par
if (typeof theSelection != 'undefined') {

Pour le reste je vais tester tout ça et je te redis ce qu'il en est.

:arrow: EDIT : Bon alors j'ai fait quelques tests de débogage avec des var_dump dans tout ça et je me retrouve au final avec une variable theSelection undefined dans tous les cas. Ce qui me semble incompréhensible. Est-ce le cas chez toi BM ?
[ img ]
(Je précise que j'utilise theSelection = document.getSelection().text; pour définir la variable au lieu de theSelection = document.selection.createRange().text; comme initialement mis dans le script pour que cela fonctionne sous Firefox)

:arrow: EDIT (2) : Au final ça marche avec la fonction mozWrap() sous Firefox. Donc si tu as ce fameux problème de variable theSelection undefined, il faudrait voir si la fonction mozWrap marche sous IE4 en mettant ceci juste avant le if (theSelection) { :
if (typeof theSelection == 'undefined') {
	mozWrap(textarea, bbopen, bbclose);
	return;
}

Auteur :  Big Monstro [ 25 sept. 2016 17:21 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

raymater a écrit :
Au vu des résultats, IE passe donc bien dans le if comme prévu. En tout cas je sais maintenant quoi mettre dans les variables bbopen et bbclose pour tester. Donc si je comprends bien au vu du code que tu as mis, dans le premier cas sous IE4, tu n'as eu qu'un seul pop-up (celui marqué Valeur de bbopen: ; Valeur de bbclose : ) et sur le deuxième et le troisième cas tu en as eu deux d'affiché à la suite (celui des valeurs des variables comme sous IE4 + celui marqué "Passe dans IE4") ; c'est bien ça ?
En fait, non, concernant IE5 à IE9 : si j'ai sélectionné du texte, je n'ai que le message "Passe dans IE4". Si je ne sélectionne rien, j'ai l'autre message. Pas les deux. Pour avoir ces deux messages, j'aurais dû mettre les deux alert l'un après l'autre dans le code (mais IE4 n'aurait alors rien affiché du tout).

Attention, pour la fonction bbfontstyle, theSelection n'a de sens que pour IE (jusqu'à la v10 incluse). Pour les navigateurs alternatifs, tu n'as que theSelection = false; et ensuite theSelection = '';, bref, ça m'a tout l'air d'être inutile pour Firefox.

Mes dernières observations
if ((clientVer >= 4) && is_ie && is_win) {
		// Get text selection
		theSelection = document.selection.createRange().text;

	if (typeof theSelection == 'undefined') {
   alert("La variable theSelection n'est pas définie");
}	
	if (theSelection) {
			// Add tags around selection
			document.selection.createRange().text = bbopen + theSelection + bbclose;
			textarea.focus();
			theSelection = '';
		alert("Passe sous IE4");	return;
		}
	}
Aucune réaction de la part d'IE4 ou d'IE5 pour la condition if (typeof theSelection == 'undefined')
if ((clientVer >= 4) && is_ie && is_win) {
		// Get text selection
		theSelection = document.selection.createRange().text;

	if (typeof theSelection != 'undefined') {
   alert("IE4 réagit à if typeof theSelection != undefined");
}	
	if (theSelection) {
			// Add tags around selection
			document.selection.createRange().text = bbopen + theSelection + bbclose;
			textarea.focus();
			theSelection = '';
		alert("Passe sous IE4");	return;
		}
	}
Les deux IE réagissent à la condition if (typeof theSelection != 'undefined')'

edit: tu as édité ton message entretemps, je n'ai pas tenu compte de la dernière partie, je vais vérifier ça ^^

Auteur :  raymater [ 25 sept. 2016 17:29 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

Ce qui me parait donc cohérent à l'idée que le JS des anciens IE réagit dans ce cas à ce type de fonctions pour donner une valeur à la variable theSelection. Et visiblement theSelection serait alors défini. Dans ce cas essaye voir d'afficher dans ton if (typeof theSelection != 'undefined') { la valeur de la variable theSelection pour chaque IE comme ceci :
if (typeof theSelection != 'undefined') {
   alert("Valeur de theSelection = " + theSelection);
}
Par la suite essaye d'enlever/commenter tout ton if (typeof theSelection != 'undefined') { afin de voir si le pop-up "Passe sous IE4" (alert("Passe sous IE4");) s'affiche bien sous IE 4.

Auteur :  Big Monstro [ 25 sept. 2016 17:47 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

[ img ]

[ img ]

J'ai l'impression que IE4 ne maintient pas la sélection. Observez ces deux images. Pourtant, j'ai bel et bien sélectionné le texte "Test sous Internet Explorer 4" avant d'insérer une balise et faire apparaitre juste avant le message "Valeur de TheSelection =". Sous IE5, la sélection de texte est maintenue et ça se voit avec le surlignement bleu.

Auteur :  raymater [ 25 sept. 2016 17:54 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

IE4 ne maintiendrait donc pas le focus de la sélection après appui sur le bouton dans ce cas.

Tu as essayé d'utiliser la fonction mozWrap() sous IE4 qui normalement est utilisée sous Firefox et les autres navigateurs hors IE mais étant tout de même fonctionnel ?
A rajouter dans tout le if ((clientVer >= 4) && is_ie && is_win) { en lieu et place de ce qui existe à l'intérieur de ce dernier :
if ((clientVer == 4) && is_ie && is_win) {
   mozWrap(textarea, bbopen, bbclose);
   return;
}
else
{
	theSelection = document.selection.createRange().text;
	if (theSelection) {
		// Add tags around selection
		document.selection.createRange().text = bbopen + theSelection + bbclose; // Erreur corrigée
		textarea.focus();
		theSelection = '';
		return;
	}
}

Auteur :  Big Monstro [ 25 sept. 2016 18:23 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

C'est pire : désormais, IE5 et IE6 se comportent comme IE4 :lol:, mais ça enlève les messages popup.

Concevoir un code JavaScript fonctionnel sur IE4 comme sur les navigateurs ultérieurs n'est pas une mince affaire : IE4 ne supporte pas les standards DOM (géré qu'à partir de IE5 32-bit) et proposait ses méthodes alternatives (le fameux document.all en est un exemple). IE4 est si ancien qu'il n'est pas évident de retrouver de la documentation qui s'y rapporte.

Je ne perds pas espoir. Je viens de trouver ceci => http://www.webreference.com/js/column12 ... owser.html

Auteur :  raymater [ 25 sept. 2016 18:34 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

viewtopic.php?f=39&t=24722&p=165211#p165209
raymater a écrit :
if (theSelection) {
	// Add tags around selection
	theSelection = document.selection.createRange().text = bbopen + theSelection + bbclose;
	textarea.focus();
	theSelection = '';
	return;
}
==> Tu noteras mon erreur à cet endroit : theSelection = document.selection.createRange().text = bbopen + theSelection + bbclose;. Je voulais mettre ça à la place :
if (theSelection) {
	// Add tags around selection
	document.selection.createRange().text = bbopen + theSelection + bbclose; // C'est mieux :D
	textarea.focus();
	theSelection = '';
	return;
}

Auteur :  Big Monstro [ 08 oct. 2016 17:33 ]
Sujet du message :  Re: Problème avec l'insertion des BBcode (JavaScript)

Je suis dans l'incapacité de résoudre le problème décrit supra. Je ne sais même pas s'il y a une solution. Le problème semble inhérent au comportement d'IE4 (si on clique où que ce soit, la sélection de texte n'est pas maintenue ; contrairement à IE5+ et n'importe quel navigateur moderne où le clic DOIT être localisé dans la zone <textarea> pour déselectionner le texte).

Je reviens sur ce topic pour exprimer cette requête : récupérer les packages des premières versions de phpBB (1.x et 2.0). Sauf erreur de ma part, phpBB.com ne propose plus rien en dessous de la v3.0. Le fait est que celles-ci ne soient pas beaucoup plus récentes que IE4.01 SP2 (janvier 1999) peut supposer que l'équipe de phpBB a pu supporter IE4 à l'époque. Ce navigateur avait encore 7% de parts de marché en août 2001 et n'a descendu sous la barre du pourcent qu'à partir d'août 2004. S'il existe un code JavaScript pour contourner mon souci, ils l'ont peut être implémenté à l'époque. Je sais que ces anciennes versions de phpBB sont truffées de failles de sécurité et qu'il serait bien malvenu de venir récupérer du code PHP dedans. Mais je souhaite consulter la partie JavaScript de l'éditeur de texte.

En dehors de l'éditeur de messages, Win3x.Org fonctionne sur IE 4.01 SP1+ exactement de la même manière que sur n'importe quel navigateur récent. Pour lire les discussions et télécharger des applis, c'est parfait

Page 4 sur 13 Fuseau horaire sur UTC+02:00
Développé par phpBB® Forum Software © phpBB Limited
Traduction française officielle © Qiaeru