DEV/javascript

Trumbowyg editor 무료 웹 에디터 사용 방법

석봉 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("&gt;", ">");
    innerText = innerText.replaceAll("&lt;", "<");
    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

 

저작자표시 (새창열림)