-
Trumbowyg editor 무료 웹 에디터 사용 방법DEV/javascript 2022. 6. 6. 18:09
Trumbowyg editor (WYSIWYG editor)는 웹 에디터이다.
웹 HTML/Javascript로 에디터를 사용하고자 할 때 생각보다 적당한 에디터가 없다...
찾다 보니 각 에디터 별로 하자가 있어서 답답했다.
toast ui editor가 무료 에디터 중 깔끔하고 다 좋은데 font size 조절이 없다.
(node 환경에서는 유저가 만들어 놓은 플러그인이 있다.)
만들어서 사용하려고 했는데 내가 사용해야 하는 조건과 맞지 않아 사용이 불가했다.
(강제로 만들었다. 맨 아래에 코드를 남겨두겠다. 추천하지는 않으나 혹시 필요하면 참조하자.)
Trumbowyg
html
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <!-- [jQuery] --> <script src="./jquery.js"></script> <!-- [Trumbowyg] --> <script src="./editor/trumbowyg.js"></script> <script src="./editor/plugins/fontsize/trumbowyg.fontsize.js"></script> <script src="./editor/langs/ko.js"></script> <link rel="stylesheet" href="./editor/ui/trumbowyg.css"> </head> <body> <!-- 에디터 부분 --> <div id="editor"></div> </body> <script src="./test.js"></script>js
// 실행 $(function(){ const content = "에디터 내용 입니다."; const myEditor = $('#editor').trumbowyg({ lang: 'ko', imageWidthModalEdit: true, /** * [btnsDef] * - 커스텀 버튼 */ btnsDef: { refresh: { fn: function(){ console.log("refresh!"); const content = myEditor.html(); myEditor.html(content); }, tag: 'refreshTag', title: '새로고침', }, }, btns: [ ['fontsize'], ['viewHTML'], // ['undo', 'redo'], // Only supported in Blink browsers ['formatting'], ['strong', 'em', 'del'], ['superscript', 'subscript'], ['link'], // ['insertImage'], ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], ['unorderedList', 'orderedList'], ['horizontalRule'], ['removeformat'], ['fullscreen'], ['refresh'], ['imgController'] ], plugins: { fontsize: { sizeList: [ '6px', '8px', '9px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', ] } } }); // 에디터를 최대 화면으로 $('#editor').trumbowyg('execCmd', {cmd: 'fullscreen'}); $('#editor').trumbowyg('html', content); // 새로고침 버튼 이미지(btnsDef에서 기본적으로 제공하는 아이콘 등록 방법이 있음, 나는 그냥 직접 바꿨다.) $('.trumbowyg-refresh-button ').children().remove(); $('.trumbowyg-refresh-button ').append(` <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/> <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/> </svg> `); })
toast ui editor font size
// tui editor setFontSize = (size) => { const wwSelection = editor.getSelection(); const text = `<span style="font-size: ${size}px">` + editor.getSelectedText(wwSelection[0], wwSelection[1]) + `</span>`; editor.replaceWithWidget(wwSelection[0], wwSelection[1], text); let innerText = editor.getHTML(); innerText = innerText.replaceAll(">", ">"); innerText = innerText.replaceAll("<", "<"); editor.setHTML(innerText); }toast ui ediitor
https://nhn.github.io/tui.editor/latest/
https://nhn.github.io/tui.editor/latest/
🚩 Table of Contents Collect Statistics on the Use of Open Source TOAST UI products apply Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves
nhn.github.io
trumbowyg editor
https://alex-d.github.io/Trumbowyg/
Trumbowyg - A lightweight WYSIWYG editor by Alex-D / Alexandre Demode
Lorem ipsum dolor sit amet, consectetur adipiscing elit, some text bold sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
alex-d.github.io
'DEV > javascript' 카테고리의 다른 글
jQuery 부모의 element를 참조하는 방법 (가져오는 방법) (0) 2022.07.30 jQuery Resizable을 통한 이미지 크기 조절 (이미지 사이즈 조절) (0) 2022.06.06 Javascript 배열에서 조건에 맞는 값 필터링 (0) 2022.06.04 jQuery 요소의 높이, 넓이 (가로, 세로) 값 불러오기 / 값 변경하기 (0) 2022.06.04 Javascript innerWidth, innerHeight, outerWidth, outerHeight (0) 2022.06.04