[jodit-react]사용기

설치하기

npm install jodit-react

코드 가져오기

반드시 dynamic import를 해줘야 한다.

"use client";
import React, { useRef } from "react";
import dynamic from 'next/dynamic';
import { useState,useMemo } from "react";
const JoditEditor = dynamic(() => import('jodit-react'), { ssr: false });

export default function page() {
  const editor = useRef(null);

  const placeholder='Hello'

  const [content, setContent] = useState("");
  const [result, setResult] = useState("")
  const handleClick= ()=>{
    if(content.includes('td style=')){
      let result=content.replaceAll('td style="', `td style="border:1px solid black;`);
      setResult(result)
    
    }else{
      setResult(content)
    }
  }


  
  
  return (
    <div>
      <h1>안녕하세요</h1>
      <JoditEditor
        ref={editor}
        value={content}
        onChange={(newContent) => {
          setContent(newContent)
        }}
      />
    <div>
      <div>
        {content}
      </div>
    <button onClick={handleClick}>
      변환
    </button>
    </div>
    </div>
  );
}