Executando verificação de segurança...
6
Kellviiin
1 min de leitura ·

MyProjects 10 - 1° Editor de Texto

Opa gente, tudo bem?
Graças a esse vídeo do Felipe Deschanps: https://youtu.be/fYR9L2ZmodM eu fiquei determinado em testar minhas habilidades que acumulei em meus seis meses de estudos hahaha, é pouco mas é meu hahaha.

Decidi fazer todos os projetos que ele sita nesse vídeo, ou quase todos haha, o primeiro que escolhi foi o editor de texto, admito que não é o melhor editor e com certeza eu não usaria ele para editar algum tcc de faculdade mas ele foi um grande desafio para mim no quesito JavaScript, acho que eu nunca pensei tanto em como desenvolver uma lógica como pensei para fazer esse editor, pra acabar no final se rendendo a um vídeo gringo rsrs maaas pelo menos aprendi algumas coisas novas como por exemplo: as vezes a solução de um problema que você acha complicado é tão simples quanto espirra hahah, sim, essa é uma péssima comparação, eu sei, mas é o que tenho para hoje haha.

Projeto: https://kellviiin.github.io/Editor_de_Texto/

Carregando publicação patrocinada...
2
ludwiklejzer

Ótimo trabalho. Poderia adicionar a possibilidade de salvar o texto do usuário, e então viraria um programa de notas. Dá para fazer rapidinho usando o objeto locaStorage do js:)

1
Kellviiin
Autor
Autor

Pooo mano, muti obrigado pela dica, na moral. Eu estou no desafio de conseguir selecionar o texto e mudar só uma parte, to impacado nisso, sabe um meio?

1
ludwiklejzer

Para fazer isso você precisa colocar o texto do usuário em uma tag HTML que tenha o atributo contenteditable="true" ao invés de um <textarea>. Depois basta pegar o texto selecionado pelo usuário e colocar entre tags que alterarão o seu estilo.

Para pegar o texto selecionado você pode usar o window.getSelection().toString().

O código ficaria mais ou menos assim:

function setStyle(property, value) {
    // Pega o objeto que contém o texto selecionado
    const selection = window.getSelection();
    
    // Testa se existe alguma seleção
    if (selection.rangeCount) {
        // Cria o elemento que terá o texto selecionado com o estilo
        const element = document.createElement('span');
        // Altera o estilo do texto
        element.style[property] = value; 
        // Insere o texto selecionado no elemento criado
        element.innerHTML = selection.toString();

        // Retorna um objeto range que contém informações detalhadas
        // do texto selecionado
        const range = selection.getRangeAt(0);
        // Insere o novo elemento criado com o estilo
        range.surroundContents(element);
    }
}

// Negrito
setStyle('fontWeight', 'bold')
// Itálico
setStyle('fontStyle', 'italic')
// Underline
setStyle('textDecoration', 'underline')

Acho que já serve como uma base para o que você quer fazer.

2
1
1
1
1
1
1
1
1
1
1
1
1
1