CMS + limitateur de caractères

par **dread** » 27 juil. 2009, 11:43

Bonjour à tout le monde.

Je fais un up sur ce sujet pour trouver de l'aide.

Le limitateur de caractère couplé à tinymce fonctionne bien. Seul bémol, j'ai un formulaire avec plusieurs champs textarea.
Sur tous les champs, je souhaite mettre la fonction tinymce+limitateur mais avec une limite de caractère différente entre chaque textarea.
Et c'est là que cela ne fonctionne plus.

Si quelqu'un à déjà mis en place un dispositif similaire, merci de m'aider à résoudre mon problème.

Pour aider, je mets mon code:

Code : Tout sélectionner

<script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
	tinyMCE.init({
		theme : "advanced",
		save_callback : "customSave",
		content_css : "example_advanced.css",
		extended_valid_elements : "a[href|target|name]",
		plugins : "table",
		theme_advanced_buttons3_add_before : "tablecontrols,separator",
		//invalid_elements : "a",
		theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
		//execcommand_callback : "myCustomExecCommandHandler",
		debug : false
	});


	// Custom save callback, gets called when the contents is to be submitted
	function customSave(id, content) {
		alert(id + "=" + content);
	}
	
//je voudrais que mon champ textarea nommé contenu_pro ait une limite de 2000 caractère
	tinyMCE.init({
		mode : "exact",
		elements : "contenu_pro",
		plugins : "maxlength",
		maxlength_value : 2000,
		maxlength_onchange_callback : "myCustomFunction"
	});
	
	var show_alert=true;
	function myCustomFunction(len){
		if(show_alert){
			show_alert=false;
			document.getElementById('spaceleft').value=2000-len;
			show_alert=true;
		}
	}	
//je voudrais que mon champ textarea nommé info_pro ait une limite de 1000 caractère	
	tinyMCE.init({
		mode : "exact",
		elements : "info_pro",
		plugins : "maxlength",
		maxlength_value : 1000,
		maxlength_onchange_callback : "myCustomFunction2"
	});
	
	var show_alert2=true;
	
	function myCustomFunction2(len2){
		if(show_alert2){
			show_alert2=false;
			document.getElementById('spaceleft2').value=1000-len2;
			show_alert2=true;
		}
	}
</script>

Voici le code au niveau des champs textarea:

<tr>
    <td class="titre2">&nbsp;</td>
    <td class="titre2">CONTENU PERSONNEL</td>
    <td class="titre3"><label>
    <label><textarea name="contenu_pro" cols="85" rows="20" id="contenu_pro">'.$contenu_pro.'</textarea></label>
    </td>	
							
</tr>
<tr>
    <td class="titre2" colspan="2">&nbsp;</td>
    <td class="titre3">Nb de caractères restant: <input id="spaceleft" size="3" />/2 000</td>
</tr>
<tr>
    <td class="titre2">&nbsp;</td>
    <td class="titre2">HORAIRES</td>
    <td class="titre3"><label>
    <label><textarea name="info_pro" cols="50" rows="10" id="info_pro">'.$info_pro.'</textarea></label></td>								
</tr>
<tr>
    <td class="titre2" colspan="2">&nbsp;</td>
    <td class="titre3">Nb de caractères restant: <input id="spaceleft2" size="3" />/1 000</td>
</tr>

[/php]

par **dimalta5** » 27 janv. 2008, 20:57

La solution est la :

Maxlength Plugin for TinyMCE

Ceci te permettra de limiter facilement la taille du texte dans tinyMCE

JD

par **dread** » 03 janv. 2008, 12:06

Bonjour à tout le monde et meilleurs voeux en cette nouvelle année !!!
Il y a quelque temps, j'étais à la recherche d'un cms qui me peremttrait de mettre en page un textarea. Sur vos conseils j'ai finit par en trouver un et ai adopté tinymce.
Je peux ainsi, depuis un textarea, mettre en forme des paragraphes mais aussi les typos et styles et récupérer les informations pour les stocker dans ma bdd.
Dans le cadre d'un autre de mes sites, j'ai été amené à utiliser un limitateur de caractères pour un textarea.
Mon souci intervient lorsque je veux coupler le gestionnaire cms à mon limitateur de caractère pour un même textarea. En effet, mon compteur de caractère ne veux pas fonctionner.
Je vous donne le code de ma page:

<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
	tinyMCE.init({
		theme : "advanced",
		mode : "exact",
		elements : "contenu_etudiant",
		save_callback : "customSave",
		content_css : "example_advanced.css",
		extended_valid_elements : "a[href|target|name]",
		plugins : "table",
		theme_advanced_buttons3_add_before : "tablecontrols,separator",
		//invalid_elements : "a",
		theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
		//execcommand_callback : "myCustomExecCommandHandler",
		debug : false
	});

	// Custom event handler
	function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
		var linkElm, imageElm, inst;

		switch (command) {
			case "mceLink":
				inst = tinyMCE.getInstanceById(editor_id);
				linkElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");

				if (linkElm)
					alert("Link dialog has been overriden. Found link href: " + tinyMCE.getAttrib(linkElm, "href"));
				else
					alert("Link dialog has been overriden.");

				return true;

			case "mceImage":
				inst = tinyMCE.getInstanceById(editor_id);
				imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");

				if (imageElm)
					alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src"));
				else
					alert("Image dialog has been overriden.");

				return true;
		}

		return false; // Pass to next handler in chain
	}

	// Custom save callback, gets called when the contents is to be submitted
	function customSave(id, content) {
		alert(id + "=" + content);
	}
</script>
<!-- /tinyMCE -->
<!-- limitateur de caractère-->

<script>

var ns6=document.getElementById&&!document.all

function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}

function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0) {
theform.value=theform.value.substring(0,maxlength)
lengthleft=0
}
placeholderobj.innerHTML=lengthleft
}
}


function displaylimit(thename, theid, thelimit){
var theform=theid!=""? document.getElementById(theid) : thename
var limit_text='Nombre de caractères restants : <strong><span id="'+theform.toString()+'">'+thelimit+'</span></strong>'
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeydown=function(){ countlimit(thelimit,event,theform)}
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keydown', function(event) { countlimit(thelimit,event,theform) }, true); 
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true); 
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true); 
}
}

</script>
<!-- fin limitateur de caractère-->
</head>
<body>
<div id="global">
	<div id="fond-titre">
	<a href="admin-ip-index.php">Retour à l'index</a>	</div>
	<div id="contenu">
		<div id="c1"></div>
		<div id="c2">
		<form name="frm_modif" id="frm_modif" action="admin-ip-etudiant-modifier-processor.php?etudiant=<?php echo $row_rs_index['id_etudiant'];?>&langue=<?php echo $row_rs_index['langue_etudiant'];?>" method="post" >
		<table class="formulaire">
			<tr>
				<td class="titre">Titre de la page ETUDIANT en <?php if($_GET['langue']==2) { echo 'fran&ccedil;ais';} elseif($_GET['langue']==1) { echo 'anglais';} elseif($_GET['langue']==4) { echo 'allemand';} elseif($_GET['langue']==3) { echo 'espagnol';}?></td>
			</tr>
			<tr>
				<td><input name="titre_etudiant" id="titre_etudiant" style="width:658px;" value="<?php echo $row_rs_index['titre_etudiant'];?>"/></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td class="titre">Contenu de la page ETUDIANT en <?php if($_GET['langue']==2) { echo 'fran&ccedil;ais';} elseif($_GET['langue']==1) { echo 'anglais';} elseif($_GET['langue']==4) { echo 'allemand';} elseif($_GET['langue']==3) { echo 'espagnol';}?></td>
			</tr>
			<tr>
				<td>
			<textarea name="contenu_etudiant" id="contenu_etudiant2" rows="35" cols="80"><?php echo $row_rs_index['contenu_etudiant'];?></textarea>
				</td>
			</tr>
			<tr>
	   			<td class="compteur" align="right"><script>displaylimit("document.frm_modif.contenu_etudiant2","",2000);</script></td>
	   		</tr>
			<tr>
				<td align="center"><input type="submit" name="Envoyer" id="Envoyer"/></td>
			</tr>
		</table>
		</form>

J'avoue avoir récupéré les deux ensembles et ne pas avoir beaucoup de connaissances concernant le fonctionnement de ces deux scripts. Néanmoins, ils fonctionnent très bien séparemment.
Y a t'il une importance entre le name et l'id du textarea. J'ai essayé d'en attribuer des différents pour tinymce et mon compteur de caractère de même que des identiques mais rien ne fonctionne.
Merci pour votre aide.

CMS + limitateur de caractères

Répondre

Étendre la vue Revue du sujet : CMS + limitateur de caractères

CMS + limitateur de caractères