LiteEditor 플러그인 데모

첫 번째 항목
두 번째 항목
세 번째 항목
네 번째 항목

LiteEditor 소개, 이 크기는 h1 태그입니다.

LiteEditor는 웹 페이지에 쉽게 통합할 수 있는 고정형 리치 텍스트 에디터 플러그인입니다. 사용자가 다양한 서식을 적용할 수 있는 직관적인 도구 모음을 제공합니다.

📋 LiteEditor 단축키 가이드 (v1.0.21 기준)

  // ✅ 텍스트 서식 (정상 동작)
  - bold: { key: 'b', cmd: true },               // ⌘+B / Ctrl+B
  - italic: { key: 'i', cmd: true },             // ⌘+I / Ctrl+I  
  - underline: { key: 'u', cmd: true },          // ⌘+U / Ctrl+U
  - strike: { key: 's', cmd: true, shift: true }, // ⌘+Shift+S / Ctrl+Shift+S
  
  // ✅ 헤딩 (정상 동작)
  - heading1: { key: '1', cmd: true },            // ⌘+1
  - heading2: { key: '2', cmd: true },            // ⌘+2  
  - heading3: { key: '3', cmd: true },            // ⌘+3
  - paragraph: { key: '4', cmd: true },           // ⌘+4 (본문)
  
  // ✅ 리스트 (정상)
  - bulletList: { key: 'u', cmd: true, shift: true }, // ⌘+Shift+U / Ctrl+Shift+U
  - numberedList: { key: 'o', cmd: true, shift: true }, // ⌘+Shift+O / Ctrl+Shift+O
  - checkList: { key: 'k', cmd: true, shift: true }, // ⌘+Shift+K / Ctrl+Shift+K
  
  // ✅ 편집 (정상 동작)
  - undo: { key: 'z', cmd: true },                // ⌘+Z / Ctrl+Z
  - redo: { key: 'z', cmd: true, shift: true },   // ⌘+Shift+Z / Ctrl+Shift+Z
    
  // ✅ 들여쓰기 (정상 동작)
  - indent: { key: 'Tab' },                       // Tab
  - outdent: { key: 'Tab', shift: true },         // Shift+Tab
  
  // ✅ 서식 제거 (정상 동작)
  - reset: { key: '\\', cmd: true, shift: true }, // ⌘+Shift+\ / Ctrl+Shift+\
  
  // ✅ 삽입 (정상 동작)
  - code: { key: 'e', cmd: true, shift: true },       // ⌘+Shift+E / Ctrl+Shift+E
  - blockquote: { key: "'", cmd: true, shift: true }, // ⌘+Shift+' / Ctrl+Shift+'
  
  // ✅ 정렬 (정상 동작)
  - alignLeft: { key: 'l', cmd: true, alt: true },    // ⌘+⌥+L / Ctrl+⌥+L
  - alignCenter: { key: 'c', cmd: true, alt: true },  // ⌘+⌥+C / Ctrl+⌥+C
  - alignRight: { key: 'r', cmd: true, alt: true },   // ⌘+⌥+R / Ctrl+⌥+R
  - alignJustify: { key: 'j', cmd: true, alt: true }, // ⌘+⌥+J / Ctrl+⌥+J
  
  // 🚫 레이어 기능 (단축키 지원 안함)
  - 링크, 이미지, 테이블, 미디어는 클릭으로만 사용 가능

https://raw.githubusercontent.com/villainscode/tech-interview-for-junior/main/image/comment.png

LiteEditor 기능 테스트용 샘플 텍스트, 이 크기는 h2 태그입니다.

기본 서식 테스트, 이 크기는 h3 태그입니다.

안녕하세요! 이 텍스트는 굵게 서식을 테스트하기 위한 문장입니다. 기울임체로 작성된 부분도 확인해보세요. 또한 밑줄과 취소선 기능도 테스트해볼 수 있습니다. 물론 다 적용해볼 수도 있죠.

제목 스타일

에디터의 Heading 기능을 사용하여 이 텍스트를 다양한 크기의 제목으로 변경해보세요. H1부터 H3까 크기를 적용할 수 있습니다. 기본값은 일반 Paragraph로 텍스트가 채워집니다.

글자 색상 및 하이라이트

이 부분은 글자 색상을 변경해보세요. 다양한 색상을 선택하여 텍스트에 적용할 수 있습니다. 또한 텍스트 배경에 하이라이트 효과를 주고 싶다면 해당 텍스트를 선택한 후 하이라이트 도구를 사용해보세요.

글꼴 변경

이 문장의 글꼴을 변경해보세요. 에디터에서 제공하는 다양한 글꼴(굴림체, 바탕체, Noto Sans KR, 나눔고딕, Black Han Sans, 도현체 등)을 적용해볼 수 있습니다.

- 도현체
- 나눔고딕
- 바탕체
- 굴림체
- Noto Sans KR
- Black Han Sans

코딩 폰트도 적용할 수 있어요.
- Hack
- JetBrains Mono

영문도 적용합니다.

arial
Courier new
블록쿼트도 적용합니다.
블록쿼트 아이콘을 누르세요. 엔터를 치면 밖으로 빠져나옵니다.

이미지 추가

이미지를 추가하려면 아래 이미지 URL을 복사하고 Image 버튼을 클릭한 후 URL을 붙여넣으세요:

이미지 주소는
https://raw.githubusercontent.com/haru-note/harunote.github/main/image/book.jpg
입니다.

동영상 링크

동영상을 추가하려면 아래 유튜브 URL을 복사하여 Link 버튼을 클릭한 후 URL을 붙여넣으세요:

https://youtube.com/shorts/CuL-8CsrMZw?si=rZiyYB0sNegg6m5O

순서 있는 리스트

이 부분을 선택하고 순서 있는 리스트(Numbered List) 버튼을 클릭하세요:

첫 번째 항목
두 번째 항목
세 번째 항목
네 번째 항목

순서 없는 리스트

이 부분을 선택하고 순서 없는 리스트(Bullet List) 버튼을 클릭하세요:

과일 항목
채소 항목
육류 항목
유제품 항목

체크리스트

체크리스트를 테스트하려면 이 부분을 선택하고 CheckList 버튼을 클릭하세요.

첫 번째 항목
두 번째 항목
세 번째 항목
네 번째 항목

코드 및 코드블럭 하일라이팅, 자동 Syntax 하일라이팅 적용

인라인 코드를 테스트하려면 이 부분을 선택하고 Code 버튼을 클릭하세요.

이 함수는 console.log()를 사용합니다.

function testFunction() {
console.log("Hello, LiteEditor!");
return true;
}

const result = testFunction();
핵심 포인트 📌 ⭐ ❗ 단계 표시 🔹 🔸 ◾ ▪ 섹션 구분 ─────── 순서/단계 ① ② ③ 🔢 예시/샘플 📋 📝 📄 문서/코드 📄 🧾 🗒️ 링크 🔗 🌐 성공/정상 ✅ ✔️ 🟢 실패/에러 ❌ ⚠️ 🔴 참고/주의 ⚠️ 🔔 🟡 정보 ℹ️ 💡 🔍 완료 🏁 🟢 ✅ 진행 중 ⏳ 🔄 🕐 코드 💻 🧑‍💻 🧾 설정 ⚙️ 🔧 🛠 경로 📁 📂 서버 🖥️ 🌐 🧱 인증 🔐 🔑 API 호출 📡 🔄 버그/오류 🐛 ❌ 패키지/라이브러리 📦 통계 📊 📈 📉 로그 📜 🧾 모니터링 🔎 👀 메트릭 📏 🧮

링크 추가

링크를 추가하려면 이 텍스트를 선택하고 Link 버튼을 클릭한 후 http://www.google.com 을 입력하세요.

테이블 추가

테이블을 추가하려면 Table 버튼을 클릭하고 원하는 행과 열 수를 선택하세요. 예를 들어, 3x3 테이블을 만들어 제품 정보를 표시할 수 있습니다.

서식 지우기

모든 서식을 제거하려면 위의 내용을 선택한 후 Reset Format 버튼을 클릭하세요. 모든 서식(굵게, 기울임, 밑줄, 색상 등)이 제거되고 일반 텍스트로 변환됩니다.

실행 취소 및 재실행

텍스트를 편집한 후 Undo 버튼을 클릭하여 이전 상태로 되돌리거나, Redo 버튼을 클릭하여 취소한 작업을 다시 적용해보세요.

기능 목록

LiteEditor는 플러그인 기반 구조로 다양한 기능을 확장할 수 있습니다.

format_bold 굵게 (Bold)

중요한 텍스트를 강조할 때 사용합니다.
단축키: ⌘+B

이 텍스트는 굵게 표시

format_italic 기울임 (Italic)

강조나 인용에 사용되는 기울임 서식
단축키: ⌘+I

이 텍스트는 기울임으로 표시

format_underlined 밑줄 (Underline)

텍스트에 밑줄을 추가하여 강조합니다.
단축키: ⌘+U

이 텍스트에는 밑줄이 그어짐

format_strikethrough 취소선 (Strikethrough)

~~삭제된 내용이나 수정사항~~을 표시할 때 사용합니다.
단축키: ⌘+Shift+S

~~이 텍스트는 취소선 처리~~

title 제목 (Heading)

문서의 계층 구조를 만들기 위한 제목 스타일입니다.
단축키: ⌘+1, ⌘+2, ⌘+3, ⌘+4

제목 1 (H1)

제목 2 (H2)

제목 3 (H3)

본문 텍스트 (Paragraph)

format_quote 인용구 (Blockquote)

다른 사람의 말이나 중요한 인용문을 표시할 때 사용합니다.

"혁신은 1%의 영감과 99%의 노력으로 이루어진다" - 토마스 에디슨

format_align_justify 정렬 (Alignment)

텍스트의 정렬 방향을 설정할 수 있습니다.
단축키: ⌘+⌥+L, C, R, J (개발 중)

← 왼쪽 정렬

중앙 정렬

오른쪽 정렬 →

format_indent_increase 들여쓰기 (Indent), 내어쓰기 (Outdent)

텍스트나 목록의 들여쓰기를 조정할 수 있습니다.

기본 들여쓰기

1단계 들여쓰기

2단계 들여쓰기

font_download 글꼴 (Font Family)

다양한 글꼴을 선택하여 텍스트 스타일을 변경할 수 있습니다.

도현체 글꼴로 작성된 텍스트

Times New Roman 글꼴로 작성된 텍스트

palette 글자색 (Font Color)

텍스트 색상을 변경하여 시각적 효과를 줄 수 있습니다.

빨간색 텍스트 | 파란색 텍스트 | 초록색 텍스트

format_color_fill 형광펜 (Emphasis)

중요한 내용에 배경색을 추가하여 강조할 수 있습니다.

노란색 형광펜 | 주황색 형광펜

format_list_bulleted 불릿 목록 (Bullet List)

순서가 없는 항목들을 나열할 때 사용합니다.

첫 번째 항목
두 번째 항목
세 번째 항목

format_list_numbered 번호 목록 (Numbered List)

순서가 있는 항목들을 나열할 때 사용합니다.

첫 번째 단계
두 번째 단계
세 번째 단계

checklist 체크리스트 (Check List)

할 일 목록이나 완료 체크가 필요한 항목에 사용합니다.

☑️ ~~완료된 작업~~

☐ 진행 중인 작업

☐ 대기 중인 작업

photo_camera 이미지 업로드 (link & file)

이미지를 업로드하거나 URL로 삽입할 수 있습니다.
- 이미지 리사이즈
- Copy & Paste
- Drag & Drop

📷 이미지 업로드 영역

grid_on 테이블 (Table)

정형화된 데이터를 표 형태로 구성할 수 있습니다.

제목 1	제목 2
데이터 1	데이터 2

link 링크 (Link)

외부 사이트나 내부 페이지로 연결되는 링크를 생성합니다.

이것은 링크입니다

video_library 미디어 (Media)

유튜브등 동영상 미디어 링크를 삽입할 수 있습니다.

🎬 동영상 플레이어 영역

code 인라인 코드 (Inline Code)

문장 내에서 짧은 코드나 명령어를 표시할 때 사용합니다.

이 함수는 console.log()를 사용합니다.

code_blocks 코드 블록 (Code Block)

여러 줄의 코드를 구문 강조와 함께 표시할 수 있습니다.

function hello() {
  console.log("Hello, World!");
  return true;
}

horizontal_rule 수평선 (Horizontal Line)

문서 내용을 구분하는 수평선을 삽입할 수 있습니다.

위쪽 내용

아래쪽 내용

undo redo 실행 취소/되돌리기 (Undo/Redo)

작업을 취소하거나 다시 실행할 수 있습니다. 단축키: Ctrl+Z / Ctrl+Shift+Z

format_clear 서식 지우기 (Clear Format)

선택된 텍스트의 모든 서식을 제거하고 기본 텍스트로 되돌립니다.

서식이 적용된 텍스트 → 일반 텍스트

사용 방법

다음과 같은 완전한 코드로 LiteEditor를 추가할 수 있습니다.

에디터 Toolbar의 영역과 편집이 가능한 content 영역을 분리할 수 있습니다

📋 완전한 설치 예시:

🔹 분리 모드 (Separated Mode) - 권장

특징: 툴바와 콘텐츠 영역을 별도로 배치 가능, 레이아웃 자유도 높음

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>LiteEditor 분리 모드</title>
</head>
<body>
    <!-- 에디터 컨테이너 (히스토리 시스템을 위해 필요) -->
    <div class="lite-editor" id="main-editor">
        <!-- 툴바 영역 (원하는 위치에 배치 가능) -->
        <div id="lite-editor-toolbar"></div>

        <!-- 에디터 콘텐츠 영역 -->
        <div id="lite-editor-content" contenteditable="true">
            <p>여기에 내용을 입력하세요...툴바에서 클릭된 기능이 이곳에 적용됩니다.</p>
        </div>
    </div>

    <!-- JavaScript 로더 -->
    <script src="js/loader.js"></script>
    
    <script>
    // 모든 스크립트 로드 완료 후 에디터 초기화
    document.addEventListener('lite-editor-loaded', function() {
        const editor = LiteEditor.init('#lite-editor-content', {
            separatedMode: true,                    // 분리 모드 활성화
            toolbarTarget: '#lite-editor-toolbar', // 툴바 대상 지정
            plugins: [
                'fontFamily', 'heading', 'fontColor', 'emphasis',
                'bold', 'italic', 'underline', 'strike',
                'link', 'imageUpload', 'table', 'media',
                'line','blockquote', 'code', 'codeBlock',
                'unorderedList', 'orderedList', 'checkList',
                'align', 'formatIndent',
                'historyInit', 'undo', 'redo', 'reset'
            ],
            dividers: [4, 8, 12, 16, 19, 22],
            dimensions: {
                editor: {
                    width: '920px',    // ✅ 에디터 전체 너비 (최대 아이콘시 920px 이상 권장, 버전별 메뉴얼을 확인하세요.)
                    height: '650px'
                },
                toolbar: {
                    height: '42px'
                },
                content: {
                    height: '608px',
                    minHeight: '608px'
                }
            }
        });
    });
    </script>
</body>
</html>

🔹 통합 모드 (Integrated Mode) - 기본값

특징: 자동으로 완전한 에디터 생성, dimensions 설정 모두 적용됨

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>LiteEditor 통합 모드</title>
</head>
<body>
    <!-- 원본 요소 (LiteEditor가 완전히 대체함) -->
    <div id="editor">
        <p>기존 내용이 있다면 여기에 작성하세요...</p>
    </div>

    <!-- JavaScript 로더 -->
    <script src="js/loader.js"></script>
    
    <script>
    // 모든 스크립트 로드 완료 후 에디터 초기화
    document.addEventListener('lite-editor-loaded', function() {
        // separatedMode: false (기본값이므로 생략 가능)
        plugins: [
            'fontFamily', 'heading', 'fontColor', 'emphasis',
            'bold', 'italic', 'underline', 'strike',
            'link', 'imageUpload', 'table', 'media',
            'line','blockquote', 'code', 'codeBlock',
            'unorderedList', 'orderedList', 'checkList',
            'align', 'formatIndent',
            'historyInit', 'undo', 'redo', 'reset'
        ],
        dividers: [4, 8, 12, 16, 19, 22],
        dimensions: {
            editor: {
                width: '920px',    // ✅ 에디터 전체 너비 (최대 아이콘시 920px 이상 권장, 버전별 메뉴얼을 확인하세요.)
                height: '650px',
                maxWidth: '100%'
            },
            toolbar: {
                height: '42px'
            },
            content: {
                height: '608px',
                minHeight: '608px'
            }
        }
    });
    </script>
</body>
</html>

LiteEditor 플러그인 데모

이미지 추가

동영상 링크

코드 및 코드블럭 하일라이팅, 자동 Syntax 하일라이팅 적용

링크 추가

테이블 추가

서식 지우기

실행 취소 및 재실행

기능 목록

format_bold 굵게 (Bold)

format_italic 기울임 (Italic)

format_underlined 밑줄 (Underline)

format_strikethrough 취소선 (Strikethrough)

title 제목 (Heading)

제목 1 (H1)

제목 2 (H2)

제목 3 (H3)

format_quote 인용구 (Blockquote)

format_align_justify 정렬 (Alignment)

format_indent_increase 들여쓰기 (Indent), 내어쓰기 (Outdent)

font_download 글꼴 (Font Family)

palette 글자색 (Font Color)

format_color_fill 형광펜 (Emphasis)

format_list_bulleted 불릿 목록 (Bullet List)

format_list_numbered 번호 목록 (Numbered List)

checklist 체크리스트 (Check List)

photo_camera 이미지 업로드 (link & file)

grid_on 테이블 (Table)

link 링크 (Link)

video_library 미디어 (Media)

code 인라인 코드 (Inline Code)

code_blocks 코드 블록 (Code Block)

horizontal_rule 수평선 (Horizontal Line)

undo redo 실행 취소/되돌리기 (Undo/Redo)

format_clear 서식 지우기 (Clear Format)

사용 방법

🔹 분리 모드 (Separated Mode) - 권장

🔹 통합 모드 (Integrated Mode) - 기본값

⌨️ 단축키 치트시트 (Keyboard Shortcuts)

format_bold텍스트 서식

title제목 및 구조

format_align_center텍스트 정렬

format_list_bulleted목록

add_circle콘텐츠 삽입

edit편집 도구

lightbulbPro Tips