[javascript] MediumEditor에서 에디터 툴바에 서브 메뉴 추가하기

30 Nov 2023

javascript

MediumEditor는 간단하고 유연한 WYSIWYG(What You See Is What You Get) 에디터입니다. 이 에디터를 사용하면 사용자가 간편하게 웹 페이지에서 텍스트를 편집할 수 있습니다. 이번에는 MediumEditor의 툴바에 서브 메뉴를 추가해보는 방법에 대해 알아보겠습니다.

1. 툴바 버튼 추가하기

MediumEditor에서 툴바에 서브 메뉴를 추가하려면 먼저 툴바 버튼을 추가해야 합니다. MediumEditor는 툴바 버튼을 추가하는 button 옵션을 제공합니다. 예를 들어, Bold 버튼을 추가하고 싶다면 다음과 같이 button 옵션을 설정할 수 있습니다.

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

위 예시에서는 buttons 배열 안에 ‘bold’를 넣어 Bold 버튼을 추가한 것입니다. 이와 같은 방식으로 필요한 버튼들을 추가할 수 있습니다.

2. 서브 메뉴 추가하기

MediumEditor에서 서브 메뉴를 추가하려면 button 옵션에 객체 형태로 버튼과 서브 메뉴를 정의해야 합니다. 예를 들어, Font Size 버튼과 그 서브 메뉴를 추가하고 싶다면 다음과 같이 설정할 수 있습니다.

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: [
      {
        name: 'fontSize',
        action: 'sub',
        aria: 'Font Size',
        tags: ['span'],
        contentDefault: '<b>Aa</b>',
        contentFA: '<i class="fa fa-font"></i>',
        htmlAttributes: {
          class: 'custom-button'
        },
        items: [
          {
            name: 'small',
            action: 'fontSize',
            aria: 'Small',
            tagNames: ['small'],
            contentDefault: '<small>A',
            contentFA: '<i>A</i>',
            attributes: {
              'data-custom': 'small'
            }
          },
          {
            name: 'medium',
            action: 'fontSize',
            aria: 'Medium',
            tagNames: ['medium'],
            contentDefault: 'A',
            contentFA: '<i>A</i>',
            attributes: {
              'data-custom': 'medium'
            }
          },
          {
            name: 'large',
            action: 'fontSize',
            aria: 'Large',
            tagNames: ['large'],
            contentDefault: '<big>A',
            contentFA: '<i>A</i>',
            attributes: {
              'data-custom': 'large'
            }
          }
        ]
      }
    ]
  }
});

위 코드에서는 buttons 배열 안에 서브 메뉴를 정의한 객체를 추가했습니다. 이 예시에서는 ‘fontSize’라는 이름의 버튼과 그에 해당하는 서브 메뉴를 생성합니다. 서브 메뉴는 items 배열 안에 정의된 객체의 형태로 구성됩니다.

3. 사용자 정의 CSS 추가하기

MediumEditor에서 추가한 서브 메뉴에 스타일을 적용하려면 사용자 정의 CSS를 작성해야 합니다. 위 예시에서는 .custom-button 클래스를 사용하여 버튼에 스타일을 적용하였습니다.

.custom-button {
  /* 사용자 정의 스타일 지정 */
}

위와 같이 CSS 코드를 작성하여 원하는 스타일을 추가할 수 있습니다.

MediumEditor를 사용하여 툴바에 서브 메뉴를 추가하는 방법에 대해 알아보았습니다. 이를 통해 더 다양한 사용자 정의 기능을 구현할 수 있으며, 사용자들이 텍스트 편집을 더욱 편리하게 사용할 수 있게 될 것입니다.

참고 자료

MediumEditor 공식 문서