React Quill

custom해서 쓴 코드

//호출
<CustomQuillEditor
            // value={editorHtml}
            value={getValues('content')}
            onChange={(html)=>{
              setEditorHtml(html);
              setIsEditing(true);
            }}
            modules={{
              toolbar: [
                ["bold", "italic", "underline", "strike"],
                ['image', 'video'],
                [{color:[]},{background:[]}],
                [{align:[]}, { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
                [{ size: ["small", false, "large", "huge"] }],
              ],
              ImageResize: {
                parchment: Quill.import('parchment')
              }
            }}
          />

//CSS 및 폰트 커스텀
const CustomQuillEditor = styled(ReactQuill)`
  resize: none;
  background-color:white;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 10px;

  .ql-container {
    border: 1px solid #E4E4E7;
    border-radius: 0 0 10px 10px;
  }

  .ql-editor {
    height: 80vh;
    overflow: auto;
  }
  .ql-editor img {
    max-width: 100%; /* 이미지가 컨테이너를 넘지 않도록 설정 */
    cursor: nwse-resize; /* 크기 조정 시 커서 변경 */
    resize: both; /* 양 방향 리사이징 허용 */
  }

  .ql-toolbar {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid #E4E4E7;
    border-radius: 10px 10px 0 0;
  }

  .ql-editor .ql-size-huge {
    font-size: 1.5em;
  }
  .ql-editor .ql-size-large {
    font-size: 1.2em;
  }
  .ql-editor .ql-size-small {
    font-size: 0.7em;
  }
  .ql-bold {
    font-weight: 800;
  }
  .ql-italic {
    font-style: italic;
  }
  .ql-underline {
    text-decoration: underline;
  }
  .ql-strike {
    text-decoration: overline;
}
`;