문자,  hex(16진),   octal(8진),   decimal(10진)

^@   \x00 \000   0  
^A   \x01 \001   1  
^B   \x02 \002   2  
^C   \x03 \003   3  
^D   \x04 \004   4  
^E   \x05 \005   5  
^F   \x06 \006   6  
^G   \x07 \007   7  
^H   \x08 \010   8  
^I   \x09 \011   9  
^J   \x0a \012  10  
^K   \x0b \013  11  
^L   \x0c \014  12  
^M   \x0d \015  13  
^N   \x0e \016  14  
^O   \x0f \017  15  
^P   \x10 \020  16  
^Q   \x11 \021  17  
^R   \x12 \022  18  
^S   \x13 \023  19  
^T   \x14 \024  20  
^U   \x15 \025  21  
^V   \x16 \026  22  
^W   \x17 \027  23  
^X   \x18 \030  24  
^Y   \x19 \031  25  
^Z   \x1a \032  26  
^[   \x1b \033  27  
^\   \x1c \034  28  
^]   \x1d \035  29  
^^   \x1e \036  30  
^_   \x1f \037  31  
     \x20 \040  32  
 !   \x21 \041  33  
 "   \x22 \042  34  
 #   \x23 \043  35  
 $   \x24 \044  36  
 %   \x25 \045  37  
 &   \x26 \046  38  
 '   \x27 \047  39  
 (   \x28 \050  40  
 )   \x29 \051  41  
 *   \x2a \052  42 
 +   \x2b \053  43  
 ,   \x2c \054  44  
 -   \x2d \055  45  
 .   \x2e \056  46  
 /   \x2f \057  47  
 0   \x30 \060  48  
 1   \x31 \061  49  
 2   \x32 \062  50  
 3   \x33 \063  51  
 4   \x34 \064  52  
 5   \x35 \065  53  
 6   \x36 \066  54  
 7   \x37 \067  55  
 8   \x38 \070  56  
 9   \x39 \071  57  
 :   \x3a \072  58  
 ;   \x3b \073  59  
 <   \x3c \074  60  
 =   \x3d \075  61  
 >   \x3e \076  62  
 ?   \x3f \077  63  
 @   \x40 \100  64  
 A   \x41 \101  65  
 B   \x42 \102  66  
 C   \x43 \103  67  
 D   \x44 \104  68  
 E   \x45 \105  69  
 F   \x46 \106  70  
 G   \x47 \107  71  
 H   \x48 \110  72  
 I   \x49 \111  73  
 J   \x4a \112  74  
 K   \x4b \113  75  
 L   \x4c \114  76  
 M   \x4d \115  77  
 N   \x4e \116  78  
 O   \x4f \117  79  
 P   \x50 \120  80  
 Q   \x51 \121  81  
 R   \x52 \122  82  
 S   \x53 \123  83  
 T   \x54 \124  84  
 U   \x55 \125  85 
 V   \x56 \126  86  
 W   \x57 \127  87  
 X   \x58 \130  88  
 Y   \x59 \131  89  
 Z   \x5a \132  90  
 [   \x5b \133  91  
 \   \x5c \134  92  
 ]   \x5d \135  93  
 ^   \x5e \136  94  
 _   \x5f \137  95  
 `   \x60 \140  96  
 a   \x61 \141  97  
 b   \x62 \142  98  
 c   \x63 \143  99  
 d   \x64 \144 100  
 e   \x65 \145 101  
 f   \x66 \146 102  
 g   \x67 \147 103  
 h   \x68 \150 104  
 i   \x69 \151 105  
 j   \x6a \152 106  
 k   \x6b \153 107  
 l   \x6c \154 108  
 m   \x6d \155 109  
 n   \x6e \156 110  
 o   \x6f \157 111  
 p   \x70 \160 112  
 q   \x71 \161 113  
 r   \x72 \162 114  
 s   \x73 \163 115  
 t   \x74 \164 116  
 u   \x75 \165 117  
 v   \x76 \166 118  
 w   \x77 \167 119  
 x   \x78 \170 120  
 y   \x79 \171 121  
 z   \x7a \172 122  
 {   \x7b \173 123  
 |   \x7c \174 124  
 }   \x7d \175 125  
 ~   \x7e \176 126  
    \x7f \177 127
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


더 많은 이미지를 보려면  https://cgfrog.com/amazing-animated-gifs-for-your-inspiration/
http://cinemagraphs.com/lifestyle/

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


CKEditor4 에서 Templates 플러그인에 템플릿을 추가하는 방법입니다.

ckeditor/plugins/templates/templates/default.js  파일을 열어서 편집합니다.

 

templete.jpg


CKEDITOR.addTemplates("default",{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),templates:[{title:"Image and Title",image:"template1.gif",description:"One main image with a title and text that surround the image.",html:'\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'},{title:"Strange Template",image:"template2.gif",description:"A template that defines two columns, each one with a title, and some text.",
html:'\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'},{title:"Text and Table",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'},{title:"Text and Table 2",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'}
]});

 

 

 

 

댓글(2) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2018.02.25 14:29

    {title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"왼족이 오렌색 바가 있는 필드셋 양식",html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'},{title:"웹소스 입력 양식",image:"template4.gif",description:"제목 출처 소스코드 입력 양식",html:'<p><span style="color: rgb(221, 221, 221);font-size: 26px;font-family: Paytone One, 맑은 고딕;">Title Input Title Here</span><br /><span style="font-family: Georgia,serif;font-size: 16px;">&nbsp;&nbsp;LINK <span class="fav2"><i aria-hidden="true" class="fa fa-angle-double-right " style="color: rgb(255, 153, 0); font-size: 18px;" title="Angle Double Right "></i><span style="left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; position: absolute;">Angle Double Right </span></span>&nbsp;<span style="color: rgb(52, 152, 219);">Input URL Here</span></span></p></br><blockquote><p>source code here</p><p>...</p><hr style="color:#777;" /><table border="1" bordercolor="#777" cellpadding="0" cellspacing="0" style="width: 98%;"><tr><td bgcolor="#353535" style="width: 240px;">&nbsp;</td><td bgcolor="#353535" style="width: 200px;">&nbsp;</td><td bgcolor="#353535">&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table></blockquote>'},{title:"탭모양 표 양식",image:"template5.gif",description:"탭 형태의 표 양식",html:'<table border="0" cellpadding="0" cellspacing="0" style="width:98%;"><tr><td style="width: 300px;"><div style="background: rgb(255, 153, 0); border-radius: 10px 20px 0px 0px; border: 1px solid rgb(255, 153, 0); padding: 5px 10px; text-align: center;"><strong><span style="color:#4e5f70;font-family:맑은 고딕;font-size:18px;">여기에 제목 입력</span></strong></div></td><td>&nbsp;</td></tr><tr><td colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="height:100%;width:100%;border-style:solid;border-top-width: medium;border-bottom-width: medium;border-left-width: 20px;border-right-width: medium;border-color:#ff9900;border-radius:0px 5px 5px 5px;"><tr><td><p>&nbsp;여기에 본문을 입력</p><p>&nbsp;</p></td></tr></table></td></tr></table>'}

  • dodo 2018.02.22 11:39

    세번째 템플릿 수정 

    {title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"A title with some text and a table.",
    html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'}


ckeditor/styles.js
 

    {
        name: 'Special Container',
        element: 'div',
        styles: {
            padding: '5px 10px',
            background: '#eee',
            border: '1px solid #ccc'
        }
    },

   {
        name: 'r8 #999 default',
        element: 'div',
        styles: {
            padding: '5px 10px',
            background: '#999',
            border: '1px solid #ccc',
            'border-radius': '8px 8px 8px 8px'
        }
    },    
    {
        name: 'left Blue Bar Container',
        element: 'div',
        styles: {
            padding: '4px 4px 4px 14px',
            margin: '6px 6px 20px',
            background: '#999',
            color: '#ddd',
            'box-sizing': 'border-box',
            'line-height': '1.4',
            'font-size': '15px',
            'border-left': '6px double #5BBFD9',
            'border-radius': '6px 6px 6px 6px'            
        }
    },

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


1. ckeditor/config.js 파일에서 폰트 등록 

config.font_names = '맑은 고딕;굴림;돋움;바탕;궁서;나눔손글씨 붓/Nanum Brush Script;나눔손글씨 펜/Nanum Pen Script;제주한라산/Jeju Hallasan;노토산스 한글/Noto Sans KR;Paytone One;Work Sans;Akronim;Allura;Macondo;Indie Flower;Dancing Script;' + CKEDITOR.config.font_names;

 

2. ckeditor/skins/moono-dark/editor.css  맨 상단에 폰트 등록

편집기 도구상자에서 폰트 모양을 보면서 선택할 수 있습니다. 

ckeditor-fontmenu.jpg

/*
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
@import url(//도메인/xe/common/css/bootstrap.min.css);    부트스트랩
@import url(//도메인/xe/common/css/fontawesome/838cb3dd77.css);    폰트어썸
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);    제주한라산
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);     노토산스한글
@import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Myeongjo|Nanum+Pen+Script|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900');       기타 추가되는 구글 웹폰트
.cke_reset{

 

3. XE 관리자 > 사이트 디자인 설정 > 레이아웃 > HTML/CSS  부분의 CSS - layout.css 에 아래 내용추가 

XE 게시판 본문 보기에서 글꼴이 표시됨 

@import url(//도메인/xe/common/css/bootstrap.min.css);
@import url(//도메인/xe/common/css/fontawesome/838cb3dd77.css);
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Myeongjo|Nanum+Pen+Script|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900'); 

댓글(3) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2018.02.20 20:05

    ckeditor/skins/moono-dark/dialog.css

  • dodo 2018.02.20 18:11

    xe/modules/editor/styles/ckeditor_dark/style.css

    xe/modules/editor/styles/ckeditor_dark/editor.css

  • dodo 2018.02.20 18:09

    xe/modules/editor/tpl/css/editor.css


목록
Board Pagination Prev 1 ... 14 15 16 17 18 19 20 21 22 23 ... 27 Next
/ 27
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...