append et textarea

par **rimie** » 30 mars 2012, 17:46

voila le code en entier:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<style>
#preview{
	white-space: pre-line;
}
</style>

<script type="text/javascript" src="../jquery.js"></script>

<script>
function insertTag(startTag, endTag, textareaId, tagType) {
        var field  = document.getElementById(textareaId); 
        var scroll = field.scrollTop;
        field.focus();
        
        if (window.ActiveXObject) { // C'est IE
                var textRange = document.selection.createRange();            
                var currentSelection = textRange.text;
                
                textRange.text = startTag + currentSelection + endTag;
                textRange.moveStart("character", -endTag.length - currentSelection.length);
                textRange.moveEnd("character", -endTag.length);
                textRange.select();     
        } else { // Ce n'est pas IE
                var startSelection   = field.value.substring(0, field.selectionStart);
                var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
                var endSelection     = field.value.substring(field.selectionEnd);
                
                field.value = startSelection + startTag + currentSelection + endTag + endSelection;
                field.focus();
                field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
        } 

        field.scrollTop = scroll; // et on redéfinit le scroll.
}



$(document).ready(function(){
	 
	function preview() {

	var bbcode = ['\[b\]', '\[/b\]', '\[i\]', '\[/i\]', '\n'];
	var html = ['<b>', '</b>', '<i>', '</i>', '<br />'];
	var txt = $('.formatageCols').val();
	
		/*
		#################### Loop ##########################
		*/
		
		for (var i in bbcode) {
			txt = txt.replace(bbcode[i], html[i]);
			
		}
		
		$("#preview").html(txt);
		}
		
 	$('.formatageCols').keyup(preview);
 
  });
</script>


</head>

<body>

<div dir="rtl">

<div id="preview"></div>

<form name="formatage" class="formatage" dir="rtl">
<img src="bold.gif" style="cursor: pointer;" onclick="insertTag('[b]','[/b]','textarea');" class="Icons" title = "bold.gif" />

&nbsp;

<img src="italic.gif" style="cursor: pointer;" onclick="insertTag('[i]','[/i]','textarea');" class="Icons" title = "italic.gif" />

<br />

<textarea cols="60" rows="10" dir="rtl" id="textarea" class="formatageCols"></textarea>

</form>

</div>

essayer de tester par:

[b]test1[/b]

[i]test2[/i]
[i]test3[/i]


[b]test4[/b]

par **rimie** » 30 mars 2012, 16:23

je ne sais pas pourquoi, portant sur le site ca marche

par **xTG** » 30 mars 2012, 10:29

J'ai effectué quelques tests mais j'ai pas réussi à sortir un résultat avec une boucle. O_o

Code : Tout sélectionner

var txt = '[b]gras[/b] et [b]gras[/b]';
var bbcode = ['\[b\]', '\[/b\]', '\[i\]', '\[/i\]'];
var html = ['<b>', '</b>', '<i>', '</i>'];

alert(txt.replace(/\[b\]/g, '<b>'));

/*
for (var i = 0; i < bbcode.length; i++) {
    txt = txt.replace(new RegExp(bbcode[i],"g"), html[i]);
}
*/

Le premier fonctionne à la perfection...
Mais la boucle fait n'importe quoi elle n'interprète pas les [ et ] malgré les antislashs...

par **rimie** » 30 mars 2012, 09:25

Code : Tout sélectionner

var bbcode = ['\[b\]', '\[/b\]', '\[i\]', '\[/i\]'];
var html = ['<b>', '</b>', '<i>', '</i>'];

for (var i = 0; i < bbcode.length; i++) {
    txt = txt.replace(bbcode[i], html[i]);
}

alors ici:

[b-]test1[-/b]
[b-]test2[-/b]

resultat:

test1 [-b]test2[-/b]

le premier est en gras, le 2eme non

j'ai mis (-) pour ne pas etre affecte au forum

par **rimie** » 29 mars 2012, 03:34

http://www.siteduzero.com/tutoriel-3-34 ... texte.html

par **xTG** » 28 mars 2012, 18:37

Enlèves le second var car ça doit redéfinir la variable, donc la réinitialiser.

par **rimie** » 28 mars 2012, 13:07

en vain, elle les remplace pas:

Code : Tout sélectionner

var bbcode = ['\[b\]', '[/b]', '[i]', '[/i]'];
var html = ['<b>', '</b>', '<i>', '</i>'];

var txt = $('.formatageCols').val();
//console.log(txt);
	
	for (var i=0; i<20; i++) {
	var txt = txt.replace(new RegExp((bbcode[i]), "g"), html[i]);
	
		}
		
	$("#preview").html(txt);

par **xTG** » 28 mars 2012, 11:39

Remplace field par txt, actuellement tu écrases sa valeur à chaque itération de la boucle.

Pourquoi rajouter des espaces dans la déclaration du regex ?

par **rimie** » 28 mars 2012, 08:04

j'utilise pas each:

Code : Tout sélectionner

// j'ai change ici [b] par \[\b]
var bbcode = ['\[b\]', '[/b]', '[i]', '[/i]'];
var html = ['<b>', '</b>', '<i>', '</i>'];

var txt = $('.formatageCols').val();
console.log(txt);
			
			for (var i=0; i<20; i++) {
			var field = txt.replace(new RegExp(" "+(bbcode[i])+" ", "g"), html[i]);
			
		}
		
	$("#preview").html(field);

par **xTG** » 28 mars 2012, 07:49

Les crochets [ ] définissent une liste de caractères autorisés (ou interdits).

Donc ta regex recherche le motif acceptant la lettre b. Pour rechercher :

Code : Tout sélectionner

\[b\]

Enfin vérifie que ta variable txt est globale (accessible dans la fonction $.each), car utiliser le mot clé var peut lui faire perdre cet attribut suivant là où tu la déclares il me semble.

par **rimie** » 28 mars 2012, 07:48

un autre test:

Code : Tout sélectionner

var bbcode = ['[b]', '[/b]'];
var html = ['<b>', '</b>'];

var txt = $('.formatageCols').val();

	for (var i=0; i<20; i++) {
	field = txt.replace(new RegExp(bbcode[i], "g"), html[i]);
		}
	
	$("#preview").html(field);

par **rimie** » 28 mars 2012, 07:36

Je vais finir par abandonner... REGEX !
La fonction replace() prend en premier paramètre une regex !
Mon lien était pourtant on ne peut plus complet...

j'ai lu la doc sur votre lien, et j'ai teste par un seule parametre:

Code : Tout sélectionner

  '[b]': '<b>'

alors je veux boucler pour prendre en consideration les autres:

Code : Tout sélectionner

'[/b]': '</b>',

c'est sur ce point j'ai pense a each, et mettre une var qui est le tableau, prendre k et remplacer par v

par **xTG** » 28 mars 2012, 07:20

Je vais finir par abandonner... REGEX !
La fonction replace() prend en premier paramètre une regex !
Mon lien était pourtant on ne peut plus complet...

par **rimie** » 28 mars 2012, 04:48

j'ai essaye ca, mais ca marche pas:

Code : Tout sélectionner

var bbcodes = { 
  '[b]': '<b>', 
  '[/b]': '</b>', 
	};
	 
$.each(bbcodes, function(k, v) { 
  var showTxt = txt.replace(k, v);
  console.log(showTxt);
  $("#preview").html(showTxt);
});

par **rimie** » 28 mars 2012, 02:45

j'ai lu la doc, mais je voudrais avoir un truc genre PHP:

$bbcode = array('[b]', '[i]', '[u]');
$html = array('<b>', '<i>', '<u>');

code = str_replace($bbcode, $html, $textarea);

append et textarea

Répondre

Étendre la vue Revue du sujet : append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea

Re: append et textarea