blognote-info.com

Voila donc perso j'avais besoin d'une toolbox, j'ai trouvé des trucs sur internet mais soit c'était l'usine a gaz soit c'était mal foutu ... Je me suis dit après tout on est jamais mieux servis que par soit même, j'ai un peu cherché comment ça fonctionnait et voici ce que j'ai produit :

/**
 * This class is able to manage BBCodes
 */
TextArea = function (name) {
    this._init(name);
}
 
/**
 * TextArea's constructor
 */
TextArea.prototype._init = function (name) {
	this.name = name;
	this.textarea = document.getElementById(this.name);
}
 
/**
 * The effective tag operation
 */
TextArea.prototype.tag = function (bStart,bEnd) {
	this.textarea.focus();
	if (typeof(document.selection) != 'undefined') {
		return this.tagIE(bStart,bEnd);
	} else {
		return this.tagGecko(bStart,bEnd);
	}
}
 
TextArea.prototype.tagIE = function (bStart,bEnd) {
	var range = document.selection.createRange();
	var insText = range.text;
	range.text = bStart + insText + bEnd;
	range = document.selection.createRange();
	if (insText.length == 0) {
		range.move('character', -(bEnd.length));
	} else {
		range.moveStart('character', bStart.length + insText.length + bEnd.length);
	}
	range.select();
}
 
TextArea.prototype.tagGecko = function (bStart,bEnd) {
	var start = this.textarea.selectionStart;
	var end = this.textarea.selectionEnd;
	var insText = this.textarea.value.substring(start, end);
	this.textarea.value = this.textarea.value.substr(0, start) + bStart + insText + bEnd + this.textarea.value.substr(end);
	var pos = insText.length ? start + bStart.length + insText.length + bEnd.length : start + bStart.length;
	this.textarea.selectionStart = pos;
	this.textarea.selectionEnd = pos;
}
 
/**
 * Automatically tag start and end by using a simple open/close tag
 */
TextArea.prototype.simpleTag = function (tag) {
	this.tag('['+tag+']','[/'+tag+']');
}
 
/**
 * Automatically tag start and end by using an open/close tag with a param asked to user
 * by a prompt
 */
TextArea.prototype.promptTag = function (tag,message) {
	rep = prompt(message);
	if (rep.length) this.tag('['+tag+'='+rep+']','[/'+tag+']');
}

Voila c'est pas génial mais ça permet plein de petites choses sympa par la suite ...

du coup vla ma toolbox :

			<span id="toolbox">
				<input type="button" value="b" onclick="t_content.simpleTag('b');" />
				<input type="button" value="u" onclick="t_content.simpleTag('u');" />
				<input type="button" value="i" onclick="t_content.simpleTag('i');" />
				<input type="button" value="s" onclick="t_content.simpleTag('s');" />
				&nbsp;
				<input type="button" value="p" onclick="t_content.simpleTag('p');" />
				<input type="button" value="centre" onclick="t_content.simpleTag('center');" />
				<input type="button" value="droite" onclick="t_content.simpleTag('right');" />
				&nbsp;
				<input type="button" value="img" onclick="t_content.simpleTag('img');" />
				<input type="button" value="email" onclick="t_content.simpleTag('email');" />
				&nbsp;
				<input type="button" value="taille" onclick="t_content.promptTag('size','Quelle taille ?');" />
				<input type="button" value="citation" onclick="t_content.promptTag('quote','Qui ?');" />
				<input type="button" value="color" onclick="t_content.promptTag('color','Quelle couleur ?');" />
				<input type="button" value="url" onclick="t_content.promptTag('url','Quelle url ?');" />
			</span>

Pour se servir de tout ça il suffit de faire (dans mon cas) :

		t_content = new TextArea('c_content');

Toute simple, je la rendrai plus graphique et plus jolite par la suite ;)