The Code

Output

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
.h1cls {
  background: #3B505F;
  height: auto;
  width:310px;
  padding:5px;
  font-size:16px;
  color:#fff;  
  margin:20px;
}
</style>

</head>
<body>
    <h1>A demo of HTML contentEditable</h1>
    <h1 contentEditable="true" class="h1cls" id="contentEditabledemo1">Click on this heading to edit text</h1>
    
    <button class="btn btn-danger btn-lg" onclick="showeditable()">Display H1 text</button>
    
<script type="text/javascript">
function showeditable(){
var var_edittext = document.getElementById("contentEditabledemo1").innerHTML;
alert ("The div text is: " + var_edittext);
}
</script>    
</body>
</html>

A demo of HTML contentEditable

Click on this heading to edit text