6

Imagem do texto normal:

inserir a descrição da imagem aqui

Imagem do texto selecionado: inserir a descrição da imagem aqui

Obs: Pretendo formatar melhor a seleção, mas no caso o que estou precisando é reverter o processo através do método cancelar:

Quando não existe um parágrafo no meio eu simplesmente faço assim para remover a seleção:

<p> texto aqui <span data-id="15621658090031467d481" [demais atributos...]>parte selecionada</span> fim do texto</p>

$('[data-id="15621658090031467d481"]').contents().unwrap();

Mas no caso do parágrafo, o método separa o texto fechando o parágrafo anterior e o próximo. Criando um pacote conforme o exemplo abaixo:

 <p>
      <strong>Gasolina, tomate e remédios foram os vilões do mês</strong></p
      <p>Já os principais impactos individuais no mês, segundo o IBGE, vieram das altas da&nbsp;gasolina (2,66%), tomate (28,64%) e dos remédios (2,25%), refletindo este último o reajuste anual, em vigor desde 31 de março, co
    </p>

     <span class="color with-paragraph hightcolor-3 ng-scope" data-id="15621658090031467d481" id="mark_15621658090031467d481" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3" style="z-index: 3" data-selection="2" data-category="">

             <span class="paragraph color hightcolor-3" data-id="15621658090031467d481" id="mark_15621658090031467d481" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3" style="z-index: 3" data-selection="2" data-category="">

                  <p>m teto de 4,33%.</p>

             </span>

             <span class="paragraph color hightcolor-3" data-id="15621658090031467d481" id="mark_15621658090031467d481" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3" style="z-index: 3" data-selection="2" data-category="">

                   <p>Outros destaqu</p>
             </span>


           <i class="tabs tab-3"></i>
     </span>

     <p>es de alta no mês foram&nbsp;passagem aérea (5,32%), ônibus urbano (0,74%) e plano de saúde (0,80%). wqerqwrqwrqwr gfsd sdgsdgs</p>

No caso, como eu poderia reverter isso, mantendo a formatação do parágrafo original?

Método que faz o cancelamento (porém não está rodando da forma que eu queria):

function cancel(id) {

 var $el = $('[data-id="' + id + '"]');

    if ($el.hasClass('with-paragraph-'+id)) {
       var $current = [], j = 0;

       $el.children('span.paragraph p')
           .each(function(i, val){
               $current[i] = val;
               j++;
           });

       var $current_1 = $current[0],
           $current_2 = $current[1];

       for (var i=0; i < $el.children('span.paragraph p').length; i++) {
           if (i != $el.children('span.paragraph p').length - 1) {
               var $prev =  $el.parent().find('.with-paragraph-'+id).prev();
               // $prev.attr('id', 'prev_'+id);
               $($prev).html($($prev).html() + $($current_1).html())
           } else {
               var $next = $el.parent().find('.with-paragraph-'+id).next();
               // $next.attr('id', 'next_'+id);
               $($next).html($($current_2).html() + $($next).html())
           }
       }

       $el.remove();
    } else {
       $el.contents().unwrap();
    }
}

Fiddle de exemplo

Aqui funciona, porém só faz qua 2 parágrafos, preciso que seja para todos os parágrafos

Este é um exemplo quando seleciono o texto, fazendo a marca

Este exemplo está mais próximo do que preciso (porém ainda dá problemas)

2
  • Poderia colocar o seu exemplo como código executável na pergunta? Assim acho que se conseguia entender melhor. Commented 3/07/2019 às 15:22
  • Ok, vou colocar... Commented 3/07/2019 às 15:42

1 Resposta 1

1

Eu não tenho certeza se entendi corretamente (porque precisas do span externo ao redor dos parágrafos se a cor pode ser definida pelos spans internos?), mas acho que o código abaixo resolve o teu problema:

$('span.with-paragraph span').contents().unwrap();
$('span.with-paragraph').contents().unwrap();

Nota que acima os dois spans são removidos. Daí é possível simplificar se você não tiver o span.with-paragraph.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .