MediumEditor는 사용자가 텍스트를 작성하고 편집할 수 있는 기능을 제공하는 WYSIWYG 편집기 라이브러리입니다. 이 라이브러리를 사용하면 사용자는 볼드체, 이탤릭체, 밑줄, 색상 등과 같은 다양한 텍스트 스타일을 적용할 수 있습니다. 이번 글에서는 MediumEditor에서 텍스트를 선택한 영역에 스타일을 적용하는 방법을 알아보겠습니다.

MediumEditor 초기화

먼저 MediumEditor를 초기화해야 합니다. 다음과 같이 HTML 요소에 MediumEditor 클래스를 적용합니다.

<div id="editor" contenteditable="true"></div>

다음으로 JavaScript를 사용하여 MediumEditor를 초기화합니다.

var editor = new MediumEditor('#editor');

텍스트 선택 영역 스타일링

MediumEditor를 사용하면 사용자는 텍스트를 선택하여 다양한 스타일을 적용할 수 있습니다. 선택한 텍스트의 스타일을 변경하기 위해서는 selection API를 사용해야 합니다. 다음과 같이 선택한 텍스트의 스타일을 변경하는 함수를 작성할 수 있습니다.

function applyStyleToSelection(style) {
  var selection = editor.getSelection();

  if (selection) {
    editor.getSelectedParentElement().style[style] = true;
  }
}

applyStyleToSelection 함수는 첫 번째 매개변수로 스타일 속성을 받습니다. 이 예제에서는 style 속성을 true로 설정하여 스타일을 적용합니다. 예를 들어, 볼드체로 텍스트를 변경하려면 다음과 같이 호출할 수 있습니다.

applyStyleToSelection('fontWeight');

위의 코드는 텍스트 선택 영역에만 스타일을 적용합니다. 다른 부분의 스타일은 유지됩니다.

결과 확인

MediumEditor로 HTML에 텍스트를 입력하고 스타일을 적용해보세요. 선택한 텍스트에 대해 스타일이 적용되는 것을 확인할 수 있을 것입니다.

결론

MediumEditor를 사용하여 텍스트 선택 영역에 스타일을 적용하는 방법을 알아보았습니다. 이를 이용하면 사용자들이 작성한 텍스트에 다양한 스타일을 적용할 수 있습니다. 자세한 내용은 MediumEditor 공식 문서를 참고하시기 바랍니다.