• 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

블로그/웹사이트

홈페이지, 블로그 꾸미기 팁 정보 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

CKeditor에 스타일 추가하는 방법

이윰
15 1 0

styles.js 에 코드를 추가하여 사용자지정 스타일을 추가할 수 있습니다.

 

<div> 추가하기

styles.js 에서 다음을 찾아 바로 아래에 스타일을 추가합니다.

{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc'
}
},

예시 )

{
name: 'Custom Div ',
element: 'div',
styles: {
padding: '15px',
background: '#f7f7f7',
border: '1px solid #ccc'
border_radius: '15px'
}
},

또는 divclass를 추가하고 스타일 시트를 이용할 수도 있습니다. 아래 코드처럼 작성하여 추가합니다.

{ name: 'Custom Div ', element: 'div', attributes: { 'class': 'custom_div' } },

style.css에 스타일 지정합니다.

.custom_div { padding :15px;
background: #f7f7f7;
border: 1px solid #ccc
border-radius: 15px;
}

<span> class 추가하기

위에서 했던 방식처럼 아래 코드처럼 작성하여 추가합니다.

{ name: 'color1', element: 'span', attributes: { 'class': 'red' } },

style.css에 스타일 지정합니다.

.red { color: #ff5656;}

에디터 > 툴바 > 스타일에서 선택해 사용합니다.

 

끝!

신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 최종 글 조회 수
+1
image
  10
+1
normal
  11
+1
image
  9
+1
image
  13
0
normal
  11
0
normal
  24
+1
normal
이윰13시간 전 40
+1
normal
  11
+1
normal
  13
+1
image
  12
+1
normal
  20
+1
normal
  19
+1
normal
  15
+2
image
  49
0
normal
  34
+2
image
  16
+1
normal
  13
+1
normal
  11
+1
image
  45
+2
image
  26