Resalta/selecciona varios divs con rangos w/contentable?

Question

Digamos que tengo un conjunto de contenteditable="true" divs.

<div id="0" contenteditable="true"></div> 
<div id="1" contenteditable..></div> 
<div...etc></div> 

no puedo tener un div, varias Div es una necesidad. ¿Cómo podría destacar el contenido de más de un div? ¿Usando rangos? ¿Algo más?

Answer 1

La respuesta es que depende del navegador. Vea this example para una prueba de dos métodos usando rangos. El primer intento de crear un rango por editable <div> y agregarlos a la selección. El segundo intenta crear un único rango que abarque los contenidos de dos editables <div> s.

Resultados:

• En todos los navegadores, es imposible para el usuario para crear una selección que vive en más de un elemento editable;
• Firefox es el más permisivo de los principales navegadores. Ambos métodos programáticos funcionan.
• Safari y Chrome son los menos permisivos: ninguno de los métodos selecciona contenido de más de un elemento editable.
• Opera 11 no admite rangos múltiples en la selección, pero admite un rango seleccionado que abarca más de un elemento editable.
• La versión pre-versión 9 de IE no admite el rango DOM o la misma API Selection como otros navegadores, pero el código TextRange equivalente no permite la selección de más de un elemento editable.

Answer 2

Es posible cambiar los divs a contenteditable="false" sobre la marcha como consecuencia de iniciar una selección en uno de ellos. Algo como esto le da la idea (usando jQuery):

$('div').bind("selectstart", function() { 
    $('div').attr("contenteditable", false); 
});​ 

Here's a fiddle to demonstrate (solamente probado en Chrome).

Tenga en cuenta, en el ejemplo del violín, que la primera Diviva ContentEditable obtiene el foco. Esto te permite tipear como siempre, pero tan pronto como selecciones algo, usando el mouse o el teclado, verás que puedes extender la selección a través de divs como de costumbre.

Esto, obviamente, tiene que completarse para funcionar con varios navegadores y volver al contenteditable="true" de forma adecuada. Pero creo que el enfoque es válido.