@senspond
>
에디터 개발 - 외부 미디어 입력 UI/기능 개발, Word로 내보내기 등 개발기
에디터 개발 - 외부 미디어 입력 UI/기능 개발, Word로 내보내기 등 개발기를 적어봅니다
Rgbitcode 웹사이트 관리자 페이지에 사용하고 있는 문서작성 에디터를 좀더 완성도 있게 만들어서
따로 공개를 해볼 생각으로 몇일 전부터 다시 개발을 시작했다.
기존 에디터에는 외부 미디어 입력을 할 수 있는 기능만 달아두고 UI를 꾸며두지 않았다.
혼자만 쓸거면 계속 그렇게 써도 상관이 없을 것 같지만, 다른 사람도 쓰도록 만드려면 좀더 개선이 필요했다.
https://rgbitcode.com/blog/senspond/75
지난 번에 쓴 글에 이어서 추가적으로 해본 작업에 대해서 정리를 해본다.
외부 미디어 입력기능
UI 구성
외부 이미지, 유튜브, 유튜브 쇼츠, 외부 iframe 를 입력할 수 있는 UI를 구성했다.
그리고 보이지 않는 radio checkbox를 사용해 탭메뉴처럼 구성을 해보았다.
원래 유튜브도 iframe 입력으로 똑같이 공유를 클릭하고 iframe url을 가져와 추가가 가능했지만...
그냥 유튜브 링크 복사 붙여넣기로 바로 넣을 수 있게끔 수정을 하고 조금 꾸며봤다.
사용된 아이콘
아이콘은 react-icons 들을 사용했다.
npm i -d react-icons
import { SiYoutubeshorts } from "react-icons/si";
import { FaYoutube } from "react-icons/fa6";
import { BsImage } from "react-icons/bs";
import { PiFrameCorners } from "react-icons/pi";Show
유튜브 영상 입력
유튜브 쇼츠 영상 입력
유튜브 쇼츠 영상은 세로가 좀더 길어서 쇼츠탭을 클릭하면 디폴트 가로,세로 사이즈를 적절히 변경시켜 주었다.
MS Office 워드파일로 내보내기 기능
word 파일로 다운로드 하는 기본코드
우선 외부 변환 라이브러리를 사용하지 않고 아래와 같은 방법으로 구현을 해보았다.
function exportDOC(title: string, body: string) {
const header = `<html xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head><meta charset='utf-8'><title>${title}</title>
<style>
table,th,td{border: 1px solid black;}
</style>
</head><body><h1 id="first-page">${title}</h1><p>generate by rgbitcode</p><hr/></div>${body}</body></html>`;
const source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(body);
const fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
그런데 이 방법으로 word로 내보내기에는 몇가지 문제가 있었다.
일단 워드문서에 맞게 스타일 조정이 필요하다는 것이고 목차 생성 방법을 찾아야 하고..
유튜브 동영상과 외부 iframe 같은 경우 워드 문서에 삽입이 가능하도록 변환시키는 방법 등이 필요해 보였다.
이 부분은 좀더 방법들을 찾아봐야 할 것 같고, 우선 아래 기능을 어떻게 만들어야 할 지를 먼저 생각해보기로 했다.
수식입력 지원 / 주피터 노트북 랜더링이 필요...
처음 에디터를 만들때는 생각을 하지 못했었는데, AI 쪽 공부를 하게 되면서 이 부분이 정말 필요함을 느끼고 있다.
현재 이 블로그에 저 에디터를 통해 글을 쓸때 수식이 필요한 경우 이미지를 만들어서 업로드를 하고 있다.
다소 불편함이 있고, 딥러닝을 공부할때 무조건 쓰게 되는 주피터 노트북 파일을 그대로 업로드 할 수 없으니
또 에디터로 옮겨적는 불편함이 있었다.
필자는 귀찮은 것은 정말 하기 싫어하는 성격으로 그러다 보니 더 글쓰기가 귀찮아 지는 것 같다.
그런데 현재 에디터에 수식입력을 어떻게 적용시켜야 할지 난관에 부딪혔다.
결국 의존하고 있는 라이브러리의 Core단 까지 이해를 하지 못하면 구현이 불가능해보이는데, 조금 시간이 걸린것 같다.
주피터 노트북 (.ipynb) 파일 불러와 에디터에 랜더링 하는 것은 아직 시도해보지 않았는데,
수식입력을 좀더 파보고 도저히 진척이 안될 것 같으면 그것부터 해봐야 할것 같다.
안녕하세요. Red, Green, Blue 가 만나 새로운 세상을 만들어 나가겠다는 이상을 가진 개발자의 개인공간입니다.
댓글 ( 0 )
카테고리내 관련 게시글
현재글에서 작성자가 발행한 같은 카테고리내 이전, 다음 글들을 보여줍니다
@senspond
>