React

React 컴포넌트로 82editor 쓰기.

npm i @82editor/core @82editor/react

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 }} />;
}

value 와 onChange 로 제어 컴포넌트처럼 씁니다. 바깥에서 value 를 바꾸면 에디터 내용도 바뀝니다.
나머지 props 는 옵션과 같습니다.
ref 로 에디터 인스턴스를 받습니다.
Next.js 에서도 마운트된 뒤에만 만들어지므로 SSR 에서 문제가 없습니다.

ref 로 인스턴스 쓰기

import { useRef } from 'react';
import { Editor82, type Editor } from '@82editor/react';

function Write() {
  const ref = useRef<Editor>(null);
  return (
    <>
      <Editor82 ref={ref} options={{ toolbar: 'board' }} />
      <button onClick={() => alert(ref.current?.getStats().chars)}>글자 수</button>
    </>
  );
}