Criar um editor embutido requer esforço. Você começa trocando o elemento a ser editado com um input ou textarea campo. Para uma experiência de usuário perfeita, você também pode ter que usar algum CSS para combinar o estilo dos elementos trocados com o original. Assim que o usuário terminar de editar, você terá que trocar novamente os elementos depois de copiar todo o conteúdo para os originais.
o contentEditable atributo torna esta tarefa muito mais fácil. Tudo o que você precisa fazer é definir este atributo para true e os elementos HTML5 padrão se tornarão editáveis. Neste tutorial, criaremos um editor de rich text embutido com base nesse recurso.
O básico
Este atributo pode ter três valores válidos. Estes são true, false e inherit. O valor que true indica que o elemento é editável. Uma string vazia também será avaliada como verdadeira. false indica que o elemento não é editável. O valor que inherit é o valor padrão. inherit indica que um elemento será editável se seu pai imediato for editável. Isso implica que, se você tornar um elemento editável, todos os seus filhos e não apenas os imediatos também se tornarão editáveis, a menos que você defina explicitamente seus contentEditable atribuir a false.
Você pode alterar esses valores dinamicamente com JavaScript. Se o novo valor não for nenhum dos três válidos, ele lança um SyntaxError exceção.
Criando o Editor
Para criar o editor embutido, você precisa ter a capacidade de alterar o valor do contentEditable atributo sempre que um usuário decide editar algo.
Ao alternar o contentEditable atributo, é necessário saber qual valor o atributo possui atualmente. Para isso, você pode usar o isContentEditable propriedade. Se isContentEditable retorna true para um elemento, o elemento é editável no momento, caso contrário, não. Usaremos essa propriedade em breve para determinar o estado de vários elementos em nosso documento.
Primeiro, precisamos criar um diretório chamado editor de conteúdo editável. Dentro dele, crie um novo arquivo chamado index.html. Você pode usar isso como um esqueleto para seu arquivo HTML.
Text Editor
O primeiro passo na construção do editor é a criação de um botão para alternar a edição e alguns elementos editáveis. Dentro de elemento, coloque isso:
A Nice Heading.
Last Edited By -
Some content that needs correction.
Cada elemento que pretendemos manter editável precisa ter seu próprio Id. Isso será útil quando tivermos que salvar as alterações ou recuperá-las posteriormente para substituir o texto dentro de cada elemento.
O código JavaScript a seguir lida com toda a edição e salvamento.
const editBtn = document.getElementById('editBtn');
const editables = document.querySelectorAll('#title, #author, #content')
editBtn.addEventListener('click', function(e) {
if (!editables[0].isContentEditable) {
editables[0].contentEditable="true";
editables[1].contentEditable="true";
editables[2].contentEditable="true";
editBtn.innerHTML = 'Save Changes';
editBtn.style.backgroundColor="#6F9";
} else {
// Disable Editing
editables[0].contentEditable="false";
editables[1].contentEditable="false";
editables[2].contentEditable="false";
// Change Button Text and Color
editBtn.innerHTML = 'Enable Editing';
editBtn.style.backgroundColor="#F96";
// Save the data in localStorage
for (var i = 0; i < editables.length; i++) {
localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
}
}
});
Você pode colocar este código em um