React Draft Wysiwyg를 사용하여 간단한 텍스트 편집기 만들기

개요

지금 만든 앱에 텍스트 편집기를 투입하고 싶어서 서둘러 만들었어요.

완성

컨디션

react 17.0.1

typescript 4.5.4

gatsby 4.3.0

@emotion/react 11.7.0

react-draft-wysiwyg 1.14.7

선택한 라이브러리

react-draft-wysiwyg 를 선택했습니다.
Draft입니다.페이스북이 개발한 텍스트 편집기용 프로그램 라이브러리를 확장한 프로그램 라이브러리다.이번에는 간단하고 원하는 기능이 있는 라이브러리를 선택했습니다.
원본 Draftjs와 그 기능을 확장한 Draft입니다.기타 Draftjs를 기반으로 하는 제3자 등 편집기를 만들 때 여러 가지 선택 항목이 있는데 실제로는 처음에 다른 옵션에 착수했지만 최종적으로 다음과 같은 이유로 사용하지 않았다.

원하는 기능을 구현할 때 Draft.js의 정보원이 매우 적기 때문에 관건적인 순간에 대응하기 어렵고 시간이 걸린다

기본 UI 무질서

Type Script

는 지원되지 않음

장기 유지 관리 안 함

첫 번째 이유, 예를 들어 범위를 선택할 때만 표시되는 도구 모음이 실행될 때 가명→한자로 변환될 때의 범위 선택을 상자에서 제외시키려 해도 결과는 안 된다🥲

해본 일

１. react-draft-wysiwyg 설치yarn add react-draft-wysiwyg２. 및 이용
이것은 편집기 구성 요소의 코드 전문입니다.우리는 설명이 필요한 곳의 뜻을 간단하게 추적할 것이다!

import React from "react"
import { Link } from "gatsby"
import { Editor } from "react-draft-wysiwyg"
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"
import { css } from "@emotion/react"

const Article = () => {
  return (
    <div
      onClick={focus}
      css={css`
        box-sizing: border-box;
        border: 1px solid #ddd;
        cursor: text;
        padding: 16px;
        border-radius: 2px;
        margin-bottom: 2em;
        box-shadow: inset 0px 1px 8px -3px #ababab;
        background: #fefefe;
      `}
    >
      <Editor
        toolbar={{
          options: ["inline", "blockType", "list", "textAlign", "link"],
          inline: {
            options: ["bold", "strikethrough"],
          },
          blockType: {
            inDropdown: false,
            options: ["H2"],
          },
          list: {
            options: ["unordered"],
          },
          textAlign: {
            options: ["center"],
          },
          link: {
            options: ["link"],
          },
        }}
      />
    </div>
  )
}

export default Article

import React from "react"
import { Editor } from "react-draft-wysiwyg"
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"
import { css } from "@emotion/react"

적당한import.import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css" 편집기의 기본 스타일을 유지해야 합니다.

    <div
      onClick={focus}
      css={css`
        box-sizing: border-box;
        border: 1px solid #ddd;
        cursor: text;
        padding: 16px;
        border-radius: 2px;
        margin-bottom: 2em;
        box-shadow: inset 0px 1px 8px -3px #ababab;
        background: #fefefe;
      `}
    >
   </div>

CSS는 편집기에 적용됩니다.테두리가 깊어지거나 테두리 안에 음영을 그립니다.

      <Editor
        toolbar={{
          options: ["inline", "blockType", "list", "textAlign", "link"],
          inline: {
            options: ["bold", "strikethrough"],
          },
          blockType: {
            inDropdown: false,
            options: ["H2"],
          },
          list: {
            options: ["unordered"],
          },
          textAlign: {
            options: ["center"],
          },
          link: {
            options: ["link"],
          },
        }}
      />

편집기의 표시.기본적으로 도구 모음의 도구는 모두 숨겨집니다. (20개 정도?)따라서 옵션스 등의 프로포즈로 이 점을 집중한다.
위 코드는 굵게(bold), 삭제선(strikethrough), 제목(H2), 항목 기호(unordered), 중앙 정렬(center), 링크(link)의 기능을 보존하고 있다.
３. 완성!
온전한 그림은 문장의 맨 위에 있다🙌

감상

실장 초간단!
근데 드라프트.js라는 프로그램 라이브러리는 그 프로그램 라이브러리도 사용하기 때문에 앞으로의 유지보수가 활발하지 않은 상황에서 React와 관련 모듈의 업데이트 시기에 이상한 오류가 발생하여 무섭다