시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 위지윅에디터 > CKEditor Skin > CKEditor5 V12.0.0 상세정보
사이트등록
현재접속자 새로고침
CKEditor5 V12.0.0
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 CKEditor Skin
다운로드 횟수 6 회
간단설명 CKEditor5 에 Ballon Block, Document 타입이 추가되었네요.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기
CKEditor5가 이전에는 Classic, Ballon, inline 이렇게 3가지 타입이 있었는데요. 

이번 에는 Ballon Block, Document 타입의 편집기가 추가되었네요.

특히 Document 타입이 마음에 드는거 같습니다. ^^



소스다운로드에 Ballon Block, Document 의 2가지 압축파일을 모두 첨부하고 싶었는데요. 

현재 CKEditor5 에서 Ballon Block의 소스코드는 제공이 되지 않는 상태네요.

그래서 안타깝게도 Document 의 소스코드 편집기 소스만 첨부해 두었습니다.





사용하는 방법은 2가지 방식이 있습니다. 

스크립트를 CDN 방식으로 사용하는 방법과... 첨부된 압축파일을 이용하여 스크립트를 서버에 업로드 하여 사용하는 방식이 있습니다. 

CDN 방식으로 사용하는 방법에 대해서 설명 드립니다. 



※출처 : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#document-editor


1.CND 호출하기 
 <script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/decoupled-document/ckeditor.js"></script> 


2.툴바 영역 선언하기
 <div id="toolbar-container"></div>


3.에디터 영역 선언하기
<div id="editor">
    <p>This is the initial editor content.</p>
</div>


4.에디터 호출하기
<script>
   DecoupledEditor
      .create( document.querySelector( '#editor' ) )
      .then( editor => {
         const toolbarContainer = document.querySelector( '#toolbar-container' );
 
         toolbarContainer.appendChild( editor.ui.view.toolbar.element );
      } )
      .catch( error => {
         console.error( error );
      } );
</script>



※팁

Document 에디터의 툴바 기능도 컨트롤 가능 합니다. 
<script>
   DecoupledEditor
      .create( document.querySelector( '#editor' ),{
         //removePlugins: [ 'Heading', 'Link' ], //기본 툴바에서 필요 없는 부분을 삭제할 수 있습니다.
         //toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ] //기본 툴바를 사용하지 않고 원하시는 툴바만 추가하여 사용할 수 있습니다.
      } )
      .then( editor => {
         const toolbarContainer = document.querySelector( '#toolbar-container' );
 
         toolbarContainer.appendChild( editor.ui.view.toolbar.element );
      } )
      .catch( error => {
         console.error( error );
      } );
</script>

직접 사용해보니 removePlugins 보다는 toolbar 를 직접 설정하여 사용하는 방식을 추천 드립니다. 

removePlugins 을 사용할 경우 기존의 툴바 영역 구분라인을 삭제할 수 없었습니다. 
( 해드라인 속성만 제거해 봤는데요. 툴바 구분선이 남아 있습니다. )


 

네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 54992547 보이는 도배방지키를 입력하세요.