@wooritech/draft-js-plus

Draft-Js-Plus

예시

import React from 'react';
import './App.css';
import DraftEditor, { EditorState } from '@wooritech/draft-js-plus'

// Simple Use
function App() {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty(),
  );

  return (
    // .App 에 CSS로 전체 레이아웃 설정가능
    <div className="App">
      <button onClick={_onBold}>Bold</button>
      <button onClick={click}>스테이트</button>
      <DraftEditor 
        editorState={editorState}
        onChange={setEditorState}
        placeholder="Something Text"
        />
    </div>
  );
}

export default App;

import { convertToRaw, RichUtils } from '@wooritech/draft-js-plus'
  
// RichUtils 예시
const _onHeaderOne = () => { // <h1> 태그
setEditorState(RichUtils.toggleBlockType(editorState, 'header-one'))
}
const _onHeaderTwo = () => { // <h2> 태그
setEditorState(RichUtils.toggleBlockType(editorState, 'header-two'))
}
const _onHeaderThree = () => { // <h3> 태그
setEditorState(RichUtils.toggleBlockType(editorState, 'header-three'))
}
const _onHeaderFour = () => { // <h4> 태그
setEditorState(RichUtils.toggleBlockType(editorState, 'header-four'))
}
const _onHeaderFive = () => { // <h5> 태그
setEditorState(RichUtils.toggleBlockType(editorState, 'header-five'))
}
const _onBold = () => { // <strong> 태그
setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
}
const _onUnderlineClick = () => { // <underline> 태그
setEditorState(RichUtils.toggleInlineStyle(editorState, 'UNDERLINE'));
}
const _onToggleCode = () => { // <code> 태그
setEditorState(RichUtils.toggleCode(editorState));
}

const convertRawObject = () => {
    const rawData = convertToRaw(editorState.getCurrentContent())
    // rawData 내용
    console.log(rawData);
}

// Editor -> 선택 행 굵게
<button onClick={_onBold}>굵게</button>

// Editor -> 내용을 RawObject 변환
<button onClick={convertRawObject}>RawObject</button>

THANKS