[javascript] MediumEditor에서 에디터 툴바 컨텐츠 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자가 텍스트를 편집하고 서식을 지정할 수 있는 강력한 온라인 편집기입니다. 이 편집기에는 툴바가 포함되어 있어 사용자가 텍스트 스타일, 글머리 기호, 링크 등을 쉽게 추가하고 편집할 수 있습니다.

이 문서에서는 MediumEditor 툴바에 고유한 컨텐츠를 추가하는 방법을 설명하겠습니다.

단계 1: MediumEditor 라이브러리 추가하기

먼저 MediumEditor 라이브러리를 프로젝트에 추가해야 합니다. 다음의 CDN 링크를 사용하여 스크립트를 추가할 수 있습니다:

<script src="https://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css">

단계 2: 툴바에 컨텐츠 추가하기

MediumEditor 툴바에 원하는 컨텐츠를 추가하려면 buttons 배열을 사용해야 합니다. 각 버튼은 객체로 표현되며, name, contentDefault, contentFA, aria 등의 속성을 가지고 있습니다. 다음은 예시입니다:

var toolbarOptions = {
  buttons: [
    {
      name: 'bold',
      contentDefault: '<b>B</b>',
      contentFA: '<i class="fa fa-bold"></i>',
      aria:'bold',
      tagNames: ['b']
    },
    {
      name: 'italic',
      contentDefault: '<i>I</i>',
      contentFA: '<i class="fa fa-italic"></i>',
      aria: 'italic',
      tagNames: ['i']
    },
    // 다른 버튼들 추가
  ]
}

위 예시에서는 “bold” 버튼과 “italic” 버튼을 추가했습니다. contentDefault 속성은 기본 컨텐츠를 지정하고, contentFA 속성은 Font Awesome 아이콘을 사용할 수 있습니다.

단계 3: MediumEditor 적용하기

이제 MediumEditor를 실제로 적용하고 툴바를 추가해야 합니다. 적용할 textarea 엘리먼트를 선택하고 MediumEditor를 초기화합니다. 다음은 예시입니다:

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: toolbarOptions.buttons
  },
  // 기타 옵션들 추가
});

위 예시에서 editable 클래스를 가진 textarea 엘리먼트에 MediumEditor를 적용하고 있습니다. toolbar 옵션을 통해 원하는 버튼을 추가할 수 있으며, 이전에 작성한 toolbarOptions 배열을 사용합니다.

이제 MediumEditor를 사용하여 에디터를 통해 텍스트를 편집하고 추가한 컨텐츠를 이용할 수 있습니다.

결론

MediumEditor의 툴바에 컨텐츠를 추가하는 방법에 대해 살펴보았습니다. 이를 통해 사용자 정의 버튼이나 기능을 툴바에 쉽게 추가할 수 있게 됩니다. MediumEditor의 다양한 옵션을 살펴보고 원하는대로 사용자 경험을 향상시켜보세요.

참고 자료: