Enable contenteditable="false" tag for "true" with javascript

Question

How to make a script so that when I click the edit button, automatically my div will be editable and the save button appears that when clicked will disappear and my div will again be non-editable?

<div class="texto" contenteditable="false">
    <p class="meu-texto" ><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>
<div class="hide" id="salvar-frase"><button class="btn-editar">Salvar</button></div>

`

Answer 1

Just use document.querySelector (can exchange for ids instead of class too, but this is another story):

var salvar = document.querySelector("#salvar-frase");
var editar = document.querySelector(".editar");
var texto = document.querySelector(".texto");

editar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") !== -1) {
        // habilita a edição
        texto.contentEditable = true;

        editar.classList.add("hide"); //Oculta o botão editar
        salvar.classList.remove("hide"); //mostra o botão salvar
    }
};

salvar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") === -1) {
        // desabilita a edição
        texto.contentEditable = false;

        editar.classList.remove("hide"); //mostra o botão editar
        salvar.classList.add("hide"); //Oculta o botão salvar
    }
};

.hide {
    display: none;
}

<div class="texto" contenteditable="false">
    <p class="meu-texto"><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>
<div class="hide" id="salvar-frase"><button class="btn-editar">Salvar</button></div>

If you want to add an auto focus to div use .focus() and range (based in this answer):

var salvar = document.querySelector("#salvar-frase");
var editar = document.querySelector(".editar");
var texto = document.querySelector(".texto");

function setCursorEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

editar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") !== -1) {
        // habilita a edição
        texto.contentEditable = true;

        setCursorEnd(texto);

        editar.classList.add("hide"); //Oculta o botão editar
        salvar.classList.remove("hide"); //mostra o botão salvar
    }
};

salvar.onclick = function () {
    // Verifica se já esta editando
    if ((" " + salvar.className + " ").indexOf(" hide ") === -1) {
        // desabilita a edição
        texto.contentEditable = false;

        editar.classList.remove("hide"); //mostra o botão editar
        salvar.classList.add("hide"); //Oculta o botão salvar
    }
};

.hide {
    display: none;
}

<div class="texto" contenteditable="false">
    <p class="meu-texto"><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>
<div class="hide" id="salvar-frase"><button class="btn-editar">Salvar</button></div>

Answer 2

Using jQuery, it would be in the following example:

$(function() {

  $("#btn-editar").on('click', function(e) {
    $('.texto').attr('contenteditable', true);
  });

  $(".editar").on('click', function(e) {
    $(".btn-editar").show();
    $('.texto').attr('contenteditable', true);
  });

  $(".btn-editar").on('click', function() {
    $(this).hide();
    $('.texto').attr('contenteditable', false);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="texto" contenteditable="false">
  <p class="meu-texto">
    <center>Meu texto Que sera editado</center>
  </p>

</div>
<button class="editar">Editar</button>
<button style="display:none" class="btn-editar">Salvar</button>

Answer 3

A different way would be:

document.querySelector('.editar').onclick = function() {
  let label = (this.innerHTML == 'Editar' ? 'Salvar' : 'Editar');
  let inEdit = (label == 'Salvar');
  
  document.querySelector('.texto').setAttribute('contenteditable', inEdit);
  this.innerHTML = label;
  
  document.querySelector('.texto').focus();
}

<div class="texto" contenteditable="false">
    <p class="meu-texto" ><center>Meu texto Que sera editado</center></p>

</div>
<button class="editar">Editar</button>