81일차(2022.04.21) _ WYSIWYG - summernote

- What You See Is What You Get의 약자
- 사용자가 입력한 text 그대로를 DB에 저장, 이후 출력 시 입력한 text 그대로 반환됨(개행이나 이미지 등등)
- 문서 및 문서 작성 방법을 GUI로 구현한 것을 말함

 

---

summernote

 

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

 

summernote를 사용하기 위해서는 jQuery와 Bootstrap도 필요하다.

jQuery 라이브러리 js 파일(cdn)과, 부트스트랩의 css, js 파일(cdn) 우선순위가 더 높아야 한다.

그래야 summernote에서 사용할 수 있기 때문이다. jQuery 버전은 상관 없는 듯 하다.

부트스트랩은 버전이 상관이 있음으로 아래를 학인하길 바란다.

 

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

<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>

<script>
	$('#summernote').summernote();
</script>

 

그냥 작성 폼을 이용하는 경우에는 div태그를 사용해도 된다.

만약 텍스트를 직접 작성해서 파라미터로 넘겨주어야 한다면 textarea를 사용해야 한다.

div태그에 summernote를 적용하나, textarea에 summernote를 적용하나, 보여지는 모습은 똑같지만,

만약 form태그를 이용해서 데이터를 파라미터로 넘겨주어야 한다면, textarea를 사용해야 한다는 소리다.

 

우선 id는 summernote라고 주었는데, 이 id값은 상관없다.

summernote를 적용시키기 위해서는 script에서 요소를 선택하고, summernote() 함수를 호출해주면 된다.

만약 textarea에 뭐 id값을 id1으로 주었다면, id1 요소를 선택하고, summernote() 함수를 호출하면 된다는 것이다.

이 때 선택자는 jQuery 선택자를 사용해야 한다.

 

다만 summernote는 부트스트랩 5버전을 지원해준다고 하긴 하는데, 3, 4버전밖에 지원을 안하는 듯 싶다..

그래서 부트스트랩 5버젼과 함께 사용 시에는 사용이 불가능할 수도 있다..

부트스트랩 5버젼은 그냥 summernote lite버젼을 사용해야겠다.

 

---

DB에 저장되는 원리

 

summernote를 적용시킨 다음에, textarea에 문자나 이미지, 테이블 등등을 입력하고 

우측에 </> 표시를 누르면, 코드가 나온다.

즉, textarea에 문자열만이 저장되는 것이 아니라, 아예 HTML 코드 자체를 넣어놓는 것이다.

그래서, DB에 저장될 때도 아예 HTML 코드가 저장이 된다.

심지어 이미지파일의 경우에는, 따로 이미지파일의 경로를 지정해서 불러오는 것이 아니다.

이미지파일은 해당 이미지파일을 자체의 데이터를 bit로 변환시킨다음에 

src속성에 변환한 bit값을 넣어놓는 것이기에 이 bit의 길이가 상당하다. 

그래서 DB의 데이터 타입인 varchar타입으로는 저장하기 힘들다. 데이터가 워낙 크기 때문에

그래서 CLOB타입을 사용해주는 것이 좋다.

 

---

사용자 지정 입력 폼 만들기

 

$('#summernote').summernote({
  height: 300,                 // set editor height
  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor
  focus: true                  // set focus to editable area after initializing summernote
});

 

이렇게 summernote 함수를 호출할 때, 매개변수를 넣을 수 있다.

그래서 직접 폼의 크기라던지 등등을 설정할 수 있다.

 

---

JS에서 summernote 값 get/set

 

// get
var markupStr = $('#summernote').summernote('code');

// set
var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

 

만약에 비동기 방식으로 파라미터와 함께 요청을 보내야 한다던가, 그런 경우로

JS에서 textarea 안의 내용을 가져와야 할 경우나,

또는 JS를 통해 textarea안에 내용을 넣어야 할 경우도 있다.

 

그럴 경우에 위의 코드를 사용하면 된다.

변수 markupStr 에다가, summernote가 적용된 textarea 요소를 선택한 다음에,

summernote 함수를 호출하는데 매개변수로 'code'를 넣어주면 된다.

그러면, 해당 textarea 안에 작성된 코드를 가져오게 된다.

 

set할 경우에는, 뒤에 매개변수로 'code'를 주고, 하나 더 주어야 하는데

바로 textarea에 세팅할 문자열을 넣어주면 된다.