Comunidad de diseño web y desarrollo en internet online

Seleccionar texto de la pagina y dajerlo marcado

Citar            
MensajeEscrito el 22 Oct 2010 05:15 am
Hola, el problema que tengo es relacionado con seleccionar texto en una región determinada, dígase un div.
Este texto cuando se seleccione se puede pintar de un color, parecido a como se hace en el office o en el open office: marcas un texto y seleccionar resaltado de texto y ya esta.

Pues eso es lo que quiero lograr, que el usuario pueda resaltar el texto que a su juicio es importante.
He encontrado códigos pero la mayoría relacionados con "textareas", editores casi todos, pero no me resuelve el problema.

Saludos y gracias de antemano.

Por hemingway

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Dic 2010 05:28 pm
Hola people, he logrado algo en Mozilla, el problemático ahora es Internet Explorer, de este solo me interesa a partir de la versión 7.
Aquí dejo el código para el buen Mozilla, si ven alguna variante mejor o algo para el IE se los agradecería.

function getTextSelection() {
if(document.selection)
return document.selection;
else if(window.getSelection)
return window.getSelection();
else if(document.getSelection)
return document.getSelection();
else
return false;
}
function getSelectionRange() {
var selection = getTextSelection();
if(selection.getRangeAt)
return selection.getRangeAt(0);
else if (selection.createRange)
return selection.createRange();
else
return false;
}
function getSelectionParent(r) {
if(r.parentElement)//IE
return r.parentElement();
else if(r.commonAncestorContainer)//MOZ
return r.commonAncestorContainer;
else
return false;
}

function SplitNode(node, begin, end){
if(parseInt(begin)!=-1){
var spannode = document.createElement('span');
spannode.className='highlight';
var middlebit = node.splitText(begin);
if(parseInt(end)==-1){
end=middlebit.nodeValue.length;
}
var endbit = middlebit.splitText(end);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
if(spannode.innerHTML!='')
middlebit.parentNode.replaceChild(spannode, middlebit);
}else{//nodo completo
var copia = node.cloneNode(false);
var spannode = document.createElement('span');
spannode.className='highlight';
spannode.innerHTML=node.innerHTML;
copia.appendChild(spannode);
node.parentNode.replaceChild(copia, node);
}
}

function CrearSpanMO(hijos){
inicio=getTextSelection().anchorOffset;
fin=getTextSelection().focusOffset;
for(i=0;i<hijos.length;i++)
{
/*
var contenido=getTextSelection().createRange();
//alert(contenido)
var temp=document.body.createTextRange();
//var span=document.getElementById('222');
//alert(hijos[i].childNodes.length)
temp.moveToElementText(hijos[i]);
alert(hijos[i].childNodes[0].nodeType)
alert(contenido.inRange(temp))
if(contenido.inRange(temp))
SplitNode(hijos[i].childNodes[0], 0, -1, conf_selection)
*/
if(!(((hijos[i].nodeType == 3 && !/\S/.test(hijos[i].nodeValue)))||(hijos[i].nodeType==8))||!(((hijos[i].nodeType == 3 && !/\n/.test(hijos[i].nodeValue)))||(hijos[i].nodeType==8)))//(hijos[i].innerHTML)||(hijos[i].nodeType==3&&ComprobarSaltos(hijos[i].nodeValue)))
{
var es_nodo_inicio=getTextSelection().anchorNode==hijos[i];
var es_nodo_fin=getTextSelection().focusNode==hijos[i];
if(getTextSelection().containsNode(hijos[i], false) && !es_nodo_inicio && !es_nodo_fin && hijos[i].className!='highlight')//devuelve true si el nodo completo esta en la seleccion
{
//alert('completo');
if(hijos[i].nodeType==3){
SplitNode(hijos[i], 0, -1, conf_selection);
}
else
{
if(!(hijos[i].childNodes.length==1 && hijos[i].childNodes[0].className=='highlight')){
SplitNode(hijos[i], -1, -1, conf_selection);
}
}
}
else if(getTextSelection().containsNode(hijos[i], true))//devuelve true si una parte del nodo esta en la seleccion
{
//alert('es una parte');
if(es_nodo_inicio&&es_nodo_fin){
//alert('es el nodo inicio y fin')
SplitNode(hijos[i], inicio, fin-inicio, conf_selection);
}
else if(es_nodo_inicio){
//alert('es el nodo de inicio');
SplitNode(hijos[i], inicio, -1, conf_selection);
}
else if(es_nodo_fin){
//alert('es el nodo de fin');
SplitNode(hijos[i], 0, fin, conf_selection);
}
else{
//agregar hijos
var y=hijos.length;
for(x=0;x<hijos[i].childNodes.length;x++)
{
if(!(hijos[i].className) || hijos[i].className!='highlight'){
hijos[hijos.length]=hijos[i].childNodes[x];
y++;
}
}
}
}
}
}
}

function Marcar()
{
var padre=getSelectionParent(getSelectionRange());
//var hijos=padre.childNodes;
var array_hijos=new Array();
array_hijos[0]=padre;
if(document.selection)
CrearSpanIE(array_hijos);
else if(window.getSelection)
CrearSpanMO(array_hijos);
}

Por hemingway

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Dic 2010 03:48 pm
Seleccionar texto en IE y dejarlo marcado, ahora si.!!!
Bueno acabo de hacer esta funcion para IE, solo debemos llamarla si detectamos este navegador, alguna sugerencia me vendría de ayuda, Saludos.

Código Javascript :

function CrearSpanIE(hijos){
                var contenido=getTextSelection().createRange();
                if ((contenido != null) && (contenido.text.length > 0)){
                    var conf_selection=new Array();                    
                    var temp=0;                   
                    var rango_temp=document.body.createTextRange();                    
                    rango_temp.moveToElementText(hijos[0]);
                    rango_temp.setEndPoint( 'EndToEnd', contenido );
                    var start = rango_temp.text.length - contenido.text.length;
                    var end = start + contenido.text.length;                    

                    for(i=0;i<hijos.length;i++)
                    {                        
                        contenido=getTextSelection().createRange();                        
                        if(hijos[i].nodeType==1){//alert('tipo 1')
                            var rango_temp2=document.body.createTextRange();
                            rango_temp2.moveToElementText(hijos[i]);
                            if(rango_temp2.text.length>0 &&(!(hijos[i].className) || hijos[i].className!='highlight')){
                                if(contenido.compareEndPoints('StartToStart',rango_temp2)<1 && contenido.compareEndPoints('EndToEnd',rango_temp2)>-1){
                                    //alert('completo')
                                    temp=temp+rango_temp2.text.length;
                                    SplitNode(hijos[i], -1, -1, conf_selection);
                                }
                                else{//annado los hijos en la posicion donde esta el padre en el arreglo para no alterar el orden
                                    var array_temp=new Array();
                                    array_temp=hijos.slice(0,i);
                                    lon=hijos[i].childNodes.length;
                                    for(pp=0;pp<lon;pp++){
                                        array_temp[array_temp.length]=hijos[i].childNodes[pp];
                                    }
                                    if(i+1<hijos.length)
                                        array_temp=array_temp.concat(hijos.slice(i+1,hijos.length));
                                    if(lon>0)
                                        i--;
                                    hijos=array_temp;
                                    rango_temp2.setEndPoint( 'EndToEnd', contenido );
                                    temp=contenido.text.length+start-rango_temp2.text.length;
                                }
                            }else
                                temp=parseInt(temp)+parseInt(rango_temp2.text.length);
                        }
                        else if(!((hijos[i].nodeType == 3 && !/\S/.test(hijos[i].nodeValue))||(hijos[i].nodeType==8))){//alert('tipo 3')
                            if(temp+hijos[i].length>start&&temp<=start&&temp+hijos[i].length>=end&&temp<end)
                            {
                                //alert('es nodo inicio-fin')
                                inicio=start-temp;
                                fin=end-temp-inicio;
                                SplitNode(hijos[i], inicio, fin, conf_selection);
                                break;
                            }else if(temp+hijos[i].length>start&&temp<=start)
                            {
                                //alert('es nodo inicio')
                                inicio=start-temp;
                                temp=temp+hijos[i].length;
                                SplitNode(hijos[i], inicio, hijos[i].length-inicio, conf_selection);
                            }else if(temp+hijos[i].length>=end&&temp<end)
                            {
                                //alert('es nodo fin')
                                fin=end-temp;
                                SplitNode(hijos[i], 0, fin, conf_selection);
                                break;
                            }else if(temp>start&&temp+hijos[i].length<end){
                                //alert('es nodo texto entero')
                                temp=temp+hijos[i].length;
                                SplitNode(hijos[i], 0, hijos[i].length, conf_selection);
                            }else
                                temp=temp+hijos[i].length;
                        }
                    }
                    selections[cant_selections]=conf_selection;
                    cant_selections++;
                    return;
                }
            }

Por hemingway

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Mar 2011 05:59 am
Como pueden ver, esta funcionalidad puede ser usada para sitios educativos interactivos, pudiéndose guardar la configuración de estas selecciones, que es el caso mío, para luego mostrar cada una de estas, estilo documento word.
He hecho algunas modificaciones a estos códigos, si alguien está interesado me puede escribir a mi correo([email protected]), o formular su pregunta aquí. Saludos.

Por hemingway

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Mar 2011 10:59 am
Publica un tutorial aquí mismo en Cristalab :D

Por DriverOp

Claber

2510 de clabLevel



 

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.