2

Estoy haciendo un editor de texto para un proyecto, al principio, comencé utilizando un TextArea como la hoja en la que podría escribir el usuario y pude resolver algunos problemas gracias a esta pregunta hecha aquí mismo por otro usuario. Procesar el texto seleccionado de un área de texto en Javascript
Pero como un textarea es limitado para lo que quiero hacer o para la forma en la que lo quería hacer. Averigüé más y pues se puede hacer un DIV editable, pero a diferencia de un textarea, este no tiene las propiedad "selectionStart" y "selectionEnd". Entonces ¿cómo podría procesar el texto seleccionado dentro de un div?¿Cuáles serían las propiedades alternativas?

Aquí algo del código que intenta hacer eso:
La etiqueta que llama a la función:

select id="Tamaño" onchange="cambiarTamaño()"> <br>
    option value="h1">Título</option> <br>
    option value="h2">Subtítulo</option> <br>
    option value="p">Normal</option> <br>
select> <br><br>

La función:

/* Se encarga de cambiar el tamaño de la fuente */  
function cambiarTamaño()  
{  
    //Obtine la opción seleccionada  
    var opcionSeleccionada = document.getElementById("Tamaño");

    //Obtiene el area de texto
    var hoja = document.getElementById("Hoja");

    //Texto que contiene
    var texto = window.getSelection().toString();

    //Le encimo la etiqueta que quiero
    texto = "<" + opcionSeleccionada.value + ">" + texto + "</" + opcionSeleccionada.value + ">";

    hoja.innerHTML = texto;
}

1 respuesta 1

1

Una opción sería emplear el método getSelection del objeto Window o getSelection() de la interfaz document. Para validar y obtener la selección del contenido en el div. Antes de esto , debemos escuchar los eventos mouseup ,keyup y touchend del div. (para el ejemplo además se ejecutó el comando para señalar en negrita el texto seleccionado)

var hoja = document.getElementById('Hoja');
['mouseup', 'keyup','touchend'].forEach(function(e){
	hoja.addEventListener(e,fnSeleccion,false);
});

function fnSeleccion() {
	var selection;  
  if (window.getSelection) {
    selection = window.getSelection();
  } else if (document.selection) {
    selection = document.selection.createRange();
  }
  if(selection.toString()!==''){
  	document.execCommand('bold');//Negrita el texto Seleccionado
  	console.log(selection.toString());
  }
}
<div id="Hoja" contenteditable="true">
  Hola Mundo
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.