LiteEditor 데모

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

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

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

1. fontFamily : 폰트 설정 (한글, 영문, 코딩용)
2. heading : 제목 스타일 지정 (H1 ~ H3, p)
3. fontColor : 글자 색상
4. backgroundColor : 글자 배경색
5. bold : 텍스트 굵게
6. italic : 텍스트 기울임
7. underline : 텍스트 밑줄
8. strike : 취소선
9. link : 하이퍼링크 삽입/편집
10. image : 이미지 업로드/삽입
11. table : 표 삽입/편집
12. video : 동영상 삽입
13. line : 구분선 삽입
14. blockquote : 블록 강조
15. code : 배경색 박스
16. codeBlock : 코드 블록 삽입
17. bulletList : 불릿 목록
18. numberedList : 번호 목록
19. checkList : 체크리스트
20. align-left : 왼쪽 정렬
21. align-center : 가운데 정렬
22. align-right : 오른쪽 정렬
23. align-justify : 양쪽 정렬
24. indent : 들여쓰기
25. outdent : 내어쓰기
26. reset : 포맷 제거

텍스트 서식

Alt+B: 굵게
Alt+I: 기울임
Alt+U: 밑줄
Alt+S: 취소선

헤딩

Alt+1: 제목 1
Alt+2: 제목 2
Alt+3: 제목 3
Alt+4: 본문

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

정렬

Ctrl+Alt+L: 왼쪽 정렬
Ctrl+Alt+C: 가운데 정렬
Ctrl+Alt+R: 오른쪽 정렬

목록

Alt+U: 순서 없는 목록
Alt+O: 순서 있는 목록
Alt+K: 체크 목록

기타

Alt+Q: 인용구
Alt+H: 수평선 삽입
Alt+C: 코드 삽입

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 버튼을 클릭하세요.

코드블럭을 테스트하려면 아래 텍스트를 선택하고 CodeBlock 버튼을 클릭하세요:

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 기본 서식

기본적인 텍스트 서식 기능을 제공합니다: 굵게, 기울임, 밑줄, 취소선 등

title 제목 스타일

H1부터 H6까지 다양한 크기의 제목 태그를 적용할 수 있습니다.

format_color_text 폰트 관련

다양한 폰트 패밀리와 색상, 하이라이트를 적용할 수 있습니다.

format_align_center 정렬 및 구조

텍스트 정렬, 들여쓰기, 블록쿼트, 목록 등 다양한 구조를 적용할 수 있습니다.

format_clear 서식 초기화

적용된 모든 서식을 제거하고 순수 텍스트만 유지하는 기능을 제공합니다.

사용 방법

다음과 같은 완전한 코드로 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>

📊 모드 비교

구분	분리 모드	통합 모드
HTML 구조	사용자 정의	자동 생성
레이아웃 제어	높음	제한적
dimensions 적용	부분적 (버그)	완전 적용
설치 복잡도	중간	간단

LiteEditor 플러그인 데모

텍스트 서식

헤딩

정렬

목록

기타

이미지 추가

동영상 링크

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

링크 추가

테이블 추가

서식 지우기

실행 취소 및 재실행

기능 목록

format_bold 기본 서식

title 제목 스타일

format_color_text 폰트 관련

format_align_center 정렬 및 구조

format_clear 서식 초기화

사용 방법

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

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

📊 모드 비교