HTML WYSIWYG 편집기
무료 온라인 HTML 시각적 편집기, 설치 필요 없음. 실시간 미리보기 및 양방향 연결 기능을 갖춘 WYSIWYG 편집기입니다.
HTML 에디터 소개
브라우저의 contentEditable 및 document.execCommand API를 기반으로 구축된 WYSIWYG 에디터입니다. 편집 가능한 영역에 입력하고 도구 모음으로 서식을 지정하면 기본 HTML이 아래의 코드 텍스트 영역과 동기화됩니다. 출력은 브라우저가 내보내는 것을 그대로 반영하므로 마크업이 직접 작성한 HTML과 다를 수 있습니다.
사용 방법
1. 편집 영역을 클릭하여 텍스트를 입력하거나 선택합니다 2. 도구 모음 버튼(B, I, U, S, 목록, 정렬, H1/H2/P)을 사용하여 서식을 적용합니다 3. 링크 버튼을 클릭하여 URL 대화상자로 하이퍼링크를 삽입합니다 4. 코드 텍스트 영역에서 HTML을 직접 편집하여 미리보기를 역방향으로 업데이트합니다 5. 복사를 클릭하여 현재 HTML을 클립보드에 복사합니다
도구 모음 동작
사용 가능한 동작: 굵게, 기울임, 밑줄, 취소선; 순서 없는 목록 및 순서 있는 목록; 왼쪽/가운데/오른쪽 정렬; H1, H2 및 단락 블록 서식; 링크 삽입(URL 입력 요청); 가로선 삽입. 이미지 업로드, 표 삽입, 소스 정리 또는 출력에 대한 HTML 삭제는 지원되지 않습니다.
▶생성된 HTML이 지저분해 보이는 이유는 무엇인가요?
이 에디터는 document.execCommand를 사용하며, 이는 브라우저별 마크업(종종 <span style="font-weight: bold">와 같은 인라인 스타일 속성)을 생성합니다. 게시하기 전에 코드 텍스트 영역이나 포매터로 정리하세요.
▶이미지나 표를 삽입할 수 있나요?
아니요. 도구 모음은 텍스트 서식, 목록, 정렬, 제목, 링크 및 가로선만 지원합니다. 표는 전용 HTML 표 생성기 도구를 사용하세요.
▶코드 텍스트 영역을 편집하면 미리보기가 업데이트되나요?
네. 코드 텍스트 영역에 입력하면 편집 영역이 다시 렌더링되고, 에디터의 편집도 텍스트 영역을 업데이트합니다. 두 영역 사이의 피드백 루프를 방지하는 가드가 있습니다.
▶document.execCommand는 더 이상 사용되지 않나요?
네. execCommand는 사양에서 더 이상 사용되지 않는 것으로 표시되지만, 현재 모든 브라우저에서 여전히 작동합니다. 새로 개발하는 에디터에는 최신 라이브러리를 고려하세요. 이 도구는 단순함을 위해 기존 방식을 유지합니다.
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.