<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>태그 주소방 01</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>에디트 5 </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><html lang="en"><br>  <head><br>    <meta charset="UTF-8"><br>    <title>without bootstrap</title><br>    <script src="<a href="https://code.jquery.com/jquery-3.4.1.slim.min.js" target="_top" class="ke-link">https://code.jquery.com/jquery-3.4.1.slim.min.js</a><a href="https://code.jquery.com/jquery-3.4.1.slim.min.js%22" target="_blank" class="ke-link">"</a> integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><br>    <link href="<a href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" target="_top" class="ke-link">https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css</a><a href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css%22" target="_blank" class="ke-link">"</a> rel="stylesheet"><br>    <script src="<a href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js" target="_top" class="ke-link">https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js</a><a href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js%22%3E%3C/script%3E" target="_blank" class="ke-link">"></a><br>  </head><br>  <body><br>    <div id="summernote"></div><br>    <script><br>      $('#summernote').summernote({<br>        placeholder: 'Hello stand alone ui',<br>        tabsize: 2,<br>        height: 120,<br>        toolbar: [<br>          ['style', ['style']],<br>          ['font', ['bold', 'underline', 'clear']],<br>          ['color', ['color']],<br>          ['para', ['ul', 'ol', 'paragraph']],<br>          ['table', ['table']],<br>          ['insert', ['link', 'picture', 'video']],<br>          ['view', ['fullscreen', 'codeview', 'help']]<br>        ]<br>      });<br>    </script><br>  </body><br></html></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>태그 일부 입력</b></span></p><NotSupported version="1.3" type="codeblock" rawAttribute="{text=<, language=hljs xml}" /><p> </p><NotSupported version="1.3" type="codeblock" rawAttribute="{text=<, language=hljs dust}" /><p> </p><p> </p><p> </p><p><b>화면 수정하기</b></p><p>게시글 입력 화면에 CKEditor을 사용하기 위해 boardForm.jsp를 수정해야 합니다. 스크립트 상단에 조금 전에 위에서 복사 하였던 CDN 코드를 아래와 같은 코드를 입력합니다.</p><p> </p><p> </p><p>그리고 페이지의 가장 마지막 하단에 아래와 같이 코드를 입력합니다. 이 부분은 CKEditor이 적용 될 수 있도록 CKEditor의 설정을 저장한 자바스크립트 파일을 호출하는 부분입니다. 이 코드는 항상 textarea보다 나중에 와야 합니다.</p><p> </p><p> </p><p>CKEditor의 설정관련 파일을 아래와 같이 만듭니다.</p><p> </p><p> </p><p> </p><p> </p><p>ckeditor.js의 내용은 아래와 같습니다.</p><p>출처: <a href="https://freehoon.tistory.com/123" target="_top" class="ke-link">https://freehoon.tistory.com/123</a> [훈잇 블로그:티스토리]</p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>CKEditor5 링크걸기    22:08:02:화:16:15</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>CKEditor 공식 홈페이지의 주소는 아래와 같습니다</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><a href="https://ckeditor.com" target="_blank" class="ke-link">https://ckeditor.com</a></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>출처: <a href="https://freehoon.tistory.com/123" target="_top" class="ke-link">https://freehoon.tistory.com/123</a> [훈잇 블로그:티스토리]</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>태그연습</b></span></p><p> </p><p> </p><p>이번에는 게시판을 조금 업그레이드 해보려고 합니다. 현재 게시판은 단순히 textarea로 이루어져 글자의 폰트나 크기, 색상 등 쉽게 바꿀 수 있는 환경이 아닙니다. 위지윅 에디터는 한글이나 워드를 사용하는 것과 같이 쉽게 이러한 작업을 할 수 있게 도와주는 프로그램 입니다. 무료로 사용할 수 있는 위지윅 프로그램이 몇 가지 있지만, 여기서는 CKEditor5 를 가지고 다뤄 보려 합니다.</p><p> </p><p>CKEditor을 사용방법에는 크게 2가지가 있습니다. 하나는 CDN 방식을 이용하는 방식과 다른 하나는 CKEditor을 다운로드 받아 사용하는 방법입니다. 여기에서는 CDN방식을 이용하여 CKEditor을 사용해 보도록 하겠습니다.</p><p> </p><p>CKEditor5 링크걸기</p><p>CKEditor 공식 홈페이지의 주소는 아래와 같습니다</p><p><a href="https://ckeditor.com" target="_blank" class="ke-link">https://ckeditor.com</a></p><p> </p><p>스크롤을 조금만 아래로 내려보면 CKEditor4와 CKEditor5에 대한 안내 링크가 보입니다.</p><p>CKEditor5의 [Overview] 버튼을 클릭합니다.</p><p> </p><p>CKEditor5에 대한 제품 설명 페이지로 이동됩니다. CKEditor5 페이지 우측 상단에 보면 많은 메뉴가 보입니다. 이중에 [Download] 버튼을 클릭 합니다.</p><p> </p><p>가장 먼저 할일은 CKEditor5를 어떤 방식으로 사용할 것인지 CKEditor 모드를 선택 해야 합니다.</p><p>여기서는 가장 기본적인 Classic 를 사용할 것이기 때문에 다음 단계로 넘어 가도록 하겠습니다. 다음 단계는 스크롤을 조금 아래로 내리면 나타납니다.</p><p> </p><p> </p><p>두번째 단계는 CKEditor을 어떻게 사용할 지에 대해 나옵니다.</p><p>2번째 방식은 CKEditor 소스를 다운로드 받아 로컬 디렉토리에 소스를 올리는 것이고 3번 CDN 방식은 CKEditor의 주소만 링크를 걸어 사용하는 방식입니다. 여기서는 CDN 방식을 이용하기로 하였으므로 텍스트 창에 있는 주소를 복사합니다.</p><p> </p><p> </p><p> </p><p><b>화면 수정하기</b></p><p>게시글 입력 화면에 CKEditor을 사용하기 위해 boardForm.jsp를 수정해야 합니다. 스크립트 상단에 조금 전에 위에서 복사 하였던 CDN 코드를 아래와 같은 코드를 입력합니다.</p><p> </p><p> </p><p>그리고 페이지의 가장 마지막 하단에 아래와 같이 코드를 입력합니다. 이 부분은 CKEditor이 적용 될 수 있도록 CKEditor의 설정을 저장한 자바스크립트 파일을 호출하는 부분입니다. 이 코드는 항상 textarea보다 나중에 와야 합니다.</p><p> </p><p> </p><p>CKEditor의 설정관련 파일을 아래와 같이 만듭니다.</p><p> </p><p> </p><p> </p><p> </p><p>ckeditor.js의 내용은 아래와 같습니다.</p><p> </p><p>ckeditor.js</p><p> </p><p> </p><p>붉은색 표시 부분은 textarea의 ID를 가리킵니다. 이렇게 하면 가장 기본적인 class 버전의 CKEditor 이 적용됩니다.</p><p> </p><p>글쓰기 페이지로 접속하여 테스트를 해봅니다.</p><p> </p><p> </p><p> </p><p>깔끔한 입력 폼으로 변경되었습니다. 다른 포털사이트 처럼 멋진 글쓰기가 가능해졌습니다.</p><p>[저장] 버튼을 클릭하여 입력한 내용이 제대로 저장되고 보여 지는지 상세페이지를 확인해 봅니다.</p><p> </p><p>출처: <a href="https://freehoon.tistory.com/123" target="_top" class="ke-link">https://freehoon.tistory.com/123</a> [훈잇 블로그:티스토리]</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><NotSupported version="1.3" type="codeblock" rawAttribute="{text=<, language=hljs xml}" /><p> </p><p> </p>
<!-- -->
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
https://freehoon.tistory.com/123