Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » selección con datos innerhtml

JavaScript - selección con datos innerhtml

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 62
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

selección con datos innerhtml

Publicado por pedro (72 intervenciones) el 18/04/2020 19:41:58
Buenas tardes:
Tengo un div contenteditable="true" y me interesa obtener el texto seleccionado e introducir código delante y detrás.

Lo he hecho con esta función:

1
2
3
4
5
6
function select() {
    var selObj = window.getSelection();
    return(selObj);
    var selRange = selObj.getRangeAt(0);
    // do stuff with the range
}

Funciona, pero no me mantiene el código html. es decir, realiza una selección sólo de texto.

¿hay alguna función parecida pero que me devuelva el texto con sus etiquetas html?

Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 62
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

selección con datos innerhtml

Publicado por pedro (72 intervenciones) el 18/04/2020 20:19:32
Lo que hago después es un :

1
document.execCommand("InsertHTML",false, orden);

donde orden contiene el texto que quiero y una parte intermedia que sustituyo por selección. Lo que me interesa es que esa selección mantenga el código html.

No se si hay otra orden que lo haga directamente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

selección con datos innerhtml

Publicado por ScriptShow (692 intervenciones) el 19/04/2020 13:51:23
Saludos,

observo que entiendes el manejo del código... Te envío algunos enlaces relacionados por si te sirven los contenidos adaptando partes del código:

https://www.lawebdelprogramador.com/codigo/JavaScript/4006-Editor-de-Texto-por-secciones-etiquetas.html

https://www.lawebdelprogramador.com/codigo/JavaScript/3803-Editor-de-texto-con-opciones-basicas.html

Con una lista de comandos y/o instrucciones posibles:

https://www.lawebdelprogramador.com/codigo/JavaScript/3283-Crear-un-editor-WYSIWYG.html

Un ejemplo muy simple:

1
2
3
4
5
6
7
<div id="test" onclick="getHTML()"><p>Este párrafo contiene espacios    y etiquetas</p><span>como las de este texto...</span> Etc...</div>
 
<script>
function getHTML() {
confirm(document.getElementById("test").innerHTML)
}
</script>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 62
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

selección con datos innerhtml

Publicado por pedro (72 intervenciones) el 19/04/2020 20:32:52
Buenas tardes Scriptshow.
Ante todo gracias por contestar.

Te muestro mi código y lo que me interesa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
 
<script>
function select() {
    var selObj = window.getSelection();
    return(selObj);
    var selRange = selObj.getRangeAt(0);
    // do stuff with the range
}
 
function insertar(){
    var sel=select();alert(sel);
    var orden='<math xmlns="http://www.w3.org/1998/Math/MathML"><munder><munder><mi> <<a>> </mi><mo>&#x23DF;</mo></munder><mi>b</mi></munder></math>';
    var orden=orden.replace("<<a>>",sel);
    document.execCommand("InsertHTML",false, orden);
}
 
</script>
 
<body>
<div contenteditable="true">Este es un texto de prueba para utilizar el botón underbrace</div>
<br>
<button onclick="insertar()">underbrace</button>
 
</body>
</html>

Este es el código. Cuando uso el botón varias veces funciona si voy de más a menos.

Sin embargo, al coger una parte que ya tiene una llave, no coge bien el código. Si no me equivoco, es debido a que toma la selección del código sin la información html.

Lo que quiero es que haga lo mismo, pero que lo haga también si cojo (por ejemplo) dos partes que ya tienen llaves, que les ponga otra llave debajo.

Lo que he pensado es tomar el texto, poner una marca en el texto seleccionado y con esas dos cadenas, comparando, generar mi cadena nueva, para después introducirla en el div.

El problema es que pierdo la opción de deshacer que ahora puedo aplicar al hacer algo mal. Tendría que guardar la cadena inicial en una variable. Pero no podría deshacer más pasos, cosa que sí me permite la función inserthtml.

Por eso creo que la mejor opción sería obtener el texto seleccionado completo (como cuando se hace un innerHTML) y hacer el mismo proceso que en el código que he puesto.

Lo que no se hacer es obtener la selección de esa forma.

Gracias de nuevo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar