MediumEditor는 유연하고 사용하기 쉬운 WYSIWYG(What You See Is What You Get) 에디터입니다. 이 에디터를 사용하면 사용자가 텍스트를 서식있게 편집할 수 있습니다. 그러나 때로는 특정 기능을 사용자에게 제한하고 싶을 수도 있습니다. 이 경우, 에디터의 툴바 버튼을 비활성화하는 방법을 알아보겠습니다.

1. MediumEditor 툴바 버튼 구성

MediumEditor의 툴바는 buttons 속성에 있는 버튼 객체들로 구성됩니다. 버튼 객체는 버튼의 이름과 CSS 클래스로 구성되어 있습니다. 아래는 기본적인 툴바에 있는 버튼들의 예시입니다:

{
  'bold': {
    name: 'bold',
    contentDefault: '<b>B</b>',
    contentFA: '<i class="fas fa-bold"></i>',
    classList: ['custom-bold'],
    action: 'bold',
    aria: 'Bold',
    tagNames: ['b', 'strong'],
  },
  'italic': {
    name: 'italic',
    contentDefault: '<i>I</i>',
    contentFA: '<i class="fas fa-italic"></i>',
    classList: ['custom-italic'],
    action: 'italic',
    aria: 'Italic',
    tagNames: ['i', 'em'],
  },
  // 다른 툴바 버튼들...
}

2. 버튼 비활성화하기

특정 버튼을 비활성화하려면 해당 버튼 객체의 classList에 비활성화를 나타내는 CSS 클래스를 추가하면 됩니다. 예를 들어, bold 버튼을 비활성화하려면 다음과 같이 코드를 작성할 수 있습니다:

const editor = new MediumEditor('.editable');
const boldButton = editor.getExtensionByName('bold');

boldButton.classList.push('disabled');

위의 코드에서 disabled 클래스는 버튼을 비활성화하는 CSS 스타일을 나타내어야 합니다. 이 클래스를 적절히 정의하여 버튼이 비활성화되도록 스타일을 지정할 수 있습니다.

3. 참고 자료

• MediumEditor GitHub Repository

위의 방법을 사용하여 MediumEditor에서 에디터 툴바 버튼을 비활성화할 수 있습니다. 여기에서는 bold 버튼을 예시로 사용하였지만, 비활성화하고자 하는 다른 버튼에도 동일한 방식으로 접근할 수 있습니다.