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

Navigation
1

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

<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>

'

    
asked by anonymous 31.05.2017 / 19:42

3 answers

1

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><divclass="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>
    
31.05.2017 / 19:56
2

Just use document.querySelector (you can change to ids instead of class as well, 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 auto-focus on div use .focus() and range (based on 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>
    
31.05.2017 / 19:50
1

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>
    
31.05.2017 / 20:07
Pull the echo from php into a div, without refresh Codeigniter 2 with variable reference error in version 5.6 of PHP