Editor 만들기 (+data-속성)

23427 단어 자바스크립트자바스크립트

class를 사용한 Editor만들기


<style>
    .toolTip{
        width:400px;
        height:40px;
        background-color: orange;
        padding: 8px;
        box-sizing : border-box;
    }
    
    .toolTip button{
        height:24px;
        border:2px solid black;
        background-color : white;
        cursor : pointer;
    }
    
    .toolTip button:hover{
        background-color:gray;
    }

    .editor{
        margin-top : 10px;
        width:600px;
        height:600px;
        padding:16px;
        font-size:20px;
        border:1px solid black;
    }
</style>
<body>
   <div class="toolTip">
       <button class="bold">bold</button>
       <button class="italic">italic</button>
       <button class="align-left">align-left</button>
       <button class="align-center">align-center</button>
       <button class="align-right">align-right</button>
   </div>
   <div class="editor" contenteditable="true"></div>
<script>
    (()=>{
        document.querySelector('.bold').addEventListener('click',()=>{
            document.execCommand('bold');
        });

        document.querySelector('.italic').addEventListener('click',()=>{
            document.execCommand('italic');
        })

        document.querySelector('.align-left').addEventListener('click',()=>{
            document.execCommand('justifyLeft');
        })

        document.querySelector('.align-center').addEventListener('click',()=>{
            document.execCommand('justifyCenter');
        })

        document.querySelector('.align-right').addEventListener('click',()=>{
            document.execCommand('justifyRight');
        })
    })()
</script>
</body>

클래스 문제점

해당 버튼이 추가될 때마다 기하급수적으로 js 코드가 증가함

data 속성 사용하기

  • 해당 data 속성에 값을 넣고 해당 값으로 필요마다 적용하기

<style>
    .toolTip{
        width:400px;
        height:40px;
        background-color: orange;
        padding: 8px;
        box-sizing : border-box;
    }
    
    .toolTip button{
        height:24px;
        border:2px solid black;
        background-color : white;
        cursor : pointer;
    }
    
    .toolTip button:hover{
        background-color:gray;
    }

    .editor{
        margin-top : 10px;
        width:600px;
        height:600px;
        padding:16px;
        font-size:20px;
        border:1px solid black;
    }
</style>
<body>
   <div class="toolTip">
       <button data-command="bold">bold</button>
       <button data-command="italic">italic</button>
       <button data-command="justifyLeft">align-left</button>
       <button data-command="justifyCenter">align-center</button>
       <button data-command="justifyRight">align-right</button>
   </div>
   <div class="editor" contenteditable="true"></div>
<script>
    (()=>{
        document.querySelectorAll('.toolTip button').forEach(dom=>{
            dom.addEventListener('click',(e)=>{
                const attr = e.target.getAttribute('data-command');
                document.execCommand(attr);
            })
        })
    })()
</script>
</body>

이를 통해 js코드는 따로 더 추가 할 필요없이 data-command의 속성 값이 적용되어 처리하면 된다.

JSON 웹 서명 규범 해석
IM 10일차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage