20240111 TIL react-draft-wysiwyg 첫적용

목표

• 텍스트 에디터 적용하기

새로 알게 된것/ 오늘의 코드

wysiwvg 는 What You See Is What You Get의 약자로 사용자가 에디터에서 작성한 콘텐츠의 최종 출력물이 화면에서 어떻게 보일지를 실제로 보여주는 편집 환경을 말한다.

wysiwvg 라이브러리는 여러개가 있는데 

대표적으로 quill과 react-draft-wysiwyg 이 있는데  작성하다보니 quill을 사용했어야 했나 싶다!

 

지금 사용하고 있는 react-draft-wysiwyg 는 사용이 많아서 구글링이 용이하기 때문에 이용을 했는데 잔버그도 많고 변환해줄 것이 많다.  구글링을 하다 발견한 것인데 이미지를 넣고 글자를 넣으면 오류가 난다는 말도 있어서 프로젝트가 더 진행되기 전에 바꿔야 하나..? 고민이다... 

 

 react-draft-wysiwyg은 다운받을 게 꽤나 많은데 

yarn add draftjs-to-html
yarn add @types/draftjs-to-html
yarn add draft-js
yarn add @types/html-to-draftjs
yarn add react-draft-wysiwyg @types/react-draft-wysiwyg

나는 타입스크립트까지 이용해서 더 많아진 것 같긴하다..아무 설정 안한 느낌은 이렇게 되고

필요없는 부분은

  const toolbarOptions = {
    options: ["inline", "list", "textAlign", "link", "emoji", "image"],
    inline: {
      options: ["bold", "italic", "underline", "strikethrough"],
    },

    list: {
      options: ["unordered", "ordered"],
    },
    textAlign: {
      options: ["left", "center", "right", "justify"],
    },
    link: {
      options: ["link"],
    },
    emoji: {
      options: ["emoji"],
    },
  };

옵션에 적어주지 않으면 자연스럽게 사라짐!

 <Editor
        editorState={content}
        onEditorStateChange={handleEditorChange}
        toolbar={toolbarOptions}
      />

 

이렇게 제외해줄 수도 있다.

 

하지만 가장 큰 문제는 html 태그로 폰트를 관여한다는 점이다. 글로벌 css에서 css초기화를 했기때문에 html태그로 된 변화는 적용되지 않는다.!css 초기화된 프로젝트

초기화가 안된 프로젝트

근데 quill도 html으로 한다고 해서 고민이 된다. 아무래도 테스트 프로젝트를 만들어서 둘다 테스트를 해봐야할 것 같다.

 

 

 

내일 목표

• 텍스트 에디터 주말 동안 사진 로직까지 완료하기