[javascript] MediumEditor에서 커스텀 CSS 적용하기

30 Nov 2023

javascript

MediumEditor는 사용자가 쉽게 텍스트를 편집할 수 있는 WYSIWYG(What You See Is What You Get) 에디터이다. 이 에디터를 사용할 때, 기본적으로 제공되는 스타일을 적용하게 되는데, 때로는 커스텀 CSS를 적용하여 에디터의 스타일을 변경하고 싶을 수도 있다.

이 글에서는 MediumEditor에서 커스텀 CSS를 적용하는 방법을 알아보겠다.

1. MediumEditor CSS 파일 추가하기

먼저, MediumEditor에서 사용되는 CSS 파일을 추가해야 한다. MediumEditor 공식 웹사이트에서 다운로드 링크를 얻거나, CDN을 통해 CSS 파일을 추가할 수 있다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.min.css">

위의 코드는 CDN을 통해 MediumEditor의 CSS 파일을 추가하는 예시이다. 파일 경로를 올바르게 지정하거나, 다른 방법으로 CSS 파일을 추가할 수도 있다.

2. 커스텀 CSS 작성하기

MediumEditor를 사용하는 웹 페이지에서 커스텀 CSS를 작성해야 한다. 이 CSS는 MediumEditor의 스타일을 변경하기 위한 것이므로, 원하는 스타일에 맞게 작성해야 한다.

.custom-editor {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px;
  font-family: Arial, sans-serif;
}

위의 예시 코드는 .custom-editor 클래스를 사용하여 에디터의 배경색, 테두리, 패딩 및 폰트 패밀리를 변경하는 방법을 보여준다. 이 CSS 코드를 원하는 대로 수정하거나 추가적인 스타일을 작성할 수 있다.

3. 커스텀 CSS 적용하기

이제 작성한 커스텀 CSS를 MediumEditor에 적용해보자. HTML 파일에서 MediumEditor를 초기화하는 JavaScript 코드가 있는 부분을 찾아 커스텀 CSS를 적용해야 한다.

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'anchor']
  },
  extensions: {
    'custom-style': new CustomStyleExtension()
  }
});

위의 코드에서 CustomStyleExtension은 아직 정의되지 않은 커스텀 확장 기능이다. 이 기능을 정의하여 커스텀 CSS를 적용할 수 있다.

function CustomStyleExtension() {
  this.base = MediumEditor.extensions.button.prototype;
  this.name = 'custom-style';

  this.init = function () {
    this.button = this.document.createElement('button');
    this.button.classList.add('medium-editor-action');
    this.button.innerHTML = 'Custom Style';
    this.button.onclick = this.handleClick.bind(this);
  };

  this.handleClick = function () {
    // 커스텀 CSS 적용 코드 작성
  };

  this.getButton = function () {
    return this.button;
  };

  this.checkState = function () {
    // 커스텀 CSS 상태 확인 코드 작성
  };
}

위의 코드에서 CustomStyleExtension은 커스텀 확장 기능을 정의하는 클래스이다. init 함수에서 커스텀 스타일을 토글하기 위한 버튼을 생성하고, handleClick 함수에서 커스텀 CSS를 적용하는 코드를 작성해야 한다.

4. 커스텀 CSS 적용 완료

위의 단계들을 완료하면 MediumEditor에 커스텀 CSS가 적용된다. 커스텀 CSS를 수정하거나 추가로 기능을 개발할 수도 있으며, CustomStyleExtension 클래스의 handleClick 함수에서 원하는 동작을 정의할 수 있다.

MediumEditor에서 커스텀 CSS를 적용하는 방법을 알아보았다. 이를 통해 더욱 편리하고 자유롭게 텍스트를 편집할 수 있는 WYSIWYG 에디터를 구현할 수 있다. 자세한 내용은 아래의 참고 자료를 확인해보자.