<p><span data-ke-size="size18">CKEditor5 링크걸기                          <a href="https://freehoon.tistory.com/123" target="_blank" class="ke-link">https://freehoon.tistory.com/123</a></span></p><p><span data-ke-size="size18">이번에는 게시판을 조금 업그레이드 해보려고 합니다. 현재 게시판은 </span><span data-ke-size="size18">단순히 textarea로 이루어져 글자의 폰트나 크기, 색상 등 쉽게 바꿀 수 있는 환경이 아닙니다. 위지윅 에디터는 한글이나 워드를 사용하는 것과 같이 쉽게 이러한 작업을 할 수 있게 도와주는 프로그램 입니다. 무료로 사용할 수 있는 위지윅 프로그램이 몇 가지 있지만, 여기서는 CKEditor5 를 가지고 다뤄 보려 합니다.</span></p><p style="text-align: start;"> </p><p style="text-align: start;"><span data-ke-size="size18">CKEditor을 사용방법에는 크게 2가지가 있습니다. 하나는 CDN 방식을 이용하는 방식과 다른 하나는 CKEditor을 다운로드 받아 사용하는 방법입니다. </span><span data-ke-size="size18">여기에서는 CDN방식을 이용하여 CKEditor을 사용해 보도록 하겠습니다.</span></p><p> </p><p> </p><p style="text-align: start;"><span data-ke-size="size18">CKEditor 공식 홈페이지의 주소는 아래와 같습니다</span></p><p style="text-align: start;"><span data-ke-size="size18"><a href="https://ckeditor.com" target="_top" class="ke-link">https://ckeditor.com</a></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20">(웹라이브러리 CKEditor위즈윅 애디터)</span></p>
<!-- -->
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default_default
https://cdn.ckeditor.com/
<script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>
그리고 페이지의 가장 마지막 하단에 아래와 같이 코드를 입력합니다. 이 부분은 CKEditor이 적용 될 수 있도록 CKEditor의 설정을 저장한 자바스크립트 파일을 호출하는 부분입니다. 이 코드는 항상 textarea보다 나중에 와야 합니다.
<script src="${pageContext.request.contextPath}/resources/common/js/ckeditor.js"></script>
ckeditor.js의 내용은 아래와 같습니다.
ckeditor.js
ClassicEditor
.create( document.querySelector( ‘#content' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
붉은색 표시 부분은 textarea의 ID를 가리킵니다. 이렇게 하면 가장 기본적인 class 버전의 CKEditor 이 적용됩니다.
글쓰기 페이지로 접속하여 테스트를 해봅니다.