MediumEditor는 사용자가 텍스트를 편집하고 서식을 지정할 수 있는 쉬운 사용자 인터페이스를 제공하는 자바스크립트 라이브러리입니다. 이러한 기능을 사용하여 사용자 입력을 받고, 텍스트를 편집하고, 서식을 적용할 수 있습니다. 그러나 때로는 MediumEditor에서 사용자가 입력한 콘텐츠를 가져와서 특정 목적으로 사용해야하는 경우가 있을 수 있습니다.

이 문서에서는 MediumEditor에서 사용자가 입력한 콘텐츠를 가져와서 리스팅하는 방법에 대해 알아보겠습니다.

MediumEditor의 콘텐츠 가져오기

MediumEditor는 사용자가 입력한 콘텐츠를 innerHTML 속성을 통해 가져올 수 있습니다. 이를 통해 편집된 콘텐츠를 다른 곳에 적용하거나, 서버로 전송할 수 있습니다.

예를 들어, 다음과 같은 HTML 요소에 MediumEditor가 적용되어 있다고 가정합니다:

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

이제 JavaScript를 사용하여 MediumEditor의 콘텐츠를 가져올 수 있습니다:

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

const getContent = () => {
  const content = editor.getContent();
  console.log(content);
};

콘텐츠 리스팅하기

MediumEditor에서 가져온 콘텐츠를 사용하여 다양한 목적으로 활용할 수 있습니다. 한 가지 예시로 콘텐츠를 리스트 형태로 표시하는 것입니다.

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

const getContent = () => {
  const content = editor.getContent();
  
  // 콘텐츠를 <ul> 요소로 변환하여 리스트로 표시
  const listContainer = document.createElement('ul');
  
  content.split('\n').forEach((item) => {
    const listItem = document.createElement('li');
    listItem.textContent = item;
    listContainer.appendChild(listItem);
  });
  
  // 결과를 페이지에 삽입
  document.querySelector('.list-container').appendChild(listContainer);
};

위의 예시에서는 MediumEditor에서 가져온 콘텐츠를 줄바꿈 문자(\n)을 기준으로 나누고, 각 항목을 <li> 요소로 변환하여 <ul> 요소에 추가합니다. 이후, 결과를 페이지에 삽입하는 부분도 포함되어 있습니다.

결론

MediumEditor에서 콘텐츠를 가져오고, 이를 활용하여 다양한 목적으로 사용하는 방법에 대해 살펴보았습니다. 이를 통해 MediumEditor를 사용한 콘텐츠 편집 및 활용에 대한 기본적인 지식을 얻을 수 있을 것입니다.

MediumEditor 공식 문서(https://github.com/yabwe/medium-editor)에서 더 많은 정보를 얻을 수 있으며, MediumEditor를 더 깊이 탐구해 볼 수 있습니다.