[CKEditor] - ck에디터 CKEditor5 사용법 및 문법

#ck에디터 CKEditor5 사용법 및 문법

 

 

#ckeditor 다운로드 사이트 링크입니다.

https://ckeditor.com/ckeditor-5/download/

 

#html 

<script src="/ckeditor5-31.1.0/build/cheditor.js"></script>

<style>
  .ck.ck-editor {
    max-width: 500px;
  }
  .ck-editor__editable {
    min-height: 300px;
  }
</style>

<table>
  <tr>
    <th>내용</th>
    <td class="editorBox">
      <textarea id="ckeditor" name="content"></textarea>
    </td>
  </tr>
</table>

 

 

#js

<script>
  var cheditor;
  ClassicEditor.create(document.querySelector("#ckeditor"), {
    // 언어
    language: "ko",
    // 폰트 종류
    fontFamily: {
      options: [
        'default',
        '궁서체',
      ]
    },
    // 폰트 크기
    fontSize: {
      options: [
        14,
        'default',
        16
      ]
    },
    // 폰트 색상
    fontColor: {
      // 한줄에 보여 줄 개수
      columns: 2,
      colors: [
        {
          color: 'hsl(0, 0%, 0%)'
        },
        {
          color: 'hsl(0, 0%, 60%)'
        }
      ]
    },
    // 폰트 배경 색상
    fontBackgroundColor: {
      columns: 2,
      colors: [
    	{
          color: 'hsl(0, 0%, 0%)'
        },
        {
          color: 'hsl(0, 0%, 60%)'
        }
      ]
    },
    // 커스텀 플러그인 클래스 추가
    extraPlugins: [CustomUploadPlugin],
    // 미디어 기능
    mediaEmbed: {
      previewsInData: true
    }, 
    // Source Editor 속성 허용 범위
    htmlSupport: {
      allow: [
        {
          name: /.*/,
          attributes: true,
          classes: true,
          styles: true
        }
      ]
    }
  }).then(
    newEditor => {
      ckeditor = newEditor;
    }
  ).catch(error=> {
    console.error(error);
  });
  
  function CustomUploadPlugin(editor){
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      return new UploadAdapter(loader, 'test');
    }
  }
  
  // 값 얻기
  var content = ckeditor.getData();
  // focus
  ckeditor.focus();
  
</script>