CKEditor5 클래스명으로 설정된 CSS 인라인 스타일로 변환 juice

이제 에디터는 끝났구나 하는 순간! 서비스 페이지에서 에디터로 작성된 내용들 css가 적용이 안된다는 소식...

juice 라이브러리 👆

에디터의 내용들이 인라인 스타일로 되어있지 않고 클래스명으로 되어 있다보니 어드민 사이트를 제외한 곳에서는 CSS가 하나도 적용되지 않는 문제가 발생!
ckeditor5의 content.css 👆를 모듈화해서 juice 라이브러리를 사용해 내용이 입력될 때마다 변환 작업을 해주었다.

CKEditor5 CSS모음 content.css 👆

// content.css 모듈화 (✅ 접두사 ck-content는 제거 : ck-content.image 이런식으로 되어있음)
const styles = `
  <style>
  :root {
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-color-table-caption-background: hsl(0, 0%, 97%);
    --ck-color-table-caption-text: hsl(0, 0%, 20%);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
    --ck-todo-list-checkmark-size: 16px;
  }
  .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
    min-width: 50px;
  }
  ...
  </style>
`;

export default styles;



// 변환
import juice from 'juice'
import styles from '@/app/styles/ckeditor5'

<ck-editor v-model="state.button_comment" :editor="editor" :config="editorConfig" />

watch(
  () => state.button_comment,
  (val) => {
    if(val) {
      const revertedContent = juice.inlineContent(val, styles)
      state.button_comment = revertedContent
      console.log(state.button_comment);
    }
  }
)

====================⛔️추가 내용⛔️====================

watch를 저렇게 사용하면 테이블을 추가하고 밑에 글을 입력하면 맨 앞 라인으로 포커스가 이동하는 현상 발생
state.button_comment를 바로 revertedContent 값으로 할당하기 때문인듯.
📌watch를 사용하지 않고 서버에 파라미터로 보낼 때 juice로 변환된 revertedContent를 보내는 것으로 해결