Ayer hice una pregunta, y fue motivada por este código.
Es un minieditor parecido a este de foros del web. Fui cogiendo recortes
de la FAQ de Javascript, y del código de vbulletin.
Pongo el código abajo, pero si da problemas, podéis ver el e
ejemplo online ejemplo
El script funciona tiene el comportamiento que espero en Firefox 1.03
(falta quitar el bbcode si lo tiene el texto seleccinado.)
La función que falla es getSel, en el explorer. Esta función debe hacer:
pretext=capturar el texto antes de la seleccion,
addtext=capturar el texto seleccionado
fintext=capturar el texto después de la selección
añadir etiquetas a addtext
borrar todo
concatenar: pretext+addtext+fintext
mostrar
Lo que veo y motivaba mi pregunta, es que hay tres formas
de captura el texto seleccionado en un textarea o en la página,
el script detecta que método usa con setencias if:
// basados Mozilla
if (window.getSelection() )
// ¿Explorer?
if (document.getSelection)
¿¿¿¿¿¿¿¿¿¿????????????
if (document.selection) <------ ¿qué navegador sería este -->
¿Y como adapto el código de mozilla a ie?
¿Cual sería la manera estandar?
P.D.: [cita ] ha sido cambiado para no interferir con el bbcode. El
ejemplo online si funciona.
Código:
<?php
?>
<HTML>
<HEAD>
<style>
a.editor:link {
color: black;
text-decoration: none;
}
a.editor:visited {
color: black
text-decoration: none;
}
a.editor:hover {
color: #cc0000;
}
</style>
</HEAD>
<BODY>
<!--<script src="js/vbulletin_stdedit.js"></script>-->
<SCRIPT language="Javascript" type="text/javascript">
// Captura la selección, y añade las etiquetas.
function getSel(ini_etiqueta,fin_etiquita)
{
var txt = '';
var foundIn = '';
editor=document.getElementById('editor');
// Si mozilla o firefox.
if (window.getSelection)
{
ini=editor.mensaje.selectionStart;
fin=editor.mensaje.selectionEnd;
pretext=editor.mensaje.value.substring (0,ini);
addtext=ini_etiqueta+editor.mensaje.value.substring (ini,fin)+fin_etiqueta;
fintext=editor.mensaje.value.substring (fin, editor.mensaje.value.length);
//foundIn = 'window.getSelection()';
final_text=pretext+addtext+fintext;
editor.mensaje.value='';
editor.mensaje.value=final_text;
return final_text;
}
// If ie
else if (document.getSelection)
{
// Este código no funciona en Ie
ini=editor.mensaje.selectionStart;
fin=editor.mensaje.selectionEnd;
alert (editor.mensaje.selectedtext.value);
pretext=editor.mensaje.value.substring (0,ini);
addtext=ini_etiqueta+editor.mensaje.value.substring (ini,fin)+fin_etiqueta;
fintext=editor.mensaje.value.substring (fin, editor.mensaje.value.length);
//foundIn = 'window.getSelection()';
final_text=pretext+addtext+fintext;
editor.mensaje.value='';
editor.mensaje.value=final_text;
return final_text;
}
else if (document.selection)
{
;
}
else return;
// document.forms[0].selectedtext.value = 'Found in: ' + foundIn + '\n' + txt;
}
// Este genial Script fue desarrollado por Tukzone, SirMatrix y Unknow,
// todos usuarios del Foro.. Gracias a ellos por su colaboración
function storeCaret(text) {
if (text.createTextRange) {
text.caretPos = document.selection.createRange().duplicate();
}
}
function meter(text) {
var postopic = document.editor.mensaje;
if (postopic.createTextRange && postopic.caretPos) {
var caretPos = postopic.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else postopic.value += text;
postopic.focus(caretPos)
}
function codigo(accion) {
switch(accion) {
case "url":
url=prompt ('Introduzca dirección','http://');
ini_etiqueta='[a href=\"'+url+'\"]';
fin_etiqueta='[/a]'
break;
case "bold":
ini_etiqueta='';
fin_etiqueta=''
break;
case "italics":
ini_etiqueta='';
fin_etiqueta=''
break;
case "quote":
ini_etiqueta='[quota]';
fin_etiqueta='[/quota]';
break;
case "underlayed":
ini_etiqueta='';
fin_etiqueta='';
break;
default:
break;
}
getSel(ini_etiqueta,fin_etiqueta);
}
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}
</script>
<form name="editor" id="editor" method="post">
<div style="padding: 15px;background-color: #efebdf; width: 500px">
<a class="editor" href="javascript:codigo('bold')"><b>N</b></a>
<a class="editor" href="javascript:codigo('italics')"><i>I</i></a>
<a class="editor" href="javascript:codigo('underlayed')"><u>U</u></a>
<span style="margin-left: 255px;">
<a class="editor" href="javascript:codigo('url')">Enlace</a>
<!--<a class="editor" href="javascript:codigo('code')">codigo</a>-->
<a class="editor" href="javascript:codigo('quote')">Citar</a>
</span>
<br />
<textarea name="mensaje" id="mensaje"
onKeyDown="textCounter(this.form.mensaje,this.form.remLen,600,0);"
onKeyUp="javascript:storeCaret(this);
textCounter(this.form.mensaje,this.form.remLen,600, 0);"
onchange="javascript:storeCaret(this));"
onclick="javascript:storeCaret(this);" rows="10" wrap="physical" cols="45">
<?echo $_POST['mensaje'];?></textarea><br />
Tiene
<input readonly type=text name=remLen size=5 maxlength=3 value="600">
caracteres para su mensaje.<br />
<input type="reset" value="Borra todo" />
<input type="submit" value="Previsualizar" />
</div>
</form>
</BODY>
</HTML>
<?
// definimos nuestras etiquetas
$bb_code = array(
// emoticonos: debéis apuntar a vuestras imágenes en el código HTML
':)' => '<img src="feliz.gif" />',
':(' => '<img src="triste.gif" />',
':D' => '<img src="contento.gif" />',
// letra negrita
'' => '<span style="font-weight:bold">',
'' => '</span>',
// letra cursiva
'' => '<span style="font-style:italic">', '' => '</span>',
// letra subrayada
'' => '<span style="text-decoration:underline">',
'' => '</span>',
// salto de línea
'[salto]' => '<br><br>',
// Cita
'[quota]'=>'<cite>',
'[/quota]'=>'</cite>',
// imagenes
'[imagen]' => '<img src="',
'[/imagen]' => '" />',
// Enlace
'[a'=>'<a',
'"]'=>'">',
'[/a]'=>'</a>'
// recordad que después del último elemento no hay coma
);
$mensaje=
//$mensaje=htmlentities($mensaje);
$mensaje=strip_tags($mensaje);
$mensaje=nl2br($mensaje);
// Reemplazamos el BBCode por código HTML y lo mostramos en la página
echo '<p style="width: 500px; padding: 15px; border: 1px solid black">'.reemplazar( $mensaje ).'</p>';
// Incluimos la función para reemplazar el código
function reemplazar( $codigo )
{
$search = array_keys( $GLOBALS['bb_code'] );
$codigo = str_replace( $search, $GLOBALS['bb_code'], $codigo );
return $codigo;
}
?>
