Summernote에서 옮기기

jQuery 없이, 같은 textarea와 같은 업로드 서버로.

Summernote는 jQuery가 필요하고 값을 꺼낼 때 summernote('code') 를 부릅니다. 82editor는 의존성이 없고, textarea에 씌우면 폼 전송 때 값이 자동으로 들어갑니다.

바꾸기 전

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="summernote-lite.min.css" rel="stylesheet">
<script src="summernote-lite.min.js"></script>
<textarea id="summernote" name="content"></textarea>
<script>
  $('#summernote').summernote({
    height: 400,
    callbacks: { onImageUpload: (files) => upload(files[0]) },
  });
  const html = $('#summernote').summernote('code');
</script>

바꾼 뒤

<link rel="stylesheet" href="https://82editor.com/cdn/v1.0.0/82editor.css">
<script src="https://82editor.com/cdn/v1.0.0/82editor.min.js"></script>
<textarea id="summernote" name="content"></textarea>
<script>
  const editor = Editor82.createEditor('#summernote', {
    height: 400,
    uploadImage: (file) => upload(file), // return the image URL
  });
  const html = editor.getHTML();
</script>

Summernote	82editor
`$(el).summernote('code')`	`editor.getHTML()`
`$(el).summernote('code', html)`	`editor.setHTML(html)`
`$(el).summernote('isEmpty')`	`editor.isEmpty()`
`$(el).summernote('destroy')`	`editor.destroy()`
`callbacks.onChange`	`editor.on('change', fn)`
`callbacks.onImageUpload`	`uploadImage(file) => url`
`toolbar: [[...]]`	`toolbar: 'board'` 또는 이름 목록 (툴바)
`lang: 'ko-KR'`	`language: 'ko'`