'서머노트 커스텀 버튼'에 해당되는 글 1건

# 이 글을 읽기전에 생성 방법을 모르신다면, 아래의 글을 읽어주세요.

https://minaminaworld.tistory.com/176

 

[jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법

# 예시 화면 (예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.) 2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 3. SummerNote 만들기 3-1. SummerNote 필요한 Jquery 요소 불러오기 -..

minaminaworld.tistory.com

# 예시 화면 
(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)



1. 커스텀 버튼 만들기 위해서는 summernote의 두가지 옵션을 사용해야합니다.

 $.summernote.options.buttons / $.summernote.options.toolbar 

   - $.summernote.options.buttons는 JSON Object 형식으로 버튼 이벤트를 연결

   - $.summernote.options.toolbar는 JSON Array 형식으로 툴바에 이벤트를 표현 

 // 버튼을 추가하기위한 방법
        var buttons = $.summernote.options.buttons;
        // 툴바에 표시할 버튼 넣기
        // ['배열이름', ['버튼1', '버튼2']]
        $.summernote.options.toolbar.push([
            "CustomButton",
            [
                "fontSizeUp",
                "fontSizeDown"
            ],
        ]);

2. 이벤트 내용 지정 및 연결 

 $.summernote.options.buttons에 연결할 이벤트 지정 

// 글자 크기 크게
        var fontSizeUp = function (context) {
            var ui = $.summernote.ui;
            // 이벤트 지정
            var button = ui.button({
                // 툴바 표시 내용
                contents: '<i class="fa fa-pencil"/> 글자 크기 크게',
                // 툴바 툴팁 표현 내용 
                tooltip: "글자 크기 크게",
                // 클릭시 이벤트 작동
                click: function () {
                    context.invoke("editor.fontSize", 40);
                },
            });
            return button.render();
        };
        // 툴바의 버튼 이벤트 붙이기
        buttons.fontSizeUp = fontSizeUp;

        //  글자 크기 작게
        var fontSizeDown = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-pencil"/> 글자 크기 작게',
                tooltip: "글자 크기 작게",
                click: function () {
                    context.invoke("editor.fontSize", 20);
                },
            });
            return button.render();
        };
        // 툴바의 버튼 이벤트 붙이기
        buttons.fontSizeDown = fontSizeDown;

3. 결과화면 ( 테스트 시, 드래그해서 실행)

   - 글자 크게

   - 글자 작게

   - jsffidle 테스트 

 

 


4. 전체테스트 코드 

더보기

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Summer Note </title>

    <!-- include libraries(jQuery, bootstrap) -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 

    <!-- 로컬 파일 summernote css/js -->

    <script src="../4.surmmernote/lib/summernote-bs4.js"></script>

    <link rel="stylesheet" href="../4.surmmernote/lib/summernote-bs4.css">

 

    <!-- CDN 파일 summernote css/js -->

    

    

 

    <!-- CDN 한글화 -->

    

    <!-- 로컬 파일 한글화 -->

    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> -->

    <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script>

</head>

 

<body>

    <div class="jumbotron p-1">

        <h1 class="display-4">SummerNote 사용해보기</h1>

        <!-- <p class="lead">Subtitle</p> -->

        <hr class="my-4">

        <div class="container-fluid">

            <!-- summernote을 직접적으로 사용할 요소 -->

            <div id="summernote">

                <p>Hello Summernote</p>

            </div>

        </div>

 

        <hr class="my-2">

        <div class="container-fluid mt-2">

            <!-- 수정 시작 버튼 -->

            <button id="edit" class="btn btn-primary" onclick="edit()" type="button">수정</button>

            <!-- 수정 완료 버튼 -->

            <button id="save" class="btn btn-primary" onclick="save()" type="button">수정 종료</button>

        </div>

      

    </div>

 

    <script>

        $(document).ready(function () {

            console.log($.summernote.options);

            // 실행시 언어 설정을 한글로 설정 

            $.summernote.options.lang = 'ko-KR';

            $.summernote.options.airMode = false;

        });

 

        var a = $('#summernote');

 

        // 수정버튼

        var edit = function () {

            a.summernote({ focus: true });

        };

 

        // 수정 종료

        var save = function () {

            var markup = a.summernote('code');

            a.summernote('destroy');

        };



        // 버튼을 추가하기위한 방법

        var buttons = $.summernote.options.buttons;

        // 툴바에 표시할 버튼 넣기

        // ['배열이름', ['버튼1', '버튼2']]

        $.summernote.options.toolbar.push([

            "CustomButton",

            [

                "fontSizeUp",

                "fontSizeDown"

            ],

        ]);



        // 글자 크기 크게

        var fontSizeUp = function (context) {

            var ui = $.summernote.ui;

            // 이벤트 지정

            var button = ui.button({

                // 툴바 표시 내용

                contents: '<i class="fa fa-pencil"/> 글자 크기 크게',

                // 툴바 툴팁 표현 내용 

                tooltip: "글자 크기 크게",

                // 클릭시 이벤트 작동

                click: function () {

                    context.invoke("editor.fontSize"40);

                },

            });

            return button.render();

        };

        // 툴바의 버튼 이벤트 붙이기

        buttons.fontSizeUp = fontSizeUp;

 

        //  글자 크기 작게

        var fontSizeDown = function (context) {

            var ui = $.summernote.ui;

            var button = ui.button({

                contents: '<i class="fa fa-pencil"/> 글자 크기 작게',

                tooltip: "글자 크기 작게",

                click: function () {

                    context.invoke("editor.fontSize"20);

                },

            });

            return button.render();

        };

        // 툴바의 버튼 이벤트 붙이기

        buttons.fontSizeDown = fontSizeDown;



    </script>

</body>



</html>


 

블로그 이미지

미나미나미

,