Aller au contenu

TinyMCE : Retrouver le focus au bon endroit sur IE

captain_torche

Par captain_torche
dans AjaX et JavaScript

 Partager

Sujets conseillés

captain_torche

captain_torche

Posté
Posté

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 ?

tinymce.png

Portekoi

Portekoi

Posté
Posté

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

captain_torche

Posté
  • Auteur
Posté

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

Portekoi

Posté
Posté

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

Dadou

Dadou

Posté
Posté

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 :

<!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érer une application prédé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érer une application prédé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è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 ;)

captain_torche

captain_torche

Posté
  • Auteur
Posté

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 :

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.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...