Jazara

Estou eu aqui no desenvolvimento de meu editor de texto e me deparei com o este bug Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node. solution surroundContents() este erro as vezes ocorre ao selecionar uma linha para aplicar uma tag. Busquei internet e aqui no fórum sobe este erro, mas ou a pessoa foi ignorada ou o pessoal fica falando de usar o execCommand (descontinuado), então alguém já passou por isso? Tem alguma ideia de como resolver isso? Aqui o código completo Em geral quando eu tento selecionar linha 1 ou 2 da caixa de texto 1 ele dá esse erro ao tentar formatar h2, h3, etc https://jsfiddle.net/alexandrejazara/v4s21gof/443/

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/

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.

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.

Caro Omar, agradeço, vou estudar sobre o assunto e olhar os links que você me passou. Entre receber sua resposta e minha postagem eu consegui entender um pouco mais de como usar isso e fiz este código de teste https://jsfiddle.net/alexandrejazara/yg72L6dc/2/ Reparei nele que se eu chamar o "script principal" depois da DIV delegada ele dá erro e não roda, mas se eu o fizer antes de delegar ele carrega certinho e consigo manipular as coisas. Talvez seja a falta de conhecimento e experiência para se alcançar o resultado com o carregamento da função pós body ou pós document load. Já consegui seguir com outro projeto meu que é um editor de texto personalizado. Sei que há vários no mercado, mas acabo sempre com algum conflito de edição no final da postagem na tela, e como também, o exeCommad está sendo descontinuado por navegadores para o uso do contenteditable que já tinha um painel funcional, agora tenho que correr atrás de solucionar isso. Nesta jornada de criação estou descobrindo muitas dificuldades pela falta de conhecimento, já consegui resolver algumas coisas, mas tem coisa que não faço a mínima ideia e os materiais em geral são fragmentados ou com muita informação e pouco "Passo à passo". Imagino que minha dificuldade para quem é especialista na área deva ser algo trivial, mas pessoas tem diferentes curvas de aprendizagem. E sem grana para investir em um curso, preciso ir buscando conteúdos que possam sanar o meu problema. Por fim esta luz que você já me ofereceu abriu um caminho para saber o que estudar. Grato de coração. Compartilho com outras pessoas que venham ler este documento o meu projeto em desenvolvimento do editor. https://jsfiddle.net/alexandrejazara/v4s21gof/223/ Nele já apliquei o princípio da dúvida aqui apresentada. Deixarei em aberto por uns dias esta postagem caso alguém queria compartilhar mais alguma coisa.

Eu gostaria de escrever um script "genérico" com funções e ações, para reduzir a carga de scripts para fazer a mesma coisa desta forma: Eu tenho uma galeria de imagens dentro de um DIV com o id destaques, mais para baixo tenho outra galeria com o nome de id mais_vendidos Então eu só consigo fazer a função de animação de galeria delegando todas as linhas de código para aquele ID, o que infla meu código. EU já vi outros scripts que fazem o que quero, só não entendi pois meu nível de javascript é baixo. Logo o que eu quero é que: function anima_galeria(){ /*todos os códigos de animação aqui*/ } e que eu possa apenas fazer: $("#destaques").anima_galeria(function(){ var exibir_seta = 1; }); $("#mais_vendidos").anima_galeria( var exibir_seta = 0; ); Então como faz isso? O que devo estudar para conseguir este resultado?

Olá pessoal, estou tentando montar uma rádio para um projeto cultural que faço parte, gratuitamente. Consegui o listen2myradio para gerenciar o streaming gratuitamente para o projeto, porém ele não tem autoDJ. É possível criar um script que através de um cron usando PHP para pegar os arquivos em um servidor php e transmitir para o endereço com usuário e senha para ele retransmitir no site "distribuidor". Se sim com PHP o que devo estudar para isto, SE não qual linguagem eu conseguiria isto? É um projeto cultural que não tem verba, estou fazendo voluntariamente isto para tentar ajuda-los.