Version complète: sur le forum Webmaster Hub : TinyMCE : Retrouver le focus au bon endroit sur IE
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > AjaX et JavaScript
captain_torche
Salut à tous !
Je vous explique le souci :
J'utilise tinyMCE pour la création de contenus multimédia (C'est à ce jour le seul éditeur qui m'ait semblé correspondre à mes attentes).
J'ai créé un bouton supplémentaire, personnalisé, qui affiche une pseudo pop-up en ajax, contenant un formulaire. En entrant du texte dans le champ qui apparaît, on effectue une recherche sur la base. En cliquant sur un des résultats, il est ajouté dans l'éditeur principal.

Ça marche très bien sous Firefox et Opera, mais sous IE, le simple fait de cliquer dans le champ input fait perdre le focus de l'éditeur. Ce qui fait que lorsque je clique dans un des résultats de la recherche, il s'affiche automatiquement en début de texte, quel que soit l'emplacement où était mon curseur auparavant.

Existerait-il un moyen de contourner ce souci sous IE ?

Portekoi
Bonjour,

J'ai pas tout capté mais un simple :

mon_champs.value = mon_champs.value + ' ' + new_champs.value

Ne suffirait il pas?


Portekoi
captain_torche
Ce n'est pas aussi simple : il faudrait que je puisse coller en plein milieu de l'éditeur également.
Je me demande si c'est possible de récupérer la position du curseur dans ce genre d'éditeur.
Portekoi
Oui, regarde sur ce forum par exemple. Quand tu ajoutes un smiley, il prend bien la position du curseur. Y a pas raison que cela ne puisse pas marcher avec Tiny
captain_torche
En fait, le souci c'est que je "vole" le focus avec le champ input. IE n'arrive plus à se recaler au bon endroit après coup. Sans ce champ, tout se passe à merveille.
captain_torche
Bon, n'ayant pas eu de réponse sur le forum officiel, je pense que je vais passer par la création d'un "vrai" pop-up spécifiquement pour IE.
Dadou
Excuse moi captain_torche, je n'ai pas lu le post avant, et comme je suis en train de bosser sur Tiny en ce moment, je peux éventuellement te donner un coup de main.

Pour effectuer la "popup" de tiny je me suis basé sur la popup d'insertion d'image, et tout fonctionne comme il faut

Voila une partie de mon code :

CODE-BOX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ins&eacute;rer une application pr&eacute;d&eacute;finie</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="../../utils/form_utils.js"></script>
<script type="text/javascript" src="../../utils/validate.js"></script>
<base target="_self" />
</head>
<body id="applications" style="display:none">
<div class="tabs">
<ul>
<li id="general_tab" class="current"><span>Ins&eacute;rer une application pr&eacute;d&eacute;finie</span></li>
</ul>
</div>

<div class="panel_wrapper" style="height:175px;">
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" class="title">Choississez l'application</td>
</tr>
<tr>
<td nowrap="nowrap">Application :</td>
<td><select id="appli" name="appli" style="width: 200px;" onchange="paramsApplications();" >
<option value=""></option>
<?php
// Liste ma liste d'applications
foreach ($apps as $key=>$value)
{
?>
<option value="<?=$value->tag?>"><?=utf8_encode($value->nom)?></option>
<?php } ?></select><input type="hidden" id="parametres" name="parametres" value="" /></td>
</tr>
</table>
<script type="text/javascript">
tinyMCEPopup.requireLangPack();

tinyMCEPopup.onInit.add(function() {
//tinyMCEPopup.dom.setHTML('applicationsView', renderapplicationsHTML());
});

function clearParam()
{
var parametres = document.getElementById('parametres');
parametres.value= '';
}

function insertApplications() {
var content = document.getElementById('appli');
var parametres = document.getElementById('parametres');

content = '[' + content.value + parametres.value + ']';
tinyMCEPopup.execCommand('mceInsertContent', false, content);

// Refocus in window
if (tinyMCEPopup.isWindow)
window.focus();

tinyMCEPopup.editor.focus();
tinyMCEPopup.close();
}

var liste_app = new Array;
var i=0;
<?php
foreach ($apps as $key=>$value)
{
?>
liste_app[i] = '<?=$value->tag?>';
i++;
<?php
}
?>

function paramsApplications()
{
var content = document.getElementById('appli').value;
for(i=0;i<liste_app.length;i++)
{
document.getElementById(liste_app[i]).style.display = 'none';
}
document.getElementById(content).style.display = 'block';
clearParam();
}
</script>
<?php
foreach ($apps as $key=>$value)
{
?>
<div id="<?=$value->tag?>" style="display:none;">
<p class="title">Param&egrave;tres de l'application <?=utf8_encode($value->nom)?></p>

<?php
//
require_once(CORE."2bo/appli/".$value->fichier_ctl.".php");
include(VIEW_BO."appli/".$value->fichier_tpl.".php");
?>
</div>
<?php
}
?>

</div>

<div class="mceActionPanel">
<div style="float: left"><input type="submit" id="insert" name="insert" value="{#insert}" onclick="insertApplications();"/></div>
<div style="float: right"><input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" /></div>
</div>
</body>
</html>


Si cela peut t'aider wink.gif
captain_torche
En fait, je viens de recevoir une réponse sur le forum officiel : http://tinymce.moxiecode.com/punbb/viewtop...id=42071#p42071
Elle dit en gros :
CITATION(spocke - développeur principal de TinyMCE)
Il s'agit d'un bug d'IE qui n'autorise qu'un curseur par page. Vous pouvez utiliser les fonctions selection.getBookmark et selection.moveToBookmark pour résoudre ce problème

Je vais tester ça ce soir, mais en théorie il s'agit exactement de ce que je comptais faire.
captain_torche
Bon, après quelques tests, ça fonctionne parfaitement wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.