본문 바로가기

Toast-ui8

[React] Toast-UI Editor/Viewer 유튜브 동영상 삽입/표시 방법 Toast-UI 에디터, 뷰어에서 유튜브를 삽입하고, 표시하는 방법을 정리한다. 1. Toast-UI Editor 유튜브 삽입 방법 - 마크다운 모드에서 iframe 으로 유튜브 동영상을 삽입하고, 미리보기(preview) 하는 방법 2. Toast-UI Viewer 유튜브 표시 방법 - iframe 으로된 유튜브 공유 태그를 토스트 뷰어에서 렌더링하는 방법 1. Toast-UI Editor 유튜브 삽입 방법 - Editor 컴포넌트에 customHTMLRenderer 속성을 추가하고, iframe 을 입력할 수 있도록 정의해준다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css.. 2022. 8. 6.
[React] Toast-UI Viewer 글자 크기, 행 간격, 마진 등 CSS 조정 방법 리액트에서 Toast-UI Viewer에 html문서를 렌더링하면, 아래처럼 글자 크기, 행간 간격, 마진 등이 자동 적용 되는 이슈가 있다. 확인해보면 toast-ui 자체에서 설정된 css 값임을 알 수 있다. 원치 않는 margin이 위아래로 10px 적용되어 있는데, 바꾸고 싶다면, CSS로 조정해주면 된다. # Toast-ui Viewer CSS 조정 방법 다양한 방법이 있겠지만, 필자는 편의상 App.css 파일에서 아래와 같이 !important 로 지정하여 우선순위를 높여주었다. (CSS Selector 는 크롬 inspect/검사 기능 등을 통해 파악하면 된다) .toastui-editor-contents p, .toastui-editor-contents h1, .toastui-edito.. 2022. 5. 31.
[React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) # Toast-UI Editor 이미지 파일 서버 업로드 방법 일반적으로 이미지를 관리하는 방식은 첨부 이미지 파일은 서버 디스크에 저장해두고, 해당 경로만 DB에 저장해두는 것이다. 그러나 Toast-UI Editor 에서 이미지를 첨부하면 img 태그의 src에 이미지 데이터 전체가 base64로 인코딩 되어 주입된다. Markdown 의 경우에도 형식은 다르지만 결과적으로 동일하다. 만약 이 상태 그대로 DB에 저장해두면, 레코드 한 줄마다 몇 Mb씩 차지하는 곤란한 상황이 발생할 수 있다. 우리가 원하는 건. 1. 이미지 파일은 서버로 전송하고, 2. 파일이 저장된 경로만 DB에 저장해두고, img 태그의 src 속성값으로 사용하는 것 일 것이다. 지금부터 Toast-UI Editor 에서 첨부한.. 2022. 5. 16.
[React] Toast-UI Editor 이미지 업로드/드래그 첨부 막기 방법 # Toast-UI Editor 이미지 업로드 기능 제거 방법 Toat-UI Editor에서 이미지를 업로드하면, multipart 형식으로 파일 첨부가 되는 것이 아니라 이미지 데이터 자체를 base64로 인코딩하여 img 태그의 src로 주입해버린다. 사이즈가 큰 이미지 파일을 이 상태 그대로 DB에 저장하고 싶지 않다면, 다른 방식을 생각해야 할 것이다. 이 글에서는 Toat-UI Editor의 이미지 첨부 자체를 막는 방법을 정리한다. * 이미지를 첨부 파일로 서버에 전송하는 방법은 아래글 참고 [React] Toast-UI Editor 이미지 파일 서버 업로드 방법 (base64 인코딩 X) 방법은 코드 한줄이다. Editor.prototype.getInstance().removeHook('ad.. 2022. 5. 16.
[React] Toast UI Viewer 사용 방법: HTML태그, Markdown 표시 뷰어 # Toast-UI Viewer 사용 방법 리액트 환경에서 HTML태그나 Markdown으로 작성된 내용을 Toast-UI Viewer 로 표시하는 방법을 정리한다. (너무나 간단하다) Toast-UI Editor 로 작성한 글을 HTML이나 Markdown 으로 "취득"하는 방법은 아래 글 참고. [React] Toast UI Editor기본 사용 방법 1. 설치 - Toast-UI 에디터의 React Wrapper 버전을 설치한다. - Viewer 도 여기에 설치되어 있다. 이미 설치했다면 생략하자. npm install @toast-ui/react-editor 2. 사용 - Viewer 컴포넌트와 CSS를 임포트해주고 - Viewer 컴포넌트의 initialValue 프롭에 표시할 내용을 넣어준다... 2022. 5. 16.
[React] Toast-UI Editor 폰트 컬러(글자 색상) 설정 color-syntax 플러그인 사용 방법 # Toast-UI Editor 폰트 컬러(글자 색상) 설정 플러그인 추가 방법 리액트에서 Toast-UI Editor 사용시, 글자 색깔을 설정할 수 있는 color-syntax 플러그인 사용법을 정리한다. (기본 툴바 옵션에 제공되지 않아, 플러그인을 설치하고 사용해야 한다. 매우 간단하다) - 공식 깃허브: https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax * Toast-UI Editor 자체의 기본 사용 방법은 아래 글을 참고하자. [React] Toast UI Editor기본 사용 방법 1. 설치 - 리액트에서 사용할 경우, @toast-ui/editor-plugin-color-syntax 플러그인을 설치해준다. npm ins.. 2022. 5. 16.
[React] Toast UI Editor기본 사용 방법 # Toast UI Editor기본 사용 방법 리액트에서 Toast-UI 에디터를 사용하는 방법을 정리한다. 공식홈: https://ui.toast.com/tui-editor React Wrapper 깃허브: https://github.com/nhn/tui.editor/tree/master/apps/react-editor 1. Editor 설치 - 리액트에서 사용할 것이므로, toast ui editor의 React Wrapper 버전을 설치한다. npm install @toast-ui/react-editor 2. 컴포넌트 적용 - 컴포넌트와 스타일을 임포트하고, - 일반 컴포넌트 처럼 사용하면서 옵션을 설정해준다. (옵션에 대해선 주석 설명 참고) import { useRef } from 'react'.. 2022. 5. 16.
[React] Toast-UI 에디터 관련 에러: Failed to parse source map # toast-ui editor 사용 관련 에러 해결 방법: Failed to parse source map [ 문제 상황 ] 리액트 환경에서 @toast-ui/react-editor 를 설치 후, Editor 컴포넌트를 사용하면, 별다른 문제가 보이진 않는데...(아직?) 아래와 같은 에러코드가 떠서 개발자의 마음을 심히 불편하게 하는 경우가 있다. [ 에러 코드 ] WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '/node_modules/@t.. 2022. 5. 15.

티스토리툴바