[javascript] MediumEditor와 인라인 에디팅 기능 사용하기

30 Nov 2023

javascript

MediumEditor는 HTML의 인라인 에디팅을 가능하게 해주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에서 쉽게 텍스트를 편집하고 스타일링할 수 있습니다.

MediumEditor 설치 및 설정하기

먼저 MediumEditor를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install medium-editor

설치가 완료되면, HTML 파일에 다음과 같이 스크립트를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <title>MediumEditor 예제</title>
  <link rel="stylesheet" href="https://unpkg.com/medium-editor@5.23.3/dist/css/medium-editor.min.css">
</head>
<body>
  <h1>MediumEditor 사용하기</h1>
  <div id="editable" contenteditable="true"></div>

  <script src="https://unpkg.com/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>
  <script>
    var editor = new MediumEditor('#editable');
  </script>
</body>
</html>

위의 코드는 MediumEditor를 사용하여 editable이라는 ID를 가진 div를 인라인 에디팅 가능하게 만들어주는 예제입니다. MediumEditor의 스타일은 CDN을 통해 가져와 사용하고 있습니다.

MediumEditor 사용법

MediumEditor는 다양한 옵션을 제공하여 텍스트 편집에 관련된 다양한 기능을 사용할 수 있습니다. 여기에는 텍스트 스타일링, 이미지 삽입, 링크 추가 등이 포함됩니다.

텍스트 스타일링

텍스트에 스타일을 적용하기 위해서는 toolbar의 스타일 관련 버튼을 사용하면 됩니다. 예를 들어, 텍스트를 굵게 표시하고 싶다면, B 버튼을 클릭하거나 Ctrl + B 키를 누르면 됩니다.

이미지 삽입

이미지를 삽입하기 위해서는 toolbar의 이미지 관련 버튼을 사용하면 됩니다. 버튼을 클릭하면 이미지를 선택할 수 있는 기능이 제공됩니다.

링크 추가

텍스트에 링크를 추가하기 위해서는 toolbar의 링크 관련 버튼을 사용하면 됩니다. 버튼을 클릭하고 링크 URL을 입력하면 해당 텍스트에 링크가 추가됩니다.

결론

MediumEditor는 웹 페이지에서 텍스트를 빠르고 간편하게 편집할 수 있는 기능을 제공합니다. 다양한 옵션과 기능을 활용하여 원하는 스타일링과 편집 기능을 적용할 수 있습니다. 더 자세한 내용은 공식 문서를 참고하세요.