버튼은 줄이고,
한글은 제대로.

스마트에디터에 익숙한 사용자가 설명 없이 바로 씁니다. 라이선스 키도, 사용량 제한도, 유료 전환도 없는 100% 무료 에디터.

시작하기 데모 열기

무료MIT 라이선스, 키·가입 없음

0외부 의존성 (jQuery 없음)

한 줄기본 툴바, 나머지는 더보기

textarea그대로 두고 씌우기

글쓰기 창, 이제 82editor 하나면 됩니다

한글 조합 입력을 테스트로 지킵니다한글 글자가 두 번 찍히거나 마지막 글자가 사라지는 문제는 여러 에디터에서 오래 열려 있는 이슈입니다. 82editor는 조합 입력을 실제 브라우저 테스트로 확인합니다.
키 없이 쓰는 MIT라이선스 키, 로고 표시, 로드 수 제한이 없습니다. 회사 사이트에서도 그대로 무료입니다.
jQuery도, 다른 의존성도 없습니다스크립트 하나, CSS 하나. 기존 사이트의 라이브러리와 부딪히지 않습니다.
사진은 서버로 올립니다base64로 글에 박아 넣지 않고 업로드 URL 한 줄로 내 서버에 올립니다. 글 용량이 가벼워집니다.
붙여넣기와 HTML 보기도 안전하게붙여 넣거나 소스에서 고친 HTML은 허용 목록으로 걸러 스크립트가 끼어들지 못합니다.
워드·한글(HWP) 붙여넣기 정리굵게, 색, 표, 셀 병합은 살리고 mso 스타일과 빈 태그는 걷어 냅니다.

한국 게시판에 딱 맞는 무료 에디터

게시판 글쓰기

기존 textarea에 씌우면 끝. 폼 전송, 수정 화면, 필수 입력 확인까지 그대로 둡니다.

Editor82.createEditor('#content', {
  toolbar: 'board',
  uploadUrl: '/upload.php',
});

쇼핑몰 상품 상세

넓은 이미지, 가운데 정렬, 표로 만든 상품 정보. 상세 페이지 폭에 맞춰 편집 영역을 맞춥니다.

createEditor('#detail', {
  contentStyle: 'body { max-width: 860px; margin: auto }',
  uploadImage: uploadToS3,
});

블로그

제목, 인용, 코드 블록, 동영상. 마크다운에 익숙하면 ## 이나 ``` 로 바로 씁니다.

createEditor('#post', {
  toolbar: 'basic',
  height: 'auto',
  autosave: true,
});

관리자 공지

공지·약관·FAQ처럼 자주 쓰는 양식은 템플릿으로. 줄간격과 글자 크기는 한국 문서 기준(%·pt)입니다.

createEditor('#notice', {
  templates: [{ title: '점검 공지', html }],
  fontSizeUnit: 'pt',
});

한글 입력과 붙여넣기, 한국 문서 기준으로

조합 중엔 건드리지 않기받침이 사라지거나 마지막 글자가 두 번 찍히는 일이 없습니다. 실행 취소와 자동 서식은 조합이 끝난 뒤에.
한글·워드 문서 붙여넣기굵게, 색, 표, 셀 병합은 살리고 mso 스타일과 빈 span은 걷어 냅니다.
pt 글자 크기, % 줄간격맑은 고딕·나눔고딕 같은 글꼴 목록과 함께, 한국 문서에 익숙한 단위로.

워드가 넘겨주는 HTML (예시)

<p class=MsoNormal style='line-height:150%'>
<b><span style='font-size:14.0pt;font-family:"맑은 고딕";
mso-bidi-font-family:"Times New Roman"'>3분기 보고서</span></b>
<o:p></o:p></p>
<p class=MsoListParagraph style='mso-list:l0 level1 lfo1'>
span>1.<span>&nbsp;</span></span>
o:p></o:p></p>

82editor가 넣는 HTML

<p style="line-height: 150%">
  <strong><span style="font-size: 14pt">3분기 보고서</span></strong>
</p>
<ol>
  <li>매출 12% 증가</li>
</ol>

스마트에디터 2, Summernote에서 옮겨 오기

같은 textarea, 같은 필드 이름. 서버 코드는 손대지 않고 스크립트 몇 줄만 바꿉니다. 기존 글도 그대로 열립니다.

<textarea name="ir1" id="ir1"></textarea>
<script src="/se2/js/service/HuskyEZCreator.js"></script>
<script>
  var oEditors = [];
  nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors, elPlaceHolder: 'ir1',
    sSkinURI: '/se2/SmartEditor2Skin.html',
  });
  function submitContents() {
    oEditors.getById['ir1'].exec('UPDATE_CONTENTS_FIELD', []);
    document.forms[0].submit();
  }
</script>

<textarea name="ir1" id="ir1"></textarea>
<link rel="stylesheet" href="https://82editor.com/cdn/v1.0.0/82editor.css">
<script src="https://82editor.com/cdn/v1.0.0/82editor.min.js"></script>
<script>
  Editor82.createEditor('#ir1', { toolbar: 'board', uploadUrl: '/upload.php' });
  // textarea is kept in sync automatically: no UPDATE_CONTENTS_FIELD
  function submitContents() { document.forms[0].submit(); }
</script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="summernote-lite.min.css" rel="stylesheet">
<script src="summernote-lite.min.js"></script>
<textarea id="summernote" name="content"></textarea>
<script>
  $('#summernote').summernote({
    height: 400,
    callbacks: { onImageUpload: (files) => upload(files[0]) },
  });
  const html = $('#summernote').summernote('code');
</script>

<link rel="stylesheet" href="https://82editor.com/cdn/v1.0.0/82editor.css">
<script src="https://82editor.com/cdn/v1.0.0/82editor.min.js"></script>
<textarea id="summernote" name="content"></textarea>
<script>
  const editor = Editor82.createEditor('#summernote', {
    height: 400,
    uploadImage: (file) => upload(file), // return the image URL
  });
  const html = editor.getHTML();
</script>

스마트에디터 2 옮기기 안내 Summernote 옮기기 안내 Toast UI Editor 대안 CKEditor 4 대안

React, Vue, Svelte, Angular도 그대로

<link rel="stylesheet" href="https://82editor.com/cdn/v1.0.0/82editor.css">
<script src="https://82editor.com/cdn/v1.0.0/82editor.min.js"></script>

<textarea id="content" name="content"></textarea>
<script>
  Editor82.createEditor('#content', { toolbar: 'board', height: 400 });
</script>

import { createEditor } from '@82editor/core';
import '@82editor/core/styles.css';

const editor = createEditor('#editor', {
  placeholder: '내용을 입력하세요',
  toolbar: 'board',
  height: 400,
});

editor.on('change', (html) => console.log(html));

import { useState } from 'react';
import { Editor82 } from '@82editor/react';
import '@82editor/core/styles.css';

export function WriteForm() {
  const [html, setHtml] = useState('');
  return <Editor82 value={html} onChange={setHtml} options={{ toolbar: 'board', height: 400 }} />;
}

<script setup>
import { ref } from 'vue';
import { Editor82 } from '@82editor/vue';
import '@82editor/core/styles.css';

const html = ref('');
</script>

<template>
  <Editor82 v-model="html" :options="{ toolbar: 'board', height: 400 }" />
</template>

<script>
  import { Editor82 } from '@82editor/svelte';
  import '@82editor/core/styles.css';

  let html = $state('');
</script>

<Editor82 bind:value={html} options={{ toolbar: 'board', height: 400 }} />

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Editor82Component } from '@82editor/angular';

@Component({
  selector: 'app-write',
  standalone: true,
  imports: [FormsModule, Editor82Component],
  template: `<editor-82 [(ngModel)]="html" [options]="{ toolbar: 'board', height: 400 }"></editor-82>`,
})
export class WriteComponent {
  html = '';
}
// angular.json → "styles": ["node_modules/@82editor/core/dist/styles.css"]

지금 쓰는 글쓰기 창에 붙여 보세요.

가입도 키도 필요 없습니다. 회사 사이트도 무료입니다.

시작하기

버튼은 줄이고,한글은 제대로.