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ç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> </td>
</tr>
<tr>
<td class="titre">Contenu de la page ETUDIANT en <?php if($_GET['langue']==2) { echo 'franç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>
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.