[javascript] MediumEditor에서 텍스트 찾기 및 바꾸기

30 Nov 2023

javascript

MediumEditor는 인기있는 WYSIWYG (What You See Is What You Get) 텍스트 편집기 중 하나입니다. 이 편집기는 사용자가 텍스트를 쉽게 편집하고 서식을 지정할 수 있는 다양한 기능을 제공합니다. 이번에는 MediumEditor에서 특정 텍스트를 찾고 바꾸는 방법에 대해서 알아보겠습니다.

1. 텍스트 찾기

MediumEditor에서 특정 텍스트를 찾기 위해서는 Search 플러그인을 사용할 수 있습니다. Search 플러그인은 편집기 내에서 텍스트를 검색하고 해당 텍스트를 강조 표시하는 기능을 제공합니다. 아래는 MediumEditor에서 텍스트를 찾는 예제 코드입니다.

var editor = new MediumEditor('.editable');
var search = new MediumEditor.extensions.search();

// 텍스트 찾기 이벤트
search.subscribe('editableKeyup', function(event, editable) {
    var keyword = '검색어';   // 찾을 텍스트
    var content = editable.innerHTML;

    // 텍스트 강조 표시
    var highlightedContent = content.replace(new RegExp(keyword, 'gi'), '<span class="highlighted">' + keyword + '</span>');
    editable.innerHTML = highlightedContent;
});

editor.extensions.push(search);

위의 코드에서는 MediumEditor를 초기화하고 editable 클래스를 가진 텍스트 영역에서 editableKeyup 이벤트를 구독합니다. 이벤트가 발생하면 텍스트 영역에서 검색어를 찾고, 찾은 텍스트를 강조 표시하기 위해 <span> 태그를 사용합니다.

참고: MediumEditor 공식 문서

2. 텍스트 바꾸기

MediumEditor에서 텍스트를 바꾸려면 Replace 플러그인을 사용할 수 있습니다. Replace 플러그인은 검색어에 해당하는 텍스트를 일괄적으로 바꾸는 기능을 제공합니다. 아래는 MediumEditor에서 텍스트를 바꾸는 예제 코드입니다.

var editor = new MediumEditor('.editable');
var replace = new MediumEditor.extensions.replace();

// 텍스트 바꾸기 이벤트
replace.subscribe('editableKeyup', function(event, editable) {
    var keyword = '찾을 텍스트';   // 찾을 텍스트
    var replaceText = '바꿀 텍스트';

    // 텍스트 바꾸기
    var content = editable.innerHTML;
    var replacedContent = content.replace(new RegExp(keyword, 'gi'), replaceText);
    editable.innerHTML = replacedContent;
});

editor.extensions.push(replace);

위의 코드에서도 마찬가지로 MediumEditor를 초기화하고 editableKeyup 이벤트를 구독합니다. 이벤트가 발생하면 텍스트 영역에서 검색어를 찾아 바꿀 텍스트로 일괄적으로 바꿉니다.

참고: MediumEditor 공식 문서

위에 소개한 예제 코드를 참고하여 MediumEditor에서 텍스트 찾기 및 바꾸기 기능을 구현해보세요!