[javascript] MediumEditor에서 취소선 및 하이라이트 스타일링하기
MediumEditor는 선택한 텍스트의 스타일을 임의로 변경할 수 있는 JavaScript 기반의 WYSIWYG 에디터입니다. 이 글에서는 MediumEditor를 사용하여 텍스트에 취소선 및 하이라이트 스타일을 추가하는 방법에 대해 알아보겠습니다.
1. MediumEditor 설치하기
MediumEditor를 사용하기 전에 먼저 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 MediumEditor를 설치할 수 있습니다:
npm install medium-editor
2. 취소선 스타일링 추가
MediumEditor에서 텍스트에 취소선을 추가하려면 다음과 같은 단계를 따르세요:
medium-editor-font-awesome패키지를 설치합니다:
npm install medium-editor-font-awesome
- 작성한 문서에 Font Awesome 아이콘 폰트를 추가합니다.
<head>태그 내부에 다음 코드를 입력합니다:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
- MediumEditor의 옵션으로
buttonLabels: 'fontawesome'를 추가합니다:
var editor = new MediumEditor('.editable', {
buttonLabels: 'fontawesome'
});
button stay-selected클래스를 사용하여 커스텀 취소선 버튼을 생성합니다:
<button class="medium-editor-action ab-md-strike" data-action="strikethrough"><i class="fas fa-strikethrough"></i></button>
- CSS 스타일시트에서
.fa-strikethrough클래스에 해당하는 취소선 스타일을 정의합니다:
.fa-strikethrough {
text-decoration: line-through;
}
위 단계를 따르면 취소선 스타일링이 MediumEditor에 추가됩니다.
3. 하이라이트 스타일링 추가
MediumEditor에서 텍스트에 하이라이트 스타일을 추가하려면 다음과 같은 단계를 따르세요:
medium-editor-insert-plugin패키지를 설치합니다:
npm install medium-editor-insert-plugin
- 작성한 문서에 MediumEditor Insert Plugin JavaScript 파일과 CSS 파일을 추가합니다.
<head>태그 내부에 다음 코드를 입력합니다:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/medium-editor-insert-plugin@2.5.1/dist/js/medium-editor-insert-plugin.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor-insert-plugin@2.5.1/dist/css/medium-editor-insert-plugin.min.css" />
button stay-selected클래스를 사용하여 커스텀 하이라이트 버튼을 생성합니다:
<button class="medium-editor-action ab-md-highlight" data-action="highlight"><i class="fas fa-highlighter"></i></button>
- CSS 스타일시트에서
.fa-highlighter클래스에 해당하는 하이라이트 스타일을 정의합니다:
.fa-highlighter {
background-color: yellow;
}
위 단계를 따르면 하이라이트 스타일링이 MediumEditor에 추가됩니다.
MediumEditor을 통해 취소선 및 하이라이트 스타일을 원하는 대로 사용해볼 수 있습니다. 텍스트 스타일을 추가로 변경하려면 MediumEditor의 다양한 기능과 옵션을 살펴보시기 바랍니다.