이런식 으로 표현하고 싶습니다.
스타일에 있는 'Special Container' 을 선택했을 때
위와 같이 표현하기 위해서 common/js/plugins/ckeditor/ckeditor/styles.js
styles.js 에서
{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc',
}
},
위의 코드를 아래와 같이 수정하였습니다.
{
name: 'Special Container',
element: 'div',
styles: {
padding: '10px 15px',
background: '#eee',
border: '1px solid #ccc',
margin-bottom: '20px',
font-size: '16px',
background-color: '#f1efe6',
border-left: '10px solid #edcffb'
}
},
적용이 안되는 이유가 무엇인지 도움 부탁드립니다.
아마 margin 때문일 수도 있어요.. 개발자 도구 한번 확인해보시면 오류 있을 가능성있어요.. 아니면 이렇게 한 번 해보세요.
{ name: 'st_box', element: 'div', attributes: { 'class': 'st_box' } },스타일을 직접 넣지 않고 클래스를 추가한 다음, 레이아웃 css 넣는 곳에다가
.st_box {padding: 10px 15px;background: #eee;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 16px;
background-color: #f1efe6;
border-left: 10px solid #edcffb;}
를 넣으면 에디터 글쓰기 화면에서도 보입니다. class로 추가하는 게 훨씬 편해요.. 스타일 바꿀수도 있고요