MediumEditor는 사용자가 콘텐츠를 편집하는 데 사용할 수 있는 JavaScript 기반의 WYSIWYG 에디터입니다. 이 에디터를 사용하여 사용자가 작성한 콘텐츠의 HTML을 가져오는 방법을 알아보겠습니다.

1. MediumEditor 설정하기

먼저 MediumEditor를 설정하고 초기화해야 합니다. 이를 위해 다음과 같은 스크립트 코드를 HTML 파일에 추가합니다.

<script>
    var editor = new MediumEditor('.editable');
</script>

위의 코드에서 .editable는 에디터를 적용할 페이지의 HTML 요소를 선택하는 CSS 선택자입니다. 이를 에디터로 사용하고 싶은 요소의 클래스나 ID로 변경하십시오.

2. HTML 내용 가져오기

MediumEditor의 getContent() 메서드를 사용하면 현재 편집된 콘텐츠의 HTML을 가져올 수 있습니다. 이를 아래와 같이 사용할 수 있습니다.

<script>
    var editor = new MediumEditor('.editable');

    function getContent() {
        var content = editor.getContent();
        console.log(content);
    }
</script>

위의 코드에서 getContent() 함수를 호출하면 에디터에 작성한 콘텐츠의 HTML이 콘솔에 출력됩니다. 이를 원하는 대로 조작할 수 있습니다.

3. 사용 예제

다음은 MediumEditor에서 작성한 콘텐츠의 HTML을 가져와서 다른 곳에 삽입하는 간단한 예제입니다.

<script>
    var editor = new MediumEditor('.editable');

    function getContent() {
        var content = editor.getContent();
        document.getElementById('result').innerHTML = content;
    }
</script>

<div class="editable"></div>
<button onclick="getContent()">콘텐츠 가져오기</button>
<div id="result"></div>

위의 예제는 .editable 클래스를 가진 요소를 에디터로 사용하고, “콘텐츠 가져오기” 버튼을 클릭하면 해당 콘텐츠의 HTML이 result ID를 가진 요소에 나타납니다.

MediumEditor를 사용하여 콘텐츠의 HTML을 가져오는 방법에 대해 알아보았습니다. 이를 활용하여 사용자가 작성한 콘텐츠를 다른 곳에 삽입하거나 다양한 용도로 활용할 수 있습니다.

참조:

• MediumEditor 공식 문서
• MediumEditor GitHub 저장소