TipTap 이미지 크기 조정 확장 프로그램

우리는 TipTap text editor을 활용한 다양한 프로젝트에 참여했습니다. 꽤 많은 확장 기능과 기본 제공 옵션이 있는 오픈 소스 편집기입니다. 그러나 (우리에게는) 중요한 기능 중 하나가 빠져 있습니다. 이미지 크기 조정!

그래서 normale 이미지 모듈을 확장하고 크기 조정 기능을 추가하는 스크립트를 만들었습니다. 설치 방법을 설명하고 원하는 대로 일부 모양을 변경할 수 있습니다.
(죄송합니다. Vue 및 기타 프레임워크, 지금은 React만 해당)

설치

실행 npm i tiptap-imagresize 또는 yarn add tiptap-imagresize그런 다음 편집기를 초기화하는 ImageResize 모듈을 가져옵니다. 이미지 모듈이 있으면 ImageResize 모듈로 교체하고 그렇지 않으면 그냥 추가하십시오.

const editor = useEditor({
        extensions: [ StarterKit, ImageResize],
        content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
    })

옵션

이 게시물은 가능한 한 간단하게 작성하려고 노력하므로 크기 조정 아이콘만 다룰 것입니다..ImageResize 확장에 구성 기능을 추가하여 변경할 수 있습니다. 크기 조정 아이콘에 자신의 아이콘을 사용하는 방법에 대한 예로 React-icons를 사용하겠습니다.

import {GrBottomCorner} from 'react-icons/gr'

const editor = useEditor({
        extensions: [ StarterKit, ImageResize.configure({resizeIcon: <GrBottomCorner/>})],
        content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
    })

resizeIcon에 콘텐츠를 전달하기만 하면 모서리에 원하는 모든 것이 렌더링됩니다.

스타일링

스타일링 부분을 해결하기 위한 옵션이 꽤 있기 때문에 저희 repository/readme 에서 사용되는 일반적인 (S)CSS를 드렸습니다. 아래에도 포함하겠습니다.
scss 또는 css 파일로 작업하는 경우 아래 코드 중 하나를 사용할 수 있습니다. styles 또는 다른 솔루션의 경우 이 css를 해당 css로 변환하거나 고유한 스타일을 만들어야 합니다.

SCSS

.image-resizer {
    display: inline-flex;
    position: relative;
    flex-grow: 0;
    .resize-trigger {
      position: absolute;
      right: -6px;
      bottom: -9px;
      opacity: 0;
      transition: opacity .3s ease;
      color: #3259a5;
    }
    &:hover .resize-trigger {
      opacity: 1;
    }
  }

CSS

.image-resizer {
    display: inline-flex;
    position: relative;
    flex-grow: 0;
 }
.image-resizer .resize-trigger {
  position: absolute;
  right: -6px;
  bottom: -9px;
  opacity: 0;
  transition: opacity .3s ease;
  color: #3259a5;
}
.image-resizer:hover .resize-trigger {
  opacity: 1;
}

그게 다야!

이것이 작동하는 데 필요한 전부입니다! 뭔가를 놓치거나 몇 가지 문제를 발견? Let me know in my repository 그리고 최대한 빨리 응답하도록 노력하겠습니다!

행운을 빕니다!