MediumEditor는 사용자가 텍스트를 편집하고 서식을 지정할 수 있는 브라우저 기반 텍스트 편집기입니다. 하지만 때로는 사용자가 일부 영역만을 편집할 수 있도록 제한해야 할 경우가 있습니다. 이번 블로그 포스트에서는 MediumEditor에서 콘텐츠의 일부 영역만 편집 가능하도록 설정하는 방법에 대해 알아보겠습니다.

1. MediumEditor 라이브러리 추가

먼저, MediumEditor 라이브러리를 프로젝트에 추가해야 합니다. 이를 위해 HTML 파일에 다음과 같이 코드를 추가합니다:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>

2. 편집 가능한 영역과 읽기 전용 영역 설정

MediumEditor에서 콘텐츠의 일부 영역을 편집 가능하게 만들기 위해서는 각각의 영역에 대해 편집 가능한 클래스와 읽기 전용 클래스를 설정해야 합니다. 예를 들어, 다음과 같이 HTML 코드를 작성합니다:

<div class="editable">
  <p class="editable-content">이 부분은 편집 가능한 영역입니다.</p>
</div>
<div>
  <p class="readonly-content">이 부분은 읽기 전용 영역입니다.</p>
</div>

3. MediumEditor 초기화 및 설정

MediumEditor를 초기화하고 편집 가능한 영역만 편집 가능하도록 설정해야 합니다. 자바스크립트 코드에서 다음과 같이 MediumEditor를 초기화합니다:

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline']
  },
  disableEditing: true
});

위의 코드에서 disableEditing 속성을 true로 설정하면, 읽기 전용 클래스가 적용된 영역은 편집할 수 없게 됩니다.

4. 결과 확인하기

웹 페이지를 열고 위에서 설정한대로 동작하는지 확인해보세요. 편집 가능한 영역은 텍스트를 편집하고 서식을 지정할 수 있지만, 읽기 전용 영역은 편집할 수 없는 것을 확인할 수 있을 것입니다.

결론

MediumEditor에서 콘텐츠의 일부 영역만 편집 가능하도록 설정하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 일부 영역만을 편집할 수 있도록 제한할 수 있습니다. MediumEditor의 다양한 설정과 기능을 활용하여 편집기를 개발해보세요.