WYSIWYG 문서 편집기능

내용 입력할때 문서편집 기능을 넣기

 

CK5 다운로드 

https://ckeditor.com/

WYSIWYG HTML Editor with Collaborative Rich Text Editing

 

footer에 추가하기

<script src="https://cdn.ckeditor.com/ckeditor5/32.0.0/classic/ckeditor.js"></script>

 

 

- CK 에디터는 textarea 태그를 변화시켜준다.

 

1. 페이지에 add.html  - th:field="*{content}"

2. 상품에 add.html  - th:field="*{description}"

 

 

 

 

ck editor cdn 검색하면 나오는 script 안에 내용을 textarea있는 id를 복붙하기

 <script>
    ClassicEditor
        .create( document.querySelector( '#classic' ))
        .catch( error => {
            console.error( error );
        } );
</script>

 

app.js에 textarea태그의 id 로 넣기

페이지 내용에 ck에디터

//CK에디터 추가
if($('#content').length){ //length는 있어야 나옴 *안쓰면 #content없어도 나오기때문
    ClassicEditor
        .create( document.querySelector( '#content' ))
        .catch( error => {
            console.error( error );
        } );
}

* .length 는 '#content 가 있을 때' 만 나온다. 없을때는 안나오도록 (아래도 동일)

 

상품 내용에 ck에디터

if($('#description').length){ //length는 있어야 나옴 *안쓰면 #content없어도 나오기때문
    ClassicEditor
        .create( document.querySelector( '#description' ))
        .catch( error => {
            console.error( error );
        } );
}

 

 

문서편집 기능 적용됨.

 

 

 

- ck에디터 높이크게 css 적용하기

.ck.ck-content {
    height: 15em; 
    /* 글자 15개 높이 */
}