Neverending Programming Mistakes

    @wooritech/draft-js-plus
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.7 • Public • Published

    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

    Keywords

    Install

    npm i @wooritech/draft-js-plus

    DownloadsWeekly Downloads

    1

    Version

    0.1.7

    License

    ISC

    Unpacked Size

    6.22 kB

    Total Files

    9

    Last publish

    Collaborators

    • onlydel
    • sykim1009
    • tea7day
    • zerosheepmoo