개발 일지 24 - 게시글 작성시 글자 크기,굵기.. + TinyMCE

게시글을 작성할때 티스토리처럼 글씨 굵게 만들고 크기도 자유롭게 키울 수 있는 코드를 짜려고 했다.

 

자바 스크립트의 execCommand라는 함수를 사용하려고 했다. 내가 원하는 영역을 선택했을때 그 부분만 글씨의 크기를 키우고 줄일 수 있는 것이다. 

 

그렇게 코드를 짜다가 TinyMCE라는 것을 알게 되었다. 

 

TinyMCE는 WYSIWYG (What You See Is What You Get) 에디터이다. 이 뿐만 아니라 Quill, CKEditor이 있다.

 

외부에 있는 에디터를 사용을 해보는 것이 처음이라 지금껏 열심히 짜두었던 코드에 내가 모르는 어떤 문제가 생기면 어떡하지? 하는 마음으로 사용을 하지 않으려 했다.

 

하지만 막상 사용해보니까 문제가 생길 부분은 없었고 잘 동작하는 것을 확인할 수 있었다.

 

어떻게 하면 사용할 수 있는지 정리를 해보았다.

 

---

 

https://www.tiny.cloud/

The Most Advanced WYSIWYG Editor | Trusted Rich Text Editor | TinyMCE

 

일단 위의 사이트에 회원가입을 해야 한다. 

 

회원가입만 하면

"2. Add the TinyMCE code snippet "

해당 목록이 보일 것이다. 

 

<script src="http://..........js"referrerpolicy="origin"></script>

<script>
                tinymce.init({
                    selector: '#content',  // 사용할 텍스트 영역의 id
                    plugins: [
                    // Core editing features
                    'anchor', 'autolink', 'charmap','images'],
                    license_key: 'gpl',
                    toolbar_mode: 'floating',
                });
            </script>

 

위의 2 코드를 html파일에 넣어준뒤에 selector부분에 내가 사용할 텍스트 영역의 id를 입력을 해주면 된다.

 

<div class="form-group" >
                <textarea id="content" name="content" placeholder="내용을 입력하세요" value="{{form.content.value}}" ></textarea>
            </div>

 

 

출력된 화면

 

 

여기까지 하면 거의 끝난 것이나 다름없다.

 

마지막으로 my account에 approved Domains에 들어가서 내 주소를 입력해서 등록을 하면 아무 문제없이 실행이 된다.

 

---

 

tinyMCE는 글자 크기 굵기 뿐만 아니라 선도 그을 수 있고 이미지도 첨부할 수  있는 것으로 보인다. 

 

하지만 여기서 들었던 의문점은 내 DB에 어떻게 저장이 되는가 하는 문제였다.

 

<p>잘된다&nbsp;</p>
<p>&nbsp;</p>
<p style="text-align: center;">이렇게&nbsp;</p>

 

html의 형식으로 저장이 되었고 출력 또한 위의 글 그대로 출력이 되었다. 

 

해결책은 |safe만을 붙여주면 된다.

 

<div class="post-body">
                {{ post.content |safe}}
            </div>

 

위 코드를 사용했을때 DB에 저장한대로 출력하지 않고 내가 tinyMCE에서 입력했던 그대로 출력이 되는 것을 확인 할 수 있었다.