[nextjs] CKEditor view 만들기

ckeditor를 이용한 개발중인데, 특이하게도 ckeditor는 뷰어가 없더라.

그래서 그게 어딨지 했는데, 찾아보니까 영문이라 찾기가 어렵더라..

한글로 문서가 있길래 참조했다.
https://velog.io/@oo009pbh/%EC%9D%B4%EC%8A%88%ED%95%B4%EA%B2%B0-CKEditor-5-View-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%81%EC%9A%A9

[이슈해결] CKEditor 5 View 스타일 적용

 

 

어떤건 그냥 ckeditor를 뷰어처럼 에디터를 부르고 해당 내용을 툴바를 삭제하고 쓰라고 하던데, 속도이슈 있는 듯해서 좀 별로라 폐기

https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/css.html

Editor and content styles | CKEditor 5 Documentation

import 'ckeditor5/ckeditor5.css';

import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

이걸 쓰려고 하니까 premium이 없다고 오류를 뱉더라.

editor5를 부르면 뷰어 + 편집기를 부르는거라 보류.

ckeditor5-content.css가 있더라.

해당 내용으로 임포트 후  클래스명을 'ck-content' 추가하면 알아서 적용되더라.

Styling the published content

Your application is typically divided into two areas. Content creation, which hosts the editor and is a writing tool, and content publishing, which presents the written content.

It is important to use the content styles on the publishing side of your application. Otherwise, the content will look different in the editor and for your end users.

There are two ways to obtain the content styles:

• From the npm packages, in the dist/ckeditor5-content.css and ckeditor5-premium-features-content.css location.
• From our CDN, https://cdn.ckeditor.com/ckeditor5/

Below is an example with placeholder paths showing how to load the ckeditor5-content.css (and ckeditor5-premium-features-content.css, if needed) file on the publishing side.

<link rel="stylesheet" href="path/to/assets/ckeditor5-content.css">

<link rel="stylesheet" href="path/to/assets/ckeditor5-premium-features-content.css">

<link rel="stylesheet" href="path/to/assets/styles.css">

The final setup depends on how your application is structured. As mentioned earlier, you can use our CDN, or your JS bundler already creates and serves combined style sheets. Choose the solution that works best for your case.

Warning

Important!

If you take a closer look at the content styles, you may notice they are prefixed with the .ck-content class selector. This narrows their scope when used in CKEditor 5 so they do not affect the rest of the application. To use them in the front–end, you will have to add the ck-content CSS class to the container of your content. Otherwise, the styles will not be applied.

Optimizing the size of style sheets

The ckeditor5 package distributes three style sheets:

• ckeditor5.css – combined editor and content styles,
• ckeditor5-content.css – only content styles,
• ckeditor5-editor.css – only editor styles.

The same is true for the ckeditor5-premium-features package, but the filenames are different:

• ckeditor5-premium-features.css – combined editor and content styles,
• ckeditor5-premium-features-content.css – only content styles,
• ckeditor5-premium-features-editor.css – only editor styles.

However, these style sheets include styles for all editor plugins. If you want to optimize the size of the style sheet, to only include styles for the plugins you use, you can follow the Optimizing build size guide.

import 'ckeditor5/ckeditor5-content.css';

html을 넣어주는 구간에 ".ck-content"를 추가하자. 

내 경우 scss를 쓰고 있어서 ["ck-content", ${styles.viewerContent}]로 넣어주었다.