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' } },
또는 div
에 class
를 추가하고 스타일 시트를 이용할 수도 있습니다. 아래 코드처럼 작성하여 추가합니다.
{ 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;}
에디터 > 툴바 > 스타일에서 선택해 사용합니다.
끝!