CKEditor 4에서 CSS 추가하는 방법

CKEditor 4에서는 기본적으로 사용되는 스타일 시트를 포함하고 있으며, 이를 수정하거나 사용자 정의 스타일 시트를 추가할 수 있습니다.

다음은 CKEditor 4에서 CSS를 추가하는 방법입니다.

1. 사용자 정의 스타일 시트 파일 생성하기

먼저, CKEditor에서 사용할 사용자 정의 스타일 시트 파일을 생성해야 합니다. 이 파일은 원하는 스타일을 정의하는 CSS 파일입니다. 예를 들어, `my-custom-styles.css` 파일을 생성하고 다음과 같이 스타일을 정의할 수 있습니다.

```css
.my-custom-class {
    font-size: 14px;
    color: #333;
}
```

2. config.js 파일 수정하기

CKEditor의 `config.js` 파일에서 사용자 정의 스타일 시트를 추가해야 합니다. 이 파일은 CKEditor의 구성을 제어하는 데 사용되며, 스타일 시트를 추가하는 방법은 다음과 같습니다.

```javascript
config.contentsCss = ['/path/to/my-custom-styles.css'];
```

위 코드에서 `/path/to/my-custom-styles.css`는 사용자 정의 스타일 시트 파일의 경로를 지정하는 것입니다. 이 경로는 CKEditor를 사용하는 웹 페이지에서의 상대 경로 또는 절대 경로가 될 수 있습니다.

3. CKEditor에 클래스 적용하기

이제 사용자 정의 스타일 시트를 추가했으므로, CKEditor에서 해당 스타일을 적용할 클래스를 정의할 수 있습니다. 예를 들어, 다음과 같이 CKEditor의 본문에 `my-custom-class` 클래스를 적용할 수 있습니다.

```html
CKEDITOR.instances.editor1.setData('<p class="my-custom-class">내용</p>');
```

위 코드에서 `editor1`은 CKEditor 인스턴스의 이름입니다. `setData()` 메서드를 사용하여 CKEditor의 본문을 설정하면서 `my-custom-class` 클래스를 적용하고 있습니다.

이렇게 CKEditor 4에서 CSS를 추가할 수 있습니다. 사용자 정의 스타일 시트를 생성하고 `config.js` 파일에서 추가하면, CKEditor에서 사용자 정의 스타일을 적용할 수 있습니다.