[javascript] MediumEditor에서 문서 구조 편집하기

30 Nov 2023

javascript

MediumEditor는 HTML 내에서 WYSIWYG 편집을 할 수 있는 자바스크립트 라이브러리입니다. 이를 사용하여 사용자가 문서의 구조를 편집할 수 있습니다. 예를 들어, 헤딩(heading)을 추가하거나 본문의 스타일을 변경하는 등의 작업을 수행할 수 있습니다.

1. MediumEditor 라이브러리 추가하기

먼저 MediumEditor 라이브러리를 HTML 파일에 추가해야 합니다. 아래 코드 예제를 참고하여 스크립트를 추가하세요.

<head>
  <link rel="stylesheet" href="path-to-medium-editor/css/medium-editor.css">
  <script src="path-to-medium-editor/js/medium-editor.js"></script>
</head>

2. 에디터 초기화하기

MediumEditor를 사용하기 위해 에디터를 초기화해야 합니다. 아래 코드 예제를 참고하여 초기화하세요. 필요한 경우 옵션을 추가하거나 수정할 수 있습니다.

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'heading'],
    static: true,
    sticky: true
  },
  placeholder: {
    text: '내용을 입력하세요',
    hideOnClick: true
  }
});

위 코드에서 ‘.editable’는 에디터가 적용될 요소의 CSS 선택자입니다. 필요에 따라 수정하여 사용하세요.

3. 문서 구조 편집하기

MediumEditor를 사용하면 사용자가 문서의 구조를 편집할 수 있습니다. 예를 들어, 헤딩을 추가하는 방법은 다음과 같습니다.

editor.execAction('heading', { value: 'h2' });

위 코드는 현재 선택된 텍스트를 h2 태그로 변환합니다. 다른 태그를 사용하려면 ‘h2’ 부분을 해당 태그로 변경하세요.

마무리

MediumEditor를 사용하여 문서의 구조를 편집할 수 있습니다. 이를 통해 사용자가 쉽게 문서를 작성하고 스타일을 변경할 수 있습니다. MediumEditor에 대한 더 자세한 내용은 공식 문서를 참고하세요.