어느 비전공자의 개발일지

ckEditor 설정 값 변경하기 본문

백엔드 개발자/에디터

ckEditor 설정 값 변경하기

vndn629 2023. 4. 7. 08:00

 

ckEditor 설정값

./common/js/plugins/ckeditor/ckeditor/config.js 를 만들면 사용자 설정을 읽어서 에디터에 반영 합니다.

CKEDITOR.editorConfig = function( config ) {

// 설정값들을 이 사이에 입력하면 됩니다.

};

 

1. 사용해보신분들은 아시겠지만 기본 상태에서는 대부분의 빈 태그를 자동으로 삭제합니다. 특히 폰트어썸이나 xeicon을 사용할때 i태그를 사용하는데 이를 빈 태그로 인식해서 자동 삭제하는바람에 공백을 추가하는등의 꼼수를 부려야 삭제 되지 않습니다. 많이 사용하는 i태그가 지워지는걸 방지하기 하려면 아래의 설정을 입력하면 됩니다.

CKEDITOR.dtd.$removeEmpty['i'] = false;

 

 

2. CKEditor 기본 상태에서는 줄바꿈을 p태그로 처리 합니다. 이것을 br태그로 변경하고자 한다면 아래 설정값을 추가하세요.

config.enterMode = CKEDITOR.ENTER_BR;

 

 

3. 줄바꿈시 자동 추가되는 p태그나 공백이 없는 p태그를 수동으로 입력하면 에디터가 자동으로 공백문자를 추가합니다. 이게 싫다면 아래 설정값을 추가합니다.

config.fillEmptyBlocks = false;

 

 

 

 

CKEDITOR.on( 'instanceReady', function( ev ) {
    ev.editor.dataProcessor.writer.setRules('p', {
        indent : false,
        breakBeforeOpen : true,
        breakAfterOpen : false,
        breakBeforeClose : false,
        breakAfterClose : false
    });
});

 

'p'의 쓰기 룰을 정의하고 breakBeforeOpen : 태그 열기전 라인 변경 breakAfterOpen : 태그 열고난 후 라인 변경 breakBeforeClose : 태그 닫기전 라인 변경 breakAfterClose : 태그 닫은 후 라인 변경

반응형