로그인

검색

Extra Form

Font Awesome fortyTwofa42Main.png


ckeditor Plugins fa42 적용 방법입니다. 

fa42 는 Font-awesome 최신버전인 6.4.0 을 적용할 수 있습니다. 

Font-awesome 의 버전이 어떤 의미가 있는지 모르지만 최신 경향이 반영된 아이콘이 추가되었거나 그런정도의 차이가 있을 듯 합니다. 

 

 라이믹스에서 Ckeditor 4 버전으로 편집기를 사용하여 Font-awesome 아이콘을 추가할 수 있도록 설정하도록 하겠습니다. 

 

 다운로드

   - Ckeditor 4 배포처에서 받기  바로가기

   - 개발자 사이트에서 받기  바로가기

 

 의존하는 다른 플러그인 

   - fa42 는 colordialog 플러그인을 필요로 합니다. 

 

 설치경로

  • ckeditor/plugins/fa42

 환경설정

4.1. config.js

config.extraPlugins = 'colordialog,fa42'; 


CKEDITOR.dtd.$removeEmpty['i'] = 1 또는 false; // <i> 태그를 사용하려는 경우, 라이믹스에서는 <i>사용시 기울임 꼴로 나타남
CKEDITOR.dtd.$removeEmpty['span'] = 1 또는 false; // <span> 태그를 사용하려는 경우 

 

4.2. CND을 이용하려는 경우 - /fa42/plugin.js

 

       var rootPath = CKEDITOR.plugins.get("fa42").path,
                defaultConfig = {
                    fa42Path: '//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css',
                           // CDN 경로지정 
                    fa42Tag: 'span'    // span 태그를 사용하려는 경우 
                }

 

 

 웹사이트 헤더의 스타일시트에 아래 내용 적용

// 이렇게 font-awesome 을 적용시켜 줘야 게시판 글 보기 상태에서 적용된 내용이 보여집니다. 

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
또는
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

 

 

 기타 참고사항, 아래는 배포처 설명임

config.fa42 = {
    fa42Version: '10.4.2',   // 사용 버전을 지정할 수 있지만 않하면 자동으로 최신버전이 적용된다는 소리인듯 
    fa42Level: 'free' // 'free' or 'pro' 이지만 지정하지 않으면 자동임 
}
 


  1. 18
    Nov 2023
    11:24

    rhymix (XE) - ckeditor에 Google Fonts 넣는 방법

    Google Fonts - Hi Melody 넣기 구글폰트에서 제공하는 예쁜 한글 글꼴 Hi Melody를 Rhymix 홈페이지에 넣어 보도록 하겠습니다. Rhymix 웹편집기 ckeditor와 조합하여 언제든 게시글에 예쁜 구글폰트를 넣을 수 있습니다. 1. 구글폰트를 검색해서 원하는 폰트...
    Read More
  2. 08
    Jul 2023
    09:33

    Plugins / Font Awesome fortyTwo(fa42)

    Font Awesome fortyTwo ckeditor Plugins fa42 적용 방법입니다. fa42 는 Font-awesome 최신버전인 6.4.0 을 적용할 수 있습니다. Font-awesome 의 버전이 어떤 의미가 있는지 모르지만 최신 경향이 반영된 아이콘이 추가되었거나 그런정도의 차이가 있을 듯 ...
    Read More
  3. 30
    Dec 2021
    12:57

    Rhymix 에서 CSS 로 배경이미지(body) 적용시 CKeditor4 입력창에도 배경이 들어가는 문제

    Rhymix 에서 body 스타일에 배경이미지를 적용하면 body 스타일이 CKeditor 입력란에도 적용되어 버림. Rhymix/modules/editor/skins/ckeditor/css/default.less 파일의 .cke_wysiwyg_div 스타일에 background 스타일을 적용하면 해당 색상으로 입력란 배경이 ...
    Read More
  4. 28
    Dec 2021
    22:13

    ckeditor 색상 값 정리

    root/modules/editor/skins/ckeditor/css/default.css body.cke_editable { padding: 5px; background-color: transparent; } // html.cke_panel_container, html.cke_panel_container body { background-color: transparent; }
    Read More
  5. 17
    Sep 2021
    15:46

    Ckeditor Toolbar 등록 이름

    // Toolbar configuration generated automatically by the editor based on config.toolbarGroups. config.toolbar = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'ExportPdf', 'Preview...
    Read More
Board Pagination Prev 1 Next
/ 1