Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Sei que existem vários editores de texto online, mas pelo que percebi quase todos usam a função exeCommad que está declarada como descontinuada. Tenho um editor funcuina e bonito que fiz usando o comando anterior, mas já começou a deixar de funcionar em alguns dispositivos e seus navegadores.
Com isto em vista comecei o trabalho de formiga de recriar o editor, já tive avanços interessantes e uns bugs de loop que não fazem sentido.
Meu nível de javascrit é muito principiante e aprendi muita coisa com a necessidade e aplicação. Estou com dificuldades em entender todas as possibilidades da função
getSelection()
e talvez isso esteja me dando mais trabalho. Apesar disto o meu problema atual é um loop que não faz o menor sentido para mim na função PASTE (colar).
Quando executo a colagem pela primeira vez ele cola certinho, mas puxa o ponteiro para o início do texto, mas o problema vem quando faço a segunda colagem que ele cria um loop postando duas vezes, se fizer uma terceira vez ele faz o loop 3 vezes e assim por diante...
https://jsfiddle.net/alexandrejazara/v4s21gof/223/
Acima o código em desenvolvimento no momento.
Abaixo a parte onde pega o texto para ser colado e que realizo um tratamento para eliminar qualquer tag vinda do WOrd ou de outra página de internet.
**window.addEventListener("keydown", function(e) {**
**/* colar -> BUG!!! */
if (e.keyCode == 86 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
alert("Colar?");**
document.querySelector('[contenteditable]').addEventListener('paste', (e) => {
e.preventDefault();
const text = (e.originalEvent || e).clipboardData.getData('text/plain');
// alert('PASTE!!! '+text);
cp(class_limpa[1],text);
});
}
});
Aparentemente até a leitura da parte AZUL ele não faz o loop, mas quando habilito o segundo alert para verificar ele é executado pelo número de colagens que faço, se fizer uma ve ele roda uma vez, se precisar fazer uma segunda vez ele roda duas vezes e duplica o material colado e assim por diante.
Alguém sabe me dizer o que pode ser ou me dizer o termo que devo estudar para aprender a resolver isso?
Obrigado.Não é o queryselector que está executando um loop porque essa função nativa não se reexecuta nem devolve múltiplos dados apenas o primeiro elemento encontrado.
É a própria biblioteca jQuey que está fazendo esses loops.
É esse trecho mesmo identifiquei um loop sendo gerado, que vai executar 2 ou mais voltas:
$('.editor_' + class_limpa + '').focus(function (e) {
$(this).on("keyup", function () {
$('#' + class_limpa + '').html($(this).html());
$('.status_' + class_limpa + ' span').show().html("Digitando...");
});
});
2 voltas é certo pois **.editor_** ..... possui 2 no seu exemplo
São dois elementos, mas daí para cada tecla pressionada/segurada aumenta em 2 voltas o loop.
Deixo um a dica para você:
Ao invés de ficar usando** alert( .... )**
Use **console.log( o que você que ver )**
Abra o inspetor do navegador e vá na aba console, com o uso do console mesmo, poderá ver onde seu código está sendo executado novamente.Valeu Omar pela dica... eu ainda não me acostumei com o console...
Quando a sua observação... eu não entendi... pois eu carrego o nome da class_limpa para filtrar o nome do editor_ por completo.
E quando fiz a substituição que indiquei ele funcionou de boa, fiz vários testes, fiz nas duas caixas de teste para ver se não interferiria na outra e ficou redondo...
Meu foco agora é entender o código que usei para poder saber onde eu pego para saber se já tenho a tag criada ou se não.
Se tiver ao clicar em por exemplo B quero que ela seja removida, mas e não tiver quero que ela seja criada...
já sei que vou usar o unwarp(); e que tenho que usar o parent() para identificar a tag... mas ainda estou juntando as peças...
Já avancei bem nas melhorias que fiz.
Quem quiser usar
https://jsfiddle.net/alexandrejazara/v4s21gof/251/
Eu acabei descobrir.
querySelector('[contenteditable]')
quando uso querySelector ele gera o loop não entendi o motivo, mas parece que ele conta algo "talvez o número de colagens feitas"
Agradeço se alguém sobre explicar melhor.
Ao ler sobre este contador
lembrei que tem outras forma de identificar o local de destino então troquei querySelector por getElementsByClassName(), já que estou usando uma classe única para cada caixa de edição, ao fazer isso o loop parou. O problema é entender corretamente o erro.