웹페이지에 적용하는 방법

아래의 HTML, CSS, Javascript 소스를 사용하려는 웹페이지 붙여넣기 하시면, 위 예제와 같이 적용이 됩니다.

 

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
  integrity="sha256-7ZWbZUAi97rkirk4DcEp4GWDPkWpRMcNaEyXGsNXjLg=" crossorigin="anonymous">
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css"
integrity="sha256-IKhQVXDfwbVELwiR0ke6dX+pJt0RSmWky3WB2pNx9Hg=" crossorigin="anonymous">

Dark mode를 사용하는 경우 아래의 코드를 추가로 넣어주세요.

<style>
@media (prefers-color-scheme: dark) {

  .note-editor.note-airframe,
  .note-editor.note-frame {
    border: 1px solid #f5f5f5
  }

  .note-editor .note-toolbar .note-style .dropdown-style h1,
  .note-editor .note-toolbar .note-style .dropdown-style h2,
  .note-editor .note-toolbar .note-style .dropdown-style h3,
  .note-editor .note-toolbar .note-style .dropdown-style h4,
  .note-editor .note-toolbar .note-style .dropdown-style h5,
  .note-editor .note-toolbar .note-style .dropdown-style h6,
  .note-editor .note-toolbar .note-style .dropdown-style p,
  .note-popover .popover-content .note-style .dropdown-style h1,
  .note-popover .popover-content .note-style .dropdown-style h2,
  .note-popover .popover-content .note-style .dropdown-style h3,
  .note-popover .popover-content .note-style .dropdown-style h4,
  .note-popover .popover-content .note-style .dropdown-style h5,
  .note-popover .popover-content .note-style .dropdown-style h6,
  .note-popover .popover-content .note-style .dropdown-style p {
    color: #000;
  }
  
  .note-editable h1,
  .note-editable h2,
  .note-editable h3,
  .note-editable h4,
  .note-editable h5,
  .note-editable h6,
  .note-editable p,
  .note-editable blockquote,
  .note-editable pre {
    color: #fff;
  }
}
</style>

 

HTML

<div id="summernote"></div>

 

JavaScript

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"
integrity="sha256-5slxYrL5Ct3mhMAp/dgnb5JSnTYMtkr4dHby34N10qw=" crossorigin="anonymous"></script>

<!-- language pack -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/lang/summernote-ko-KR.min.js"
integrity="sha256-y2bkXLA0VKwUx5hwbBKnaboRThcu7YOFyuYarJbCnoQ=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<script>
$('#summernote').summernote({
  placeholder: 'Summernote for Bootstrap 5',
  tabsize: 2,
  height: 400,
  lang: 'ko-KR', // default: 'en-US'
});
</script>