TysonWorld

아....

CKEditor 를 쓰려고 보니, 진짜.... 툴바를 풀 버젼으로 쓰니,너무 많고,

일일히 아래처럼 설정에 쓰자니, 너무 빡세더라...

        CKEDITOR.replace('EDITOR',{
            toolbarGroups : [
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
                { name: 'links', groups: [ 'links' ] },
                { name: 'insert', groups: [ 'insert' ] },
                '/',
                { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
                { name: 'styles', groups: [ 'styles' ] },
                { name: 'colors', groups: [ 'colors' ] },
                { name: 'tools', groups: [ 'tools' ] },
                { name: 'others', groups: [ 'others' ] },
                { name: 'about', groups: [ 'about' ] },
                { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
                { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
                { name: 'forms', groups: [ 'forms' ] },
            ],

            removeButtons : 'Cut,Copy,Paste,PasteText,PasteFromWord,Find,SelectAll,Scayt,Replace,Save,NewPage,ExportPdf,Print,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Blockquote,BidiLtr,BidiRtl,Language,RemoveFormat,CopyFormatting,Anchor,Flash,PageBreak,About',
        });

여기 링크로 들어가면, 사진처럼 내가 원하는 아이콘만 클릭해서 만들수 있다.

https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

아이콘 위에 마우스 올려놓으면, 어떤 아이콘인지도 설명이 뜨니까, 필요한거만 잘 골라서, 

체크하고, 오른쪽에 있는 "Get toolbar config" 버튼 누르면, 알아서 config 코드로 생성해 준다.

♡♡ ♥  💙 ❤   

❤️🧡💛💚💙💜

💔💖💗💓💞💕💘

Ⅰ. Ⅱ. Ⅲ. Ⅳ. Ⅴ. Ⅵ. Ⅶ. Ⅷ. Ⅸ. Ⅹ

 1. 2. 3. 4. 5. 6. 7. 8. 9. 10

½⅓⅔¼¾⅛⅜⅝⅞¹²³⁴ⁿ₁₂₃₄

→ ←↑↓ ↔ ↗↙↖↘

화장실 표시

☿♀♁♂

가끔 이미지 캡쳐해서 티스토리 작성할때 바로 붙여 넣기 하는데...

기본제공 이미지 편집에 테두리 넣는게 없다...

왜 그런기능을 안넣어놨는지......

그래서 항상 

기본모드에서 HTML 로 바꿔서, style를 넣었는데..

이것도 귀찮아서, 그냥 css에 추가함.

두가지 방법 다 알려주겠다.

1. 글작성하는곳 오른쪽 위를 보면, '기본모드'로 되어있다.

여기에서 HTML로 바꾼다.

코드에 보면, 이미지 정보 있는 태그가 있을거다.

<p>이미지주소 </p> 안에 있는데...

<div style="border: 1px solid black;"><p>이미지정보</p></div>

바깥쪽에 div 하고 스타일 넣어주는거다. 

이렇게 하는 방법이 있고,

-------------------------------------------------

두번째로는 CSS 세팅을 해놓는거다.

먼저, 블로그관리 -> 스킨편집 -> HTML 편집 -> CSS 탭 으로 들어간다.

그리고 나같은 경우는 아래처럼 추가했다.

그다음에 적용 눌러준다.

그리고 다음부터는 HTML 열어서

아래처럼 써준다.

<div class="border_view">이미지 정보</div>

class="border_view" 추가해주면 된다.

이름은 본인이 편한거 짧은거 써도 된다.

그러면,  앞으로 이미지에 테두리넣을때 저거만 써주면 된다.

먼저 가운데 정렬할때, 

class에 benter-block 넣어보고, 안 먹으면,

스타일에, style="float: none; margin: 0 auto;"

가끔 문서작업, ppt만들때, 체크표시가 필요해서...

1. ✓ - 확인 표시
2. ✔ - 무거운 확인 표시
3. ✗ - 투표 X
4. ✘ - 무거운 투표 X
5. ☐ - 체크 박스
6. ☑ - 체크 박스의 체크 표시
7. ☒ - X와 투표함

<table width="200" border="1">

<tr>

<td style="text-overflow:ellipsis; overflow:hidden">긴문자생략</td>

</tr>

</table>

td 스타일에 저거 넣어주면, 알아서 생략됨.

뒤에는 .....으로 보임.

이거 안될때, 

<table style="table-layout: fixed>

테이블 스타일에 이거 추가해주면 된다.