구글 웹폰트를 XE(라이믹스) + CKEditor 에 적용하는 방법입니다. 
 

  1. XE 관리페이지 > 디자인 > 레이아웃 > HTML/CSS >> CSS - layout.css 부분에
    구글 웹폰트를 import 합니다. 
     @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
     @import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
     @import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
     @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

     

  2. xe/modules/editor/styles/default/editor.css 파일 맨 위에도 1. 과 동일하게 넣어 주세요. 
    ※ 이 부분은 편집시 편집기의 도우모음에 표시되는 글꼴과 편집창의 글꼴모양을 표현해 줍니다. 
     

  3. xe/common/js/plugins/ckeditor/ckeditor/config.js 파일의 폰트 설정 부분에 해당하는 글꼴을 넣어 줍니다. 
     

         config.font_names = '나눔손글씨 붓/Nanum Brush Script;나눔손글씨 펜/Nanum Pen Script;제주한라산/Jeju Hallasan;노토산스 한글/Noto Sans KR;' + CKEDITOR.config.font_names;

     

  4. xe/common/js/plugins/ckeditor/ckeditor/skins/moono-dark/editor.css 파일과 관련된 파일 상단에 아래 내용 추가

    @import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Pen+Script|Yeon+Sung|Nanum+Myeongjo|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900');

     

  • dodo 2018.06.29 23:54

    3. (20180629)

    @import url(//도메인/...xe/common/css/bootstrap.min.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+Pen+Script|Yeon+Sung|Poor+Story|Nanum+Myeongjo|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900');

사진 및 파일 첨부

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

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

0개 첨부 됨 ( / )

적용대상 Font Awesome Chevron Right  https://ckeditor.com/cke4/addon/fontawesome  | demo

Hand Right  라이믹스 적용된 홈페이지의 CKEditor 편집기에 사용하기 좋은 font Awesome 플러그인을 적용하고자 함. 

 

Lean Pub  적용방법 

  1. http://fontawesome.io/ 에서 4.7.0 버전의 Font Awesome 을 다운로드하여 서버에 설치함.
    예시) /웹루트/font-awesome-4.7.0/
  2. https://ckeditor.com/cke4/addon/fontawesome 에서 fontawesome_2.0.zip 파일을 다운로드하여 
    "ckeditor/plugins/fontawesome" 와 같이 업로드 
  3. 라이믹스 환경설정
    XE 관리페이지 > 사이트 디자인 설정 > 레이아웃 >> HTML/CSS 부분의 HTML 부분에 아래 내용 삽입
            Paw  일반적 html 페이지인 경우 head 부분에 넣어 줌 
            <script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
  4. CKEditor 환경설정 Chevron Right  XE/common/js/plugins/ckeditor/ckeditor/config.js

config.extraPlugins ='fontawesome';

config.contentsCss = '웹루트/font-awesome-4.7.0/css/font-awesome.css';

config.allowedContent = true;

config.toolbar = [
    { name: 'insert', items: [ 'FontAwesome' ] }
];  

Archive  첨부파일 설명
   font-awesome-4.7.0.zip 은 웹루트에 설치하여 모든 웹 프로그램에서 활용가능하도록 설치 
   fontawesome_2.0.zip 은 CKEditor 플러그인으로 CKEditor 의 플러그인 폴더에 설치함. 

 

사진 및 파일 첨부

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

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

0개 첨부 됨 ( / )

bootstrap.min.css 

1.
2. .table{background-color:#fff} Chevron Right  .table{background-color:#111}
3. 

 

사진 및 파일 첨부

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

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

0개 첨부 됨 ( / )

1. 이메일로 등록 http://fontawesome.io/

2. 등록한 메일로 코드값이 도착합니다. 이 코드값을 입력하여 인증하면 CDN 링크를 알려줍니다.

3. CDN 등록하기
   - XE 레이아웃 CSS 부분에 아래 내용을 등록합니다.    

@import url(//use.fontawesome.com/838cb3dd77.css);

4. 이제 XE 메뉴 수정 부분에서 아래 아이콘 목록 사이트에서 확인한 이미지를 메뉴 이름에 넣어 줍니다. 

 

아이콘 목록 사이트링크 : http://fontawesome.io/icons/

 

5. CKEditor 에서 Font Awesome 아이콘이 사라지는 것을 해결하기 위해 
   CKeditor 의 Config.js 에 아래 내용을 삽입해 줍니다. 

// i 태그를 사용 가능하게

config.protectedSource.push(/<i[^>]*><\/i>/g);

 

사진 및 파일 첨부

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

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

0개 첨부 됨 ( / )

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