XE code_highlighter

  1. XE code_highlighter 를 설치합니다. 
    설치 위치> xe/modules/editor/components/code_highlighter
     
  2. ckeditor 편집기의 툴바를 등록합니다.  
    toolbar: [
    	  { name: 'xe_component', items: ['code_highlighter' ] },
    	]

 

< 다운로드 경로 > 

  1. XE 공식 자료실 > 
  2. 구글 드라이브 자료실 > 

 

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

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

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

0개 첨부 됨 ( / )

  • dodo 2018.11.26 18:38
    .syntaxhighlighter {
    ...
      border-radius: 6px;
    }

     

  • dodo 2018.11.26 16:44

    세로 스크롤 바 제거하기 

    XE.../editor/components/code_highlighter/syntaxhighlighter/styles/shCore테마명.css

     

    .syntaxhighlighter textarea {
      ...
      padding-bottom: 5px !important;
    }

     

    아니면

    .syntaxhighlighter {
     ...
      padding-bottom: 5px !important;
    }

     

    이건 지도 모르겠다 


웹폰트 만들어 직접 서비스 적용하기 

 

  1. https://onlinefontconverter.com/ 웹사이트에 들어갑니다. 
    • 아래 그림과 같이 변환할 폰트파일을 업로드 합니다. 
      웹폰트만들기01.jpg

       

    • font-face, eot, svg, ttf, woff, woff2 에 체크합니다. 
    • SELECT FONT(S) 를 클릭하여 ③ ttf 폰트를 업로드 합니다. 
    • ④ Done 를 클릭하여 계속 진행 합니다.(변환을 시작하고, 잠시 기다립니다.) 
    • ⑤ 변환이 완료되면 SAVE YOUR FONT 를 클릭합니다.
      웹폰트만들기02.jpg

       

    • Download Attachment 를 클릭해서 파일을 다운받습니다. 
  2. 다운 받은 onlinefontconverter.com.zip 파일의 압축을 해제하면 아래와 같이 6개의 파일이 생성됩니다. 
    웹폰트만들기03.jpg

    이 파일을 모두 웹서버의 웹폰트 폴더에 업로드 합니다. 

     

  3. 웹 페이지 헤더부분의 폰트를 읽어 들이는 부분에 font.css 를 포함시킵니다. 
    예1) ckeditor 의 경우 config.js 에 
         config.contentsCss = 'https://서버경로/font.css'; 
    예2) XE 의 경우 관리페이지> 에디터 > 공통설정의 CSS 파일 추가 에 
         https://서버경로/font.css
    예3) ckeditor 의 config.js 에 글꼴을 추가합니다. 
         config.font_names = '맑은 고딕;...;어비스윝/UhBee swit;' + CKEDITOR.config.font_names;
댓글(1) 남기기...
사진 및 파일 첨부

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

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

0개 첨부 됨 ( / )

  • dodo 2018.11.23 16:29 SECRET

    "비밀글입니다."


emoji  플러그인은 CKEditor 4.11.1 이상 버전에서 작동합니다. 

연결되어 있는 아래의 모든 플러그인이 설치되어 있어야 작동합니다. 

 

  1. emoji
  2. Autocomplete
  3. Text Match
  4. Ajax Data Loading
  5. Panel Button
  6. Floating Panel
  7. xml

각각의 설치 방법은 아래 내용을 참고하세요. 

아래 플러그인을 추가로 설치하세요. 
emoji > 설치 경로 ../ckeditor/plugins/emoji 
Autocomplete > 설치 경로 ..//ckeditor/plugins/autocomplete
Text Match > 설치 경로../ckeditor/plugins/textmatch
Ajax Data Loading > 설치 경로../ckeditor/plugins/ajax
Panel Button > 설치  경로../ckeditor/plugins/panelbutton
Floating Panel > 설치  경로../ckeditor/plugins/floatpanel
xml > 설치 경로../ckeditor/plugins/xml


../ckeditor/config.js 파일에 플러그인을 설정하고, 도구모음 아이콘을 등록하세요. 

config.extraPlugins = 'emoji, textmatch, ajax, autocomplete, panelbutton, floatpanel, xml';

 

config.toolbar = [

    { name:'추가플러그인', items:['EmojiPanel'] }

];
 


각 설치 파일은 아래에서 다운받으세요. 

emoji_4.11.1.zip

ajax_4.11.1.zip

autocomplete_4.11.1.zip

floatpanel_4.11.1.zip

panelbutton_4.11.1.zip

textmatch_4.11.1.zip

xml_4.11.1.zip

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

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

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

0개 첨부 됨 ( / )


http://webdir.tistory.com/487

 

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

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

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

0개 첨부 됨 ( / )


CKEditor 스타일 리스트에 스타일 추가하기 
style_list.jpg

 

ckeditor/styles.js 파일을 수정합니다. 

 

CKEDITOR.stylesSet.add( 'default', [
     {
        name: 'r8 #999 default',
        element: 'div',
        styles: {

            padding: '5px 10px',
            background: '#999',
            border: '1px solid #ccc',
            'border-radius': '8px 8px 8px 8px'

        }
    },

] );

 

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

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

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

0개 첨부 됨 ( / )


목록
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 ... 29 Next
/ 29
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...