4. contenteditable 속성

거의 모든 html요소에 속성( contenteditable="true" )으로 설정하여 텍스트 편집이 가능하도록 설정.

 

<div contenteditable="true">
  This text can be edited by the user.
</div>

 

텍스트 편집기 예제

<button id="editBtn" type="button">Edit Document</button>
 
    <div id="editor">
        <h1 id="title">A Nice Heading.</h1>
        <p>Last Edited By - <span id="author">Monty Shokeen</span></p>
        <p id="content">Some content that needs correction.</p>
    </div>


    <script>
        var editBtn = document.getElementById('editBtn');
        var 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);
            }
        }
        });
    </script>

 

 

https://codepen.io/Shokeen/pen/OMggQQ

localStorage Inline Editor