$$config title: [팁]? 토스트UI 활용 keywords: - IT - HTML - CSS - JS $$ # 참고 [토스트 UI 에디터 공식사이트](https://ui.toast.com/tui-editor) [토스트 UI 에디터 깃허브](https://github.com/nhn/tui.editor) [토스트 UI 에디터 API, EXAMPLES](https://nhn.github.io/tui.editor/latest/) # 01장. 시작 - 토스트 UI 라이브러리 종합 $$codepen https://codepen.io/donhyuck/embed/ZErvvQM?default-tab=html%2Cresult&editable=true $$ # 02장. 기초 사용법 - 사이트 접속 클릭 [https://nhn.github.io/tui.editor/latest/](https://nhn.github.io/tui.editor/latest/) $$codepen https://codepen.io/donhyuck/embed/WNMMerY?default-tab=html%2Cresult $$
## HTML - Install - Via Contents Delivery Network (CDN) ```html ``` - Usage - Using in Browser Environment by CDN ```html ``` ## JS - Usage - Using Namespace in Browser Environment ```js const Editor = toastui.Editor; ``` - Usage - Using in Browser Environment by CDN ``` const editor = new Editor({ el: document.querySelector('#editor'), height: '500px', initialEditType: 'markdown', previewStyle: 'vertical' }); ``` - 이후 html에서 `

` - initialEditType 초기설정을 markdown 혹은 wysiwyg ## Default Options ``` height: Height in string or auto ex) 300px | auto initialEditType: Initial type to show markdown | wysiwyg initialValue: Initial value. Set Markdown string previewStyle: Preview style of Markdown mode tab | vertical usageStatistics: Let us know the hostname. We want to learn from you how you are using the Editor. You are free to disable it. true | false ``` # 03장. 문서내용 가져오기 $$codepen https://codepen.io/donhyuck/embed/gOvvYGK?default-tab=html%2Cresult $$ - 내용 가져오기 기능으로 보낸 내용과 가져온 내용을 보여준다. # 04장. 문서내용 넣기 $$codepen https://codepen.io/donhyuck/embed/OJQQJGM?default-tab=html%2Cresult&editable=true $$ - editor에서 set설정으로 가져오는 문자가 호환이 된다. setMarkdown, setHTML # 05장. 뷰어 사용법 - 뷰어만 보여주기 에디터를 보여줄 필요없이 처리된 내용만 보여줄때 ```js const editor = new Editor.factory({ // 뷰어 사용 el: editorEl, viewer:true, initialValue: '# 첫화면 보기' }); ``` - 뷰어를 true두고, 초기값의 내용을 사용자에게 보여준다. - setHTML은 안되고 setMarkdown 으로 내용넣기 가능 $$codepen https://codepen.io/donhyuck/embed/jOZZOgw?default-tab=html%2Cresult&editable=true $$ # 06장. 라이브러리 만들기 - 제이쿼리 포함 - 크게 editor와 viewer 영역이 있고 각 묶음씩 나눠진다. $$codepen https://codepen.io/donhyuck/embed/xxYYbVB?default-tab=html%2Cresult&editable=true $$ # 07장. 코드 하이라이팅 플러그인 적용 - 작성중인 부분, 선택한 영역이 하이라이팅된다. - `int a = 10;`를 ``` ``` 으로 감싸고, java, php, js 등 작성언어를 기입하면 해당 문법으로 표현한다. [참고 - 하이라이팅](https://nhn.github.io/tui.editor/latest/tutorial-example08-editor-with-code-syntax-highlight-plugin) $$codepen https://codepen.io/donhyuck/embed/RwQQNBo?default-tab=html%2Cresult&editable=true $$ # 08장. 테이블 셀 병합 플러그인 적용 - 테이블에서 셀 병합 `@cols=3:합체`를 에디터에 적어보자. 입력칸 기준으로 3칸이 병합된다. ```js plugins: [ [toastui.Editor.plugin.codeSyntaxHighlight, {highlighter:Prism}], toastui.Editor.plugin.tableMergedCell ] ``` $$codepen https://codepen.io/donhyuck/embed/ZErrbRX?default-tab=html%2Cresult&editable=true $$ # 09장. 컬러피커 플러그인 적용 - 글자색 변경 기능 내용을 입력하고 A버튼으로 색상을 지정하면, 해당 내용에 자동으로 style이 적용된다. `작성해보기` ```html ``` $$codepen https://codepen.io/donhyuck/embed/OJQQyqM?default-tab=html%2Cresult&editable=true $$ # 10장. 차트 플러그인 적용 [참고 - 차트 플러그인](https://nhn.github.io/tui.editor/latest/tutorial-example07-editor-with-chart-plugin) - 다음은 차트의 예시이며, 해당 내용을 도식화한 차트를 뷰어에서 볼 수 있다. ``` $$chart ,20대,30대 2020년,200,210 2022년,300,310 type: column title: 한국 직장인 월소득 평균 x.title: 연도 y.title: 금액 y.min: 100 y.max: 2000 $$ ``` ``` $$chart ,category1,category2 Jan,21,23 Feb,31,17 type: column title: Monthly Revenue x.title: Amount y.title: Month y.min: 1 y.max: 40 y.suffix: $ $$ ``` $$codepen https://codepen.io/donhyuck/embed/OJQQyKN?default-tab=html%2Cresult&editable=true $$ # 11장. katex 수학수식 플러그인 개발 ``` $$katex f(x) = \int_{-\infty}^\infty \hat f(\xi),e^{2 \pi i \xi x} , d\xi $$ ``` [참고 차트 플러그인](https://nhn.github.io/tui.editor/latest/tutorial-example13-creating-plugin) $$codepen https://codepen.io/donhyuck/embed/VwQQxpZ?default-tab=html%2Cresult&editable=true $$ # 12장. UML 플러그인 적용 ``` $$uml partition Conductor { (*) --> "Climbs on Platform" --> === S1 === --> Bows } partition Audience #LightSkyBlue { === S1 === --> Applauds } partition Conductor { Bows --> === S2 === --> WavesArmes Applauds --> === S2 === } partition Orchestra #CCCCEE { WavesArmes --> Introduction --> "Play music" } $$ ``` [참고 - UML 플러그인 적용](https://nhn.github.io/tui.editor/latest/tutorial-example11-editor-with-uml-plugin) $$codepen https://codepen.io/donhyuck/embed/poaaVdL?default-tab=html%2Cresult&editable=true $$ # 13장. 유튜브 플러그인 개발 및 적용 ``` $$youtube https://www.youtube.com/ $$ ``` $$codepen https://codepen.io/donhyuck/embed/xxYYjpN?default-tab=html%2Cresult&editable=true $$ # 14장. 코드펜 플러그인 개발 및 적용 ``` $$codepen https://codepen.io/donhyuck/embed/poaaVdL?default-tab=html%2Cresult&editable=true $$ ``` $$codepen https://codepen.io/donhyuck/embed/yLvvjdQ?default-tab=html%2Cresult&editable=true $$ # 15장. repl 플러그인 개발 및 적용 ``` $$repl https://replit.com/@donhyuck/TestRepl?lite=true $$ ``` $$codepen https://codepen.io/donhyuck/embed/oNEEygx?default-tab=html%2Cresult&editable=true $$

게시글 상세