Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Problema en wysiwyg con javascript

Estas en el tema de Problema en wysiwyg con javascript en el foro de Javascript en Foros del Web. Hola Desde hace un par de años que utilizo el siguiente código javascript para realizar funciones básicas de reemplazo en un textarea. Código: function instag(tag) ...
  #1 (permalink)  
Antiguo 03/11/2017, 03:09
Avatar de ASLAN  
Fecha de Ingreso: septiembre-2007
Mensajes: 419
Antigüedad: 16 años, 6 meses
Puntos: 2
Pregunta Problema en wysiwyg con javascript

Hola
Desde hace un par de años que utilizo el siguiente código javascript para realizar funciones básicas de reemplazo en un textarea.

Código:
function instag(tag) {
    var input = document.form1.text;
    if (typeof document.selection != 'undefined' && document.selection) {
        var str = document.selection.createRange().text;
        input.focus();
        var sel = document.selection.createRange();
        sel.text = "[" + tag + "]" + str + "[/" + tag + "]";
        sel.select();
        return;
    } else if (typeof input.selectionStart != 'undefined') {
        var start = input.selectionStart;
        var end = input.selectionEnd;
        var insText = input.value.substring(start, end);
        input.value = input.value.substr(0, start) + '[' + tag + ']' + insText + '[/' + tag + ']' + input.value.substr(end);
        input.focus();
        input.setSelectionRange(start + 2 + tag.length + insText.length + 3 + tag.length, start + 2 + tag.length + insText.length + 3 + tag.length);
        return;
    } else {
        input.value += ' [' + tag + ']Reemplace este texto[/' + tag + ']';
        return;
    }
}

function geturl(tag) {
    var input = document.form1.text;
    if (typeof document.selection != 'undefined' && document.selection) {
        var str = document.selection.createRange().text;
        input.focus();
        var sel = document.selection.createRange();
        var my_link = prompt("Ingrese la URL:", "http://");
        sel.text = "[" + tag + "]" + my_link + "[/" + tag + "]";
        sel.select();
        return;
    } else if (typeof input.selectionStart != 'undefined') {
        var start = input.selectionStart;
        var end = input.selectionEnd;
        var my_link = prompt("Ingrese la URL:", "http://");
        var insText = input.value.substring(start, end);
        input.value = input.value.substr(0, start) + '[' + tag + ']' + my_link + '[/' + tag + ']' + input.value.substr(end);
        input.focus();
        input.setSelectionRange(start + 2 + tag.length + insText.length + 3 + tag.length, start + 2 + tag.length + insText.length + 3 + tag.length);
        return;
    } else {
        input.value += ' [' + tag + ']Reemplace este texto[/' + tag + ']';
        return;
    }
}

function inslink() {
    var input = document.form1.text;
    if (typeof document.selection != 'undefined' && document.selection) {
        var str = document.selection.createRange().text;
        input.focus();
        var my_link = prompt("Ingrese la URL:", "http://");
        if (my_link != null) {
            if (str.length == 0) {
                str = my_link;
            }
            var sel = document.selection.createRange();
            sel.text = "" + str + "";
            sel.select();
        }
        return;
    } else if (typeof input.selectionStart != 'undefined') {
        var start = input.selectionStart;
        var end = input.selectionEnd;
        var insText = input.value.substring(start, end);
        var my_link = prompt("Ingrese la URL:", "http://");
        if (my_link != null) {
            if (insText.length == 0) {
                insText = my_link;
            }
            input.value = input.value.substr(0, start) + "" + insText + "" + input.value.substr(end);
            input.focus();
            input.setSelectionRange(start + 11 + my_link.length + insText.length + 4, start + 11 + my_link.length + insText.length + 4);
        }
        return;
    } else {
        var my_link = prompt("Ingresar la URL:", "http://");
        var my_text = prompt("Ingresar el texto del link:", "");
        input.value += " " + my_text + "";
        return;
    }
}
Funciona bastante bien, pero cuando el texto excede el tamaño predeterminado del textarea, es decir, aparece la barra de desplazamiento lateral, al hacer el reemplazo (lo hace correctamente) la vista se va al final del textarea y se pierde de vista el reemplazo, que es justo donde uno está trabajando, lo que resulta muy incómodo.

Me explico, al aparecer scrollbar (mucho texto), el reemplazo lo hace correctamente, incluso deja el cursor donde corresponde, PERO la posición del scrollbar se va al final, perdiendo de vista el cursor.

Alguna idea de cómo resolverlo?

Dejo un página web con una demo operativa
La idea es que agreguen mucho texto, hasta que exceda el límite predeterminado y luego suban y hagan un reemplazo cualquiera, para que vean lo que sucede
http://www.academiaholistica.com/ejemplo.html

Gracias
__________________
Registros Akáshicos

Última edición por ASLAN; 03/11/2017 a las 03:55
  #2 (permalink)  
Antiguo 03/11/2017, 07:43
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema en wysiwyg con javascript

Y si le das scrollbar predeterminado para revisar?

overflow: scroll;

En todo caso a mi me funciona bien

Última edición por alvaro_trewhela; 03/11/2017 a las 07:54
  #3 (permalink)  
Antiguo 03/11/2017, 08:14
Avatar de ASLAN  
Fecha de Ingreso: septiembre-2007
Mensajes: 419
Antigüedad: 16 años, 6 meses
Puntos: 2
Respuesta: Problema en wysiwyg con javascript

Cita:
Iniciado por alvaro_trewhela Ver Mensaje
Y si le das scrollbar predeterminado para revisar?

overflow: scroll;

En todo caso a mi me funciona bien
Gracias por comentar
Agregaste suficiente texto para que aparezca la scrollbar, antes de probar?
Si es así, qué browser usaste?
__________________
Registros Akáshicos
  #4 (permalink)  
Antiguo 03/11/2017, 08:28
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema en wysiwyg con javascript

Use FF, te dejo un screen



En todo caso, vi tu codigo y estas estableciendo valores absolutos de dimension para el textarea, te recomiendo quitar el resizable (poder cambiar tamaño al textarea)

resize: none;
  #5 (permalink)  
Antiguo 03/11/2017, 09:10
Avatar de ASLAN  
Fecha de Ingreso: septiembre-2007
Mensajes: 419
Antigüedad: 16 años, 6 meses
Puntos: 2
Respuesta: Problema en wysiwyg con javascript

De hecho lo estoy resolviendo redimensionando el textarea a medida que agrego texto
De este modo: http://www.academiaholistica.com/ejemplo2.html

De todos modos seguiré intentando resolver el problema
Gracias
__________________
Registros Akáshicos
  #6 (permalink)  
Antiguo 03/11/2017, 09:21
Avatar de ASLAN  
Fecha de Ingreso: septiembre-2007
Mensajes: 419
Antigüedad: 16 años, 6 meses
Puntos: 2
Respuesta: Problema en wysiwyg con javascript

SOLUCIONADO:

En un grupo de Facebook me indicaron que el problema lo genera input.focus();
Al eliminar ese código en las 3 funciones el problema se soluciona
Gracias
__________________
Registros Akáshicos
  #7 (permalink)  
Antiguo 03/11/2017, 09:37
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Problema en wysiwyg con javascript

Genial, disculpa por no haber podido ayudar, pero no me apareció ese error tuyo.

Etiquetas: textarea, wysiwyg
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:57.