새로운 프로젝트를 들어가면서 새로운 텍스트 에디터를 적용해보기 위해 이것저것 찾던 도중 IE에서 잘 동작이되며(이놈의 IE...) 무료 라이센스인 것들을 고르고 고르다보니 기능이 없거나 이쁘지가 않거나 여러 이슈들이 있었는데, 만족할만한 에디터를 찾아서 공유해보고자 합니다.
텍스트 에디터 종류들은 WYSIWYG HTML Editor 형태로 검색해보시면 더 많은 에디터를 찾아 볼 수 있습니다.
TinyMce License로서 특별히 추가하는 plugin을 사용하지 않는다는 전제하에 무료입니다.
https://www.tiny.cloud/blog/tinymce-free-wysiwyg-html-editor/
The TinyMCE WYSIWYG HTML editor is free forever
Looking for a free WYSIWYG HTML editor? The TinyMCE core editor is free to use for commercial and noncommercial purposes. Fully functional with 44 plugins and ready to customize as needed.
www.tiny.cloud
Tiny Editor
https://www.tiny.cloud/docs/quick-start/
TinyMCE | Quick start
Get an instance of TinyMCE 5 up and running using the Tiny Cloud.
www.tiny.cloud
해당 글을 보고 먼저 테스트용 계정을 생성해서 api key를 받고 간단하게 http서버를 열어서 소스코드 테스트를 진행해보았습니다.
뭐 간단한 세팅은 진짜 간단합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
간단하게 에디터의 모습으로 보입니다.
하지만 좀 더 블로그에서 사용하는 에디터나 이쁘게 커스텀을 하고 싶어서 여러 옵션을 통해 좀 더 변경을 해보았습니다.
개인적으로 변경한 Tiny Editor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.tiny.cloud/1/각자 발급받은 api key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="editor">Hello, World!</textarea>
<button type="button" id="save">게시글 저장</button>
</form>
</body>
<script>
$(function(){
var plugins = [
"advlist", "autolink", "lists", "link", "image", "charmap", "print", "preview", "anchor",
"searchreplace", "visualblocks", "code", "fullscreen", "insertdatetime", "media", "table",
"paste", "code", "help", "wordcount", "save"
];
var edit_toolbar = 'formatselect fontselect fontsizeselect |'
+ ' forecolor backcolor |'
+ ' bold italic underline strikethrough |'
+ ' alignjustify alignleft aligncenter alignright |'
+ ' bullist numlist |'
+ ' table tabledelete |'
+ ' link image';
tinymce.init({
language: "ko_KR", //한글판으로 변경
selector: '#editor',
height: 500,
menubar: false,
plugins: plugins,
toolbar: edit_toolbar,
/*** image upload ***/
image_title: true,
/* enable automatic uploads of images represented by blob or data URIs*/
automatic_uploads: true,
/*
URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
images_upload_url: 'postAcceptor.php',
here we add custom filepicker only to Image dialog
*/
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
/*
Note: In modern browsers input[type="file"] is functional without
even adding it to the DOM, but that might not be the case in some older
or quirky browsers like IE, so you might want to add it to the DOM
just in case, and visually hide it. And do not forget do remove it
once you do not need it anymore.
*/
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
/*
Note: Now we need to register the blob in TinyMCEs image blob
registry. In the next release this part hopefully won't be
necessary, as we are looking to handle it internally.
*/
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
/*** image upload ***/
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
$("#save").on("click", function(){
var content = tinymce.activeEditor.getContent();
console.log(content);
});
});
</script>
</html>
* tiny 동작 script를 적용시 저는 개인적으로 발급받은 url주소를 입력하였습니다. 자신만의 api key를 발급받은 url로 연결하시면 될 것 같습니다.
변경 후에는 좀 더 깔끔하게 메뉴바를 지우고 툴바들로 위치시켰고, 필요한 테이블표, 이미지, 링크등을 추가하였습니다.
텍스트 제어 관련된 색상, 폰트, 컬러 등을 순차적으로 배치해보았습니다. 또한, language 옵션에서 한글번역이 가능하여 변경하였습니다.
form태그 내부에 게시글 저장이라는 button태그를 추가하였는데, 클릭하면 tiny자체에서 제공하는 getContent메소드를 통해 게시글 내부의 HTML 코드를 확인 할 수 있습니다.
해당 내용을 서버로 전송하여 저장하는 형태로 처리하면 될 것 같습니다.
여러가지 옵션 변경은 아래글을 참고하여주세요.
TinyMCE | Documentation
Official documentation for the most advanced and widely deployed rich text editor platform.
www.tiny.cloud
'WEB > Javascript' 카테고리의 다른 글
| Hoisting - 호이스팅이 뭘까?... (0) | 2022.01.11 |
|---|---|
| 카카오(Daum) 주소 찾기 API 사용하기 (6) | 2021.07.09 |
| javascript - 객체, 배열의 단순 복사, 얕은 복사, 깊은 복사(shallow copy, deep copy) (0) | 2021.03.17 |
| Alert, Confirm을 모달 팝업으로 만들기 (21) | 2020.10.22 |
| Javascript - 이미지 미리보기 회전되어 나옴(EXIF) (0) | 2020.09.11 |