토스트 UI 에디터의 자잘한 버그로 썸머노트 위지윅 에디터로 대체하는 작업이 필요했다. 위지윅 에디터의 개인적 테스트는 토스트 UI 에디터보다 만족스러웠다. 단순해 보이지만 전문가적인 면을 강조하고 자잘한 오류가 있는 에디터 보다는 썸머노트를 사용하는 것이 낫다는 생각이다. 모든 것이 그렇지만 제품은 어설프게 보여도 기능면에서 충실한 것이 선택을 받는 것 같다.
썸머노트 위지윅 에디터 사용해보자
summernote wysiwyg editor
토스트 UI 에디터 ( Toast UI Editor ) 를 사용하려고 적용까지 다 했지만, 새로운 복병이 나타났다.
다른 페이지로 가기 위한 링크 역할을 하는 a 태그에 새 창 열기 기능이 없는 것.
새 창 열기 기능이 없다는 것은 조금 난해한 측면이 있는데 이것을 토스트 UI 에디터에서 초기화할 때 옵션을 주면 가능하다는 설명글은 많이 있다.
실제로 적용시 작동은 되지 않았으며, 에디터의 생김새에 비해 자잘한 버그들이 존재하고 있다.
깃헙( github ) 의 이슈를 찾아봤지만, 토스트 UI 에디터를 사용하는 모든 이들은 고쳐주기를 바라고 있지만 정작 업데이트는 일방적인 상황으로 보인다.
위지윗 ( wysiwyg ) 에디터에서 굳이 사용자에게 익숙하지 않은 마크다운 기능을 강조하는 것에서 뭔가 이상하다는 느낌도 들었지만 무료로 사용하는 입장에서 불평은 할 수 없다.
언제나 대체재는 존재하고, 언제나 그렇듯 답을 찾을 것이기 때문이다. 시간이 문제지만 말이다.
여러가지 찾다가 썸머노트 위지윅 ( summernote wysiwyg ) 를 찾게 되었다.
일단 내가 원하는 기능들은 존재했고 이번엔 이것을 테스트 해 보려고 한다.
설치방법
썸머노트 위지윅 에디터 ( summernote wysiwyg editor ) 를 사용하기 홈페이지를 방문해 본다.
웹에서 사용할 수 있도록 자바스크립트 라이브러리르 불러와야 하기 때문이며, 부트스트랩 ( bootstrap ) 을 이용할 수도 있고 제외하여 사용할 수도 있다.
본인의 경우 부트스트랩을 사용하지 않는 lite 버전을 적용해 보도록 했다.
기능상으로 크게 문제 될 것도 없고 동작하는데도 차이는 없다.
썸머노트 홈페이지는 아래와 같다.
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
화면에 표시
홈페이지에 접속하면 화면 상단의 Getting Started 메뉴를 클릭한다.
썸머노트 라이브러리를 CDN 에서 자바스크립트에서 호출하여 사용할 수도 있고, 코드를 직접 다운로드 받아 사용할 수 있다.
가장 좋은 메리트가 있다면 무료라는 점이고, 다른 에디터들과 비교하여 불편함은 없어보인다.
토스트 UI 에디터 처럼 필요 이상의 전문성을 강요하는 부분도 없다.
오픈소스 라이브러리 공개하는 것은 좋은데 사용자 중심으로 배포했으면 하는 바램이지만 무료사용자가 불평해봐야 소용없다. 빨리 대체재를 찾는게 좋다.
아래는 썸머노트 자바스크립트 라이브러리를 불러오는 부분을 나타낸다.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">부트스트랩을 사용하는 경우라면 더 복잡해 질수 있으며 필요 이상의 파일을 다운로드 받는 느낌이 들 수 있다.
위의 코드는 부트스트랩을 사용하지 않는 simple lite 버전을 사용하는 것으로 기능상에는 큰 차이는 없다.
아래는 썸머노트를 표시하기 위한 html 코드이다.
<div id="summernote"></div>
또는
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
</form>라이브러리를 불러왔고, html 태그로 썸머노트를 추가할 부분을 만들었다면 웹페이지가 로딩할 때 썸머노트를 생성하고, 초기화해주는 작업이 필요하다.
아래는 웹페이지가 처음 나타날 때 썸머노트를 생성하는 자바스크립트 코드이다.
<script>
$(document).ready(function() {
$('#summernote').summernote({
lang: 'ko-KR',
tabsize: 2,
height: 300,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
});
</script>폼 태그 내부에 사용할 수도 있고 단순히 div 태그에 사용할 수도 있다.
결과화면을 보자.
코드 몇 줄 넣은 것만으로 썸머노트 에디터가 잘 부착되었다.
이런 저런 테스트를 해 보았을 때 에디터에 내용이 잘 작성되는 것 또한 확인했다.
전체 코드 및 결과
썸머노트를 웹페이지가 붙어는 과정은 다음과 같다.
- 썸머노트 라이브러리를 불러온다.
부트스트랩을 사용할 수도 그렇지 않을 수도 있으며, 개발자의 마음이다. - html 태그로 썸머노트가 나타날 부분을 id 로 정해준다.
div 태그 또는 textarea 태그를 사용할 수 있으며 form 태그 내부에 넣을 수도 있다. - 웹페이지가 나타날 때 썸머노트를 생성하고 초기화한다.
위의 과정에 대한 전체 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>썸머노트</title>
<style>
</style>
<!-- include libraries(jQuery, bootstrap) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
</head>
<body>
<div id="container">
<script>
$(document).ready(function() {
$('#summernote').summernote({
lang: 'ko-KR',
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 300,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
});
</script>
<div>
<div id="summernote"></div>
</div>
</div>
</body>
</html>'programming > TroubleShootInG' 카테고리의 다른 글
| 썸머노트 위지윅 에디터 html 설정하기 (0) | 2022.12.14 |
|---|---|
| 썸머노트 위지윅 에디터 html 가져오기 (0) | 2022.12.09 |
| 자바스크립트 동기 비동기 동작 방식 이해 (0) | 2022.12.05 |
| html 입력 태그 전체 선택 ctrl + a 기능 만들기 input textarea 태그 한정 (0) | 2022.12.02 |
| html 태그 name 선택과 접근 document 객체 jquery 비교 (0) | 2022.12.01 |
댓글