MediumEditor는 사용자가 텍스트를 편집할 수 있는 기능을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에서 텍스트 편집기를 구현할 수 있습니다. 하지만 때로는 사용자에게 일부 영역을 읽기 전용으로 제공하고 싶을 수도 있습니다. 이번 포스트에서는 MediumEditor에서 특정 영역을 편집 가능 여부를 설정하는 방법에 대해 알아보겠습니다.

1. 영역에 id 부여하기

MediumEditor에서 편집 가능 여부를 설정하기 위해서는 특정 영역에 id를 부여해야 합니다. id는 CSS 선택자로 사용되며, 해당 영역을 편집 가능 혹은 읽기 전용으로 설정하는 데 사용됩니다.

예를 들어, 아래와 같이 HTML 코드를 작성합니다.

<div id="editableArea">
    <p>This is editable content.</p>
    <p id="readOnlyArea">This is read-only content.</p>
</div>

위 예시에서 editableArea는 사용자가 텍스트를 편집할 수 있는 영역이며, readOnlyArea는 읽기 전용으로 설정하고자 하는 영역입니다.

2. MediumEditor 초기화

MediumEditor를 사용하기 위해 HTML에서 편집 가능한 영역을 초기화해야 합니다. 이때, 편집 가능한 영역을 선택할 때는 id를 사용하여 해당 영역을 찾습니다.

var editor = new MediumEditor('#editableArea');

위 코드에서는 editableArea라고 id가 부여된 영역을 편집 가능한 영역으로 세팅하는 것을 의미합니다.

3. 영역 편집 가능 여부 설정하기

다음으로, readOnlyArea를 읽기 전용으로 설정하기 위해 MediumEditor의 updateElementTree 메서드를 사용합니다.

editor.options.elementsContainer.addEventListener('click', function (event) {
    if (event.target.id === 'readOnlyArea') {
        event.preventDefault();
    }
});

위 코드에서는 readOnlyArea에 클릭 이벤트가 발생했을 때, 이벤트의 기본 동작을 막아 읽기 전용으로 설정합니다.

4. 결과 확인하기

위의 코드를 모두 적용하고 웹 애플리케이션을 실행하면, editableArea는 텍스트를 편집할 수 있지만, readOnlyArea는 클릭해도 아무런 변화가 없음을 확인할 수 있습니다.

MediumEditor에서 특정 영역의 편집 가능 여부를 설정하는 방법에 대해 알아보았습니다. 이를 응용하여 웹 애플리케이션에서 특정 영역을 읽기 전용으로 설정하거나, 동적으로 변경할 수 있습니다.