-
toastui 코드 이쁘게 보이기
서론 구문을 사용하는 기본값은 아래 사진과 같이 그냥 흰색으로만 출력되어 가독성도 떨어지고 별로다. 이전글의 예시 화면하지만 toastui 는 친절하게도 플러그인 기능을 따로 제공해주는데 이를 활용 할 수 있다. Syntax Highlight공식 문서httpsnhn.github.iotui.editorlatesttutorialexample08editorwithcodesyntaxhighlightplugin 를 따라가면 적용법이 잘 적혀있다.먼저 prism.min.css, toastuieditorplugincodesyntaxhighlight.min.css, toastuieditorplugincodesyntaxhighlightall.min.js 이 3개 파일을 준비한다.jslink relstylesheet href static editorpluginprism.min.css link relstylesheet href static editorplugintoastuieditorplugincodesyntaxhighlight.min.css script src static editorplugintoastuieditorplugincodesyntaxhighlightall.min.js scriptHTML 상단에 선언 한 후 const codeSyntaxHighlight Editor.plugin, plugins codeSyntaxHighlight, highlighter Prism 이 두 부분을 추가 한다.jsscriptconst Editor toastui.Editorconst codeSyntaxHighlight Editor.pluginconst viewer new Editor.factoryel document.querySelectorviewer,previewStyle vertical,height 500px,initialValue content.content ,viewer true,plugins codeSyntaxHighlight, highlighter Prismscript그럼 끝이다. 너무 쉽다. 그냥 하라는 대로만 하면 바로 된다. 아래와 같이 이쁘게 꾸며진 코드를 볼 수 있다. 플러그인 적용 예시 화면 추가참고로 다크 모드 화이트 모드 두가지도 있는데 이는 선언 할 때 단순히 theme dark 이거만 추가하면 된다고 생각 할 수 있다.jsscriptconst Editor toastui.Editorconst codeSyntaxHighlight Editor.pluginconst viewer new Editor.factoryel document.querySelectorviewer,previewStyle vertical,height 500px,initialValue content.content ,viewer true,theme dark,plugins codeSyntaxHighlight, highlighter Prismscript정상적으로 적용이 되려면 다크모드 css 를 필요로 하며, 예는 직접 받을라면 좀 깐깐했다.친절히 링크를 걸어준다. 여기httpsgithub.comnhntui.editortreemasterappseditorsrccsstheme에 깃허브 페이지로 가면 drak.css 를 만나 볼 수 있다. htmllink relstylesheet href static editorthemedark.css 위 코드처럼 css 를 적용 시켜준다. 끝
2024-07-23 16:57:20
Public
-
toastui 그지같은 콘텐츠 출력하기
서론이놈의 content 저장하는게 이렇게 그지같을 수가 없다.우선 toastui 에서 글 내용을 뽑은 방법은 두가지가 있는데getMarkdown 과 getHTML 이다.이 둘의 차이점은 위 사진과 같이 태그가 있냐 없냐이다.뷰어를 통해 콘탠츠를 보여줄라믄 getMarkdown 으로 하여금 보여줘야 한다.자 이제 그냥 getMarkdown 하여 가져온 결과를 DB에 다이렉트로 저장 한 후 해당 데이터를 불러와서 출력해보자. 데이터 출력jsconst Editor toastui.Editorconst viewer new Editor.factoryel document.querySelectorviewer,previewStyle vertical,height 500px,initialValue 서론이놈의 content 저장하는게 이렇게 그지같을 수가 없다.,viewer true,theme dark진짜 딱 이렇게 들어 간다. n 줄바꿈이 정말 줄바꿈으로 랜더링 되어서 신텍스 에러가 발생한다.필히 n n 으로 변환하여 전달 받아야한다.자 이렇게 끝난줄 알았나 문제가 더 남아 있다.일반적인 내용의 경우 아무런 상관이 없다.근데 markdown 문법을 쓰는 가장 큰 이유가 코드를 보여주기 편해서인데 구문에 코드를 작성해보면 이따구로 나온다.XSS 보안 때문에 코드 구문이 전부 치환되서 나온다. 해결사실 어차피 문자열 취급해서 django 에서 랜더링 할떄 해당 구문이 코드 형식이여도 실행 되지도 않는다.이를 해결하기 위해 전달된 문자열이 아무 안전하다는 것으로 취급해야한다.Django 에서는 marksafe 라는 기능을 제공해 주는데pythonfrom django.utils.safestring import marksafemarksafe문자열이렇게 사용한다.또한 기호의 경우 으로 변환 해야 출력시 스크립트의 잘못된 끝맺음을 방지된다.또한 script 의 경우 script 이렇게 바꿔줘야한다.전달받은 content 를 makesafe 로 변환 후 type 을 찍어보면 아래와 같은 객체로 변환되어 있다.python type class django.utils.safestring.SafeString이를 그대로 editor 의 initialValue 에 집어 넣으면 드디어 정상적으로 보여진다.
2024-07-23 16:16:59
Public
-
toastui 사진 첨부
서론어떠한 게시글을 작성하는데 글로만 설명하기엔 한계가 있기 마련이다.toastui 는 당연하게도 사진 첨부 기능이 있는데 표시된 빨간색 동그라미 기능이 바로 사진 첨부 기능이다.사진 파일을 base64로 인코딩 하여 올리는 방법과 URL 링크를 통해 사진을 보여주는 2가지 방법이 있는데, 아니 상식적으로 base64 인코딩 해서 올리면 너무나도 심각한 상황이 된다. 꼴랑 1M도 안되는 이미지를 올리면 몇 만 글자나 변환되어 바로 여기에 기록이 되기에 버벅임은 물로 DB 에 저장하는 것도 벅차다.고로 이를 해결하여 편리하게 업로드 하는 방법을 기술한다. 기능 변경하기아주 훌륭하게도 toastui 는 이미지 업로드 시 기능을 따로 뺼 수 있게 해두었다.jsconst editor new Editorel document.querySelectoreditor,previewStyle vertical,height auto,initialValue content.content ,theme dark,hooks addImageBlobHookblob, callback let formData new FormDataformData.appendfile, blobformData.appendseq, content.seq .ajaxtype post,url postuploadimageajax,data formData,contentType false,processData false,success function r callbackr.data.path, r.data.filename,error function xhr, ajaxSettings, thrownError console.logxhr console.logajaxSettings console.logthrownErroralert알수 없는 문제가 발생했다hooks 의 addImageBlobHook 를 사용할 수 있는데, 이미지 첨부를 하고나서 ok 버튼을 누른 후 기능을 별도 정의 할 수 있다.친절하게도 blob 형태의 이미지를 바로 뽑을 수 있게 정의 되어 있으며, form 데이터로 정성스레 포장해준 후 ajax 로 백엔드로 전송하여 나머지를 처리한다. 이미지 처리 AI아님위와 같은 프로세스로 진행이 되는 python 언어로 fastapi API 서버를 구축해보겠다.아래는 fastapi 구성 예시 코드 이다.pythonimport jsonimport jwtimport osimport stringimport randomimport hashlibfrom fastapi import FastAPI, status, Response, HTTPException, File, UploadFile, Dependsfrom pydantic import BaseModelapp FastAPISECRETKEY SAMPLEALGORITHM HS256PATH SAMPLEURL 127.0.0.1def decodetokentryreturn jwt.decodetoken, SECRETKEY, algorithmsALGORITHMexcept jwt.ExpiredSignatureErrorreturn Nonedef accessaccesstokendata decodetokenaccesstokenif data is not Nonereturn dataidreturn Nonedef makerandomstrcharacters string.asciiletters string.digits 무작위 시드 생성seed random.getrandbits128 해시를 사용하여 고유한 값을 생성hashobj hashlib.sha256strseed.encoderandomstring .joinrandom.choicescharacters, k10return randomstringdef uploadcontent, extensionfilename fmakerandomstrextensionfilepath os.path.joinPATH, filenametryos.makedirsPATH, existokTruewith openfilepath, modewb as ff.writecontentreturn path os.path.joinURL, filename,filename filenameexceptreturn Noneclass uploadimageBaseModelaccesstoken strseq strapp.postv1uploadimage, statuscodestatus.HTTP200OKasync def uploadimagedata uploadimage Depends, file UploadFile File...data json.loadsdata.jsonlocalid accessaccesstokendataaccesstokenif localid is Noneraise HTTPExceptionstatuscodestatus.HTTP403FORBIDDEN, detailunauthorized userextension file.filenamefile.filename.rfind.content await file.readresult uploadcontentcontent,extensionextensionif result is Noneraise HTTPExceptionstatuscodestatus.HTTP500INTERNALSERVERERROR, detailserver errorreturn Responsestatuscodestatus.HTTP200OK, contentjson.dumpscontent, mediatypeapplicationjson해당 코드는 이미지를 전달 받아 토큰을 검사하고 서버에 실제 파일로 저장 하는 일을 한다.사진의 경우 실제 업로드된 파일명을 사용하지 않고 랜덤하게 이름을 만들어 저장해 주었다.모든 작업이 성공적으로 이루어 지면 실제 웹상에서 조회가 가능한 url 링크를 리턴해주는데 이를 활용하여 toastui 에서 작업을 마무리 하도록 해보자 Markdown 이미지 첨부addImageBlobHookblob, callback 이 부분에서 blob 을 전송하여 실제 웹상에서 조회 가능한 url 로 제작을 하였으니 이번엔 callback 를 사용할 차례이다.callbackr.data.path, r.data.filename 처럼 첫번째 인자로는 조회할 url 링크, 두번쨰 인자는 설명 입력란인데 없어도 무방하다. 필자는 그냥 파일명을 설명문구로 두었다. 이렇게 콜백 함수를 호출하고 나면, 요러한 구조로 입력이 된다.간단히 설명하면 선언, 설명 문구, 은 url 주소이다.이로써 아름다운 사진 첨부 기능 구현이 완료되었다.
2024-07-23 14:16:36
Public
-
toastui 뷰어 적용하기
뷰어뷰어를 불러오는 방법은 두 가지라 설명서에 기재 되어 있다. 방법 1toastuieditorviewer.js 를 사용하여 직접 뷰어를 불러오는 방법이 있다.jsconst viewer new Viewerel document.querySelectorviewer,height 1000px위처럼 viewer 라는 id를 찾아 뷰어를 출력해준다. 방법 2본 홈페이지의 이전글에는 에디터 적용하는 방법을 알아보았는데 이미 에디터에도 뷰어 기능이 탑제되어 있으므로 에디터를 불러왔던 js 를 활용 하는 방법이다.jsconst Editor toastui.Editorconst viewer new Editor.factoryel document.querySelectorviewer,previewStyle vertical,height 500px,viewer true위처름 Editor 안에 factory 를 불러와서 뷰어로 활용 가능하다.단, viewer true 를 활성화 해주어야 한다. 콘텐츠 출력당연하게도 뷰어는 보여줄 내용이 있어야할 것이 아닌가.작성된 내용을 출력하기 위해선 뷰어를 불러올 때 initialValue 값을 추가 해주어야한다.jsconst Editor toastui.Editorconst viewer new Editor.factoryel document.querySelectorviewer,previewStyle vertical,height 500px,initialValue content.content ,viewer true 예시지금 보고 있는 화면 자체가 뷰어를 통하여 보고 있으므로 예시가 따로 필요 없다.
2024-07-23 12:57:06
Public
-
toastui 에디터 적용하기
서론본 홈페이지는 Django Python 기술로 구현하였으며, 해당 언어로 설명한다. 적용사실 적용하는 것 자체는 매우 간단하다. toastui git 에서 어떻게 적용하는지 상세히 기제 되어 있다.본 홈페이지는 CDN 을 사용하지 않고 직접 소스코드를 받아 적용하였다.필요한 코드는 다음과 같다. HTML 코드 htmllink relstylesheet href static editorthemedark.css link relstylesheet href static editortoastuieditor.css link relstylesheet href static editorcontents.css link relstylesheet href static editorpreviewhighlighting.css link relstylesheet href static editormdsyntaxhighlighting.css script src static editortoastuieditorall.js scriptlink relstylesheet href static csstoastui.css toastui가 필요로 하는 기본 소스와 플러그인 소스를 HTML 헤더에 담아두었다. HTML 코드jsconst editor new Editorel document.querySelectoreditor,previewStyle vertical,height auto이후 editor 라는 이름을 가진 id 를 검색하여 해당 자식요소로 에디터가 구현이 된다.벌써 적용이 끝났다.아래는 샘플로 해당 글이 작성되는 이미지다.
2024-07-22 17:40:50
Public
-
toastui 살펴보기
서론마땅한 에디터를 찾다가 대충 그냥 HTML 로 쓸까 하다가끝까지 찾아본 덕에 toastui 라는 에디터를 찾았다.실제를 보고 나니 굉장히 깔쌈하고 적용도 간단하였다.그런데도 MIT 라이센스로 무료 사용이 가능하다니 안쓸이유가 없다.마침 홈페이지블로그 제작을 하였으니 사용을 한번 해보도록 하자. 소개공식 홈페이지httpsui.toast.com를 방문하면 모든 정보를 확인할 수 있다.공식 깃허브httpsgithub.comnhntui.editor에서는 개발가이드가 나와있다.맛보기 이미지로 공식 홈페이지에도 가면 볼 수 있다.얼마나 이쁜가 지금은 toastui 로 toastui 를 보여주고 있다.다음 글에서는 어떻게 적용해보는지 알아보자 참고로 본 홈페이지의 뷰어는 toastui 로 구성되어 있다.
2024-07-19 00:19:39
Public
ⓒ 2025 Jieun
