Q&A

CKeditor에 스타일 'Special Container' 수정을 하려면...,

2023.01.13 05:59
1,680
0
CMS/프레임워크 Rhymix 2.0
개발 언어 PHP 7.4
이런식 으로 표현하고 싶습니다.

스타일에 있는 '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'
}
},

 

적용이 안되는 이유가 무엇인지 도움 부탁드립니다.

 

BIGBOSS Lv. 5

댓글 8

  • 2023.01.15 06:04 #1738416

    아마 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로 추가하는 게 훨씬 편해요.. 스타일 바꿀수도 있고요

    에디터.png.jpg

  • 2023.01.15 06:10 #1738424
    답변 너무너무 감사합니다. (- -)(_ _)
  • 2023.01.15 06:13 #1738428
    성공하셨나보네요 ㅎㅎ
  • 2023.01.15 06:30 #1738433
    common/js/plugins/ckeditor/ckeditor/styles.js
    styles.js 에서
    { name: 'st_box', element: 'div', attributes: { 'class': 'st_box' } },
    추가했는데 스타일에 st_box가 안나오네요. ㅠㅠ
  • 2023.01.15 06:39 #1738437

    에디터2.png.jpg

     

    그대로 하신 게 맞다면 나올텐데.. 브라우저 캐시때문일 수도 있어요.

  • 2023.01.15 06:55 #1738443
    브라우저 캐시를 삭제하니까 잘 되네요.
    감사합니다.
    라이믹스 업데이트하면 { name: 'st_box', element: 'div', attributes: { 'class': 'st_box' } }, 이 부분을 다시 추가해야하나요?
  • 2023.01.15 06:58 #1738447
    되셨다니 다행이네요 ㅎㅎ 업데이트 이후에 다시 추가하지 않아도 돼요!
  • 2023.01.15 07:05 #1738451
    브라우저 캐시는 생각도 못하고 몇일 동안 헤매고 다녔는데
    너무 감사합니다. ^^*