[javascript] MediumEditor에서 에디터 확장 기능 사용하기

30 Nov 2023

javascript

MediumEditor는 사용하기 쉬운 WYSIWYG(What You See Is What You Get) 에디터 라이브러리입니다. 사용자가 텍스트를 편집하고 서식을 지정하는 것을 가능하게 해줍니다.

하지만 기본 기능 이외에도 MediumEditor를 확장하여 사용자 정의 기능을 추가할 수 있습니다. 이 글에서는 MediumEditor의 확장 기능을 사용하는 방법에 대해 알아보겠습니다.

확장 기능 추가하기

MediumEditor에서 확장 기능을 추가하려면 다음 단계를 따르면 됩니다.

MediumEditor를 HTML 문서에 추가합니다.
필요한 추가 기능을 생성합니다.
MediumEditor에 확장 기능을 등록합니다.

이제 각 단계를 자세히 살펴보겠습니다.

1. MediumEditor 추가하기

MediumEditor를 사용하기 위해서는 우선 HTML 문서에 해당 라이브러리를 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 MediumEditor 스크립트 파일을 로드합니다.

<script src="medium-editor.min.js"></script>

2. 추가 기능 생성하기

확장 기능을 생성하기 위해 별도의 JavaScript 파일을 생성합니다. 해당 파일에서는 확장 기능에 대한 로직과 동작을 정의합니다. 예를 들어, 사용자가 이미지를 삽입할 수 있는 기능을 추가하려면 다음과 같이 작성할 수 있습니다.

(function () {
  var ImageExtension = MediumEditor.extensions.button.extend({
    name: 'image',
    action: function () { // 이미지 삽입 로직 구현 },
    // 기타 필요한 메서드 정의
  });

  MediumEditor.extensions.image = ImageExtension;
})();

3. 확장 기능 등록하기

확장 기능을 등록하여 MediumEditor에 추가할 수 있습니다. 이를 위해 extensions 옵션을 사용하여 MediumEditor를 초기화합니다. 이 때, 여러 개의 확장 기능이 있다면 배열 형태로 등록할 수 있습니다.

var editor = new MediumEditor('.editable', {
  extensions: {
    'image': new MediumEditor.extensions.image()
  }
});

위의 예제에서는 이미지 삽입 기능을 image라는 이름으로 등록하고, 해당 기능을 사용할 수 있도록 활성화시키고 있습니다.

MediumEditor에서 에디터 확장 기능을 사용하는 방법에 대해 알아보았습니다. 필요한 기능을 추가하여 사용자 정의되고 유연한 에디터를 만들 수 있습니다. 자세한 내용은 공식 문서를 참조하시기 바랍니다.