[javascript] MediumEditor에서 텍스트 링크 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자가 텍스트를 편집하고 서식을 지정할 수 있는 WYSIWYG 에디터입니다. 이 블로그 포스트에서는 MediumEditor를 사용하여 텍스트 링크를 추가하는 방법을 안내하겠습니다.

시작하기

먼저, MediumEditor를 설치하고 사용할 수 있는 준비를 해야 합니다. 아래의 npm 명령어를 사용하여 MediumEditor를 설치하세요.

npm install medium-editor

텍스트 링크 추가하기

MediumEditor에서 텍스트에 링크를 추가하려면 AnchorExtension을 사용해야 합니다. 다음은 이를 구현하는 코드 예제입니다.

import MediumEditor from 'medium-editor';
import { AnchorExtension } from 'medium-editor/extensions';

// MediumEditor 인스턴스 생성
var editor = new MediumEditor('.editable');

// AnchorExtension 추가
editor.extensions.push(new AnchorExtension());

// 링크 추가 버튼 생성
editor.addButton({
  name: 'insert-link',
  action: function (editor) {
    var url = prompt('링크 URL을 입력하세요:');
    if (url) {
      var selection = editor.getSelectedParentElement();
      editor.extensions.anchor.createLink(selection, url);
    }
  },
  aria: '링크 삽입',
  tagNames: ['a'],
  contentDefault: '<b>#</b>',
  classList: ['toggle-link'],
});

// 편집 가능한 요소에 MediumEditor 적용
var editable = document.querySelector('.editable');
editor.subscribe('editableInput', function () {
  editable.innerHTML = editor.getContent();
});

위의 코드에서 .editable 클래스를 가진 요소를 편집 가능한 영역으로 지정합니다. 편집 가능한 영역을 클릭하면 링크 삽입 버튼이 나타나고, 버튼을 클릭하면 링크 URL을 입력 받아 해당 텍스트에 링크가 추가됩니다.

이제 MediumEditor로 텍스트 링크를 추가하는 방법을 알게 되었습니다. 다양한 기능을 추가하여 풍부한 텍스트 편집 경험을 제공해보세요.

시작하기

텍스트 링크 추가하기

참고 자료