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

https://minaminaworld.tistory.com/176

 

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

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

minaminaworld.tistory.com

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



1. summernote 검색될 키워드 요소 지정

// 웹에디터에서 키워드 검색될 요소 
  var words = ["NASA", "E+N Photographies", "Paul", "Tina"];
  // 웹에디터에 키워드 검색된 요소를 대체할 요소
  var picture = {
    NASA:
      "https://i.picsum.photos/id/1002/4312/2868.jpg?hmac=5LlLE-NY9oMnmIQp7ms6IfdvSUQOzP_O3DPMWmyNxwo",
    "E+N Photographies":
      "https://i.picsum.photos/id/1003/1181/1772.jpg?hmac=oN9fHMXiqe9Zq2RM6XT-RVZkojgPnECWwyEF1RvvTZk",
    Paul:
      "https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",
    Tina:
      "https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w",
  };

2. summernote Hint 값 지정

 $("#summernote").summernote({
    // 작동 시점에서 크기 지정
    // width: 500,
    // heigth: 600,
    // 강제 focusing
    focus: true,
    hint: {
      words: words,
      match: /\b(\w{1,})$/,
      search: function (keyword, callback) {
        // 배열에서 검색될 요소
        callback(
          $.grep(this.words, function (item) {
            return item.indexOf(keyword) === 0;
          })
        );
      },
      template: function (item) {
        // 힌트 목록을 표현할 방법
        console.log("template item", item);
        return '<img src="' + picture[item] + '" width="20" /> :' + item + ":";
        // return "template => "+ item;s
      },
      content: function (item) {
        // 힌트 목로에서 선택된 요스를 웹에디터에 표현할 방법
        console.log("content item", item);
        return $("<img />").attr("src", picture[item]).css("width", 200)[0];
        // return "content => "+ item;
      },
    },
  });

 3. 결과화면


 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 () {

            // 웹에디터에서 키워드 검색될 요소 

            var words = ["NASA""E+N Photographies""Paul""Tina"];

            // 웹에디터에 키워드 검색된 요소를 대체할 요소

            var picture = {

                NASA:

                    "https://i.picsum.photos/id/1002/4312/2868.jpg?hmac=5LlLE-NY9oMnmIQp7ms6IfdvSUQOzP_O3DPMWmyNxwo",

                "E+N Photographies":

                    "https://i.picsum.photos/id/1003/1181/1772.jpg?hmac=oN9fHMXiqe9Zq2RM6XT-RVZkojgPnECWwyEF1RvvTZk",

                Paul:

                    "https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",

                Tina:

                    "https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w",

            };

            $("#summernote").summernote({

                // 작동 시점에서 크기 지정

                // width: 500,

                // heigth: 600,

                // 강제 focusing

                focus: true,

                hint: {

                    words: words,

                    match: /\b(\w{1,})$/,

                    search: function (keywordcallback) {

                        // 배열에서 검색될 요소

                        callback(

                            $.grep(this.wordsfunction (item) {

                                return item.indexOf(keyword) === 0;

                            })

                        );

                    },

                    template: function (item) {

                        // 힌트 목록을 표현할 방법

                        console.log("template item"item);

                        return '<img src="' + picture[item] + '" width="20" /> :' + item + ":";

                        // return "template => "+ item;s

                    },

                    content: function (item) {

                        // 힌트 목로에서 선택된 요스를 웹에디터에 표현할 방법

                        console.log("content item"item);

                        return $("<img />").attr("src"picture[item]).css("width"200)[0];

                        // return "content => "+ item;

                    },

                },

            });

        };

 

        // 수정 종료

        var save = function () {

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

            a.summernote('destroy');

        };

 

    </script>

</body>



</html>

 

 

블로그 이미지

미나미나미

댓글을 달아 주세요

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

https://minaminaworld.tistory.com/176

 

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

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

minaminaworld.tistory.com

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


단락 API 테스트 화면 


# 커스텀 버전 방법

// 버튼을 추가하기위한 방법
var buttons = $.summernote.options.buttons;
// 툴바에 표시할 버튼 넣기
$.summernote.options.toolbar.push([
  "Paragraph",
  [
    "ParagraphFormatH1", // 단락 H1
    "ParagraphFormatPara", // 단락 P 태그 
    "ParagraphIndent", // 단락 탭 추가
    "ParagraphOutdent", // 단락 탭 제거 
    "ParagraphInsertOrderedList", // 순번 
    "ParagraphInsertUnorderedList", // 순번 제거 
    'ParagraphJustifyCenter', // 가운데 정렬
    'ParagraphLineHeight' // 라인 헤이트
  ],
]);

# 단락 H1 포맷 적용 

// 단락 글자 변경 <h1> ~ <h6>
var ParagraphFormatH1 = function (context) {
  var ui = $.summernote.ui;
  var button = ui.button({
    contents: '<i class="fa fa-pencil"/> 단락 포맷 H1',
    tooltip: "단락의 글자 변경",
    click: function () {
      context.invoke("editor.formatH1");
    },
  });
  return button.render();
};
// 툴바의 버튼 이벤트 붙이기
buttons.ParagraphFormatH1 = ParagraphFormatH1;

//  단락 포맷 H1
var ParagraphformatH1 = function(){
  a.summernote('formatH1');
};

# 단락 P 태그 적용 

// 툴바 버튼 
// 현재 단락 p 태그로 변경
var ParagraphFormatPara = function (context) {
  var ui = $.summernote.ui;
  var button = ui.button({
    contents: '<i class="fa fa-pencil"/> 현재 단락 p 태그로 변경',
    tooltip: "현재 단락 p 태그로 변경",
    click: function () {
      context.invoke("editor.formatPara");
    },
  });
  return button.render();
};
// 툴바의 버튼 이벤트 붙이기
buttons.ParagraphFormatPara = ParagraphFormatPara;

// 버튼 이벤트 
//  단락 포맷 H1
var ParagraphformatH1 = function(){
  a.summernote('formatH1');
};

# 나머지는 결과화면 코드 확인 부탁드립니다....

# 결과화면

 

 


# 전체 테스트 코드 

더보기

<!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>

 

        <hr class="my-2">

 

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

            <!-- 코드 르뷰 토글 -->

            <button id="codeViewToggle" class="btn btn-primary" onclick="codeViewToggle()"

                type="button">codeViewToggle</button>

            <!-- 썸머노트 활성화 비활성화 -->

            <button id="enable" class="btn btn-primary" onclick="enable()" type="button">enable</button>

            <button id="disable" class="btn btn-primary" onclick="disable()" type="button">disable</button>

            <!-- 썸머노트 글자기 넣기 -->

            <button id="insertText" class="btn btn-primary" onclick="insertText()" type="button">insertText</button>

            <!-- 썸머노트 풀스크린  -->

            <button id="fullscreen" class="btn btn-primary" onclick="fullscreen()" type="button">fullscreen</button>

            <!-- 썸머노트 비였는지 확인  -->

            <button id="empty" class="btn btn-primary" onclick="empty()" type="button">empty</button>

            <!-- 썸머노트 활성화 전으로 돌리기ㄴ -->

            <button id="reset" class="btn btn-primary" onclick="reset()" type="button">reset</button>

            <!-- 썸머노트 이전 되돌리기 -->

            <button id="undo" class="btn btn-primary" onclick="undo()" type="button">undo</button>

            <button id="redo" class="btn btn-primary" onclick="redo()" type="button">redo</button>

        </div>

 

        <hr class="my-2">

        <h4 class="ml-3">font API</h4>

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

            <button id="backColor" class="btn btn-primary" onclick="backColor()" type="button">글자 배경</button>

            <button id="foreColoe" class="btn btn-primary" onclick="foreColoe()" type="button">글자색 </button>

            <button id="fontBold" class="btn btn-primary" onclick="fontBold()" type="button">글자 Bold</button>

            <button id="fontItalic" class="btn btn-primary" onclick="fontItalic()" type="button">글자 이태릭</button>

            <button id="fontUnderline" class="btn btn-primary" onclick="fontUnderline()" type="button">글자 언더라인</button>

            <button id="fontName" class="btn btn-primary" onclick="fontName()" type="button">글자 폰트 </button>

            <button id="fontSize" class="btn btn-primary" onclick="fontSize()" type="button">글자 사이즈</button>

            <button id="fontSizeUnit" class="btn btn-primary" onclick="fontSizeUnit()" type="button">글자 유닛 지정</button>

            <button id="fontRemoveFormat" class="btn btn-primary" onclick="fontRemoveFormat()" type="button">글자 포맷 초기화

            </button>

            <button id="fontSuperscript" class="btn btn-primary" onclick="fontSuperscript()" type="button">위첨자</button>

            <button id="fontSubscript" class="btn btn-primary" onclick="fontSubscript()" type="button">아래첨자</button>

        </div>

 

        <hr class="my-2">

        <h4 class="ml-3">Paragraph API</h4>

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

            <button id="ParagraphformatH1" class="btn btn-primary" onclick="ParagraphformatH1()" type="button"> 단락 포맷 H1</button>

            <button id="ParagraphformatPara" class="btn btn-primary" onclick="ParagraphformatPara()" type="button"> 현재 단락 p 태그로 변경</button>

            <button id="Paragraphindent" class="btn btn-primary" onclick="Paragraphindent()" type="button"> 탭 추가</button>

            <button id="Paragraphoutdent" class="btn btn-primary" onclick="Paragraphoutdent()" type="button"> 탭 제거 </button>

            <button id="ParagraphinsertOrderedList" class="btn btn-primary" onclick="ParagraphinsertOrderedList()" type="button"> 순번 매기기 </button>

            <button id="ParagraphinsertUnorderedList" class="btn btn-primary" onclick="ParagraphinsertUnorderedList()" type="button"> 순번 매기기 해제 / 목록화로 변경 </button>

            <button id="ParagraphjustifyCenter" class="btn btn-primary" onclick="ParagraphjustifyCenter()" type="button"> 중앙정렬 </button>

            <button id="ParagraphlineHeight" class="btn btn-primary" onclick="ParagraphlineHeight()" type="button"> 라인 헤이트 </button>

        </div>

 

    </div>

 

    <!--  Basic API -->

    <script>

 

        $(document).ready(function () {

            console.log($.summernote.options);

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

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

            $.summernote.options.airMode = false;

            // summernote 생성시 사이즈 지정

            $.summernote.options.width = '90%';

            $.summernote.options.heigth = '400';

        });

    </script>

    <script>

var a = $("#summernote");

 

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

var buttons = $.summernote.options.buttons;

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

$.summernote.options.toolbar.push([

  "Paragraph",

  [

    "ParagraphFormatH1"// 단락 H1

    "ParagraphFormatPara"// 단락 P 태그 

    "ParagraphIndent"// 단락 탭 추가

    "ParagraphOutdent"// 단락 탭 제거 

    "ParagraphInsertOrderedList"// 순번 

    "ParagraphInsertUnorderedList"// 순번 제거 

    'ParagraphJustifyCenter'// 가운데 정렬

    'ParagraphLineHeight' // 라인 헤이트

  ],

]);

 

// -----------------------------------------------

// 단락 글자 변경 <h1> ~ <h6> - 툴바 버튼 정의

var ParagraphFormatH1 = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 단락 포맷 H1',

    tooltip: "단락의 글자 변경",

    click: function () {

      context.invoke("editor.formatH1");

    },

  });

  return button.render();

};

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

buttons.ParagraphFormatH1 = ParagraphFormatH1;

 

//  단락 포맷 H1 - 이벤트 버튼 정의

var ParagraphformatH1 = function(){

  a.summernote('formatH1');

};

// -----------------------------------------------

 

// 현재 단락 p 태그로 변경 - 툴바 버튼 정의

var ParagraphFormatPara = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 현재 단락 p 태그로 변경',

    tooltip: "현재 단락 p 태그로 변경",

    click: function () {

      context.invoke("editor.formatPara");

    },

  });

  return button.render();

};

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

buttons.ParagraphFormatPara = ParagraphFormatPara;

 

//  현재 단락 p 태그로 변경 - 이벤트 버튼 정의

var ParagraphformatPara = function(){

  a.summernote('formatPara');

};

// -----------------------------------------------

 

// 탭 추가 - 툴바 버튼 정의

var ParagraphIndent = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 탭 추가',

    tooltip: "탭 추가",

    click: function () {

      context.invoke("editor.indent");

    },

  });

  return button.render();

};

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

buttons.ParagraphIndent = ParagraphIndent;

 

//  탭 추가 - 이벤트 버튼 정의

var Paragraphindent = function(){

  a.summernote('indent');

};

// -----------------------------------------------

 

// 탭 제거

var ParagraphOutdent = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 탭 제거 ',

    tooltip: "탭 제거 ",

    click: function () {

      context.invoke("editor.outdent");

    },

  });

  return button.render();

};

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

buttons.ParagraphOutdent = ParagraphOutdent;

 

//  탭 제거  - 이벤트 버튼 정의

var Paragraphoutdent = function(){

  a.summernote('outdent');

};

// -----------------------------------------------

 

// 순번 매기기 - 툴바 버튼 정의

var ParagraphInsertOrderedList = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 순번 매기기 ',

    tooltip: "순번 매기기 ",

    click: function () {

      context.invoke("editor.insertOrderedList");

    },

  });

  return button.render();

};

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

buttons.ParagraphInsertOrderedList = ParagraphInsertOrderedList;

 

//  순번 매기기  - 이벤트 버튼 정의

var ParagraphinsertOrderedList = function(){

  a.summernote('insertOrderedList');

};

// -----------------------------------------------

 

// 순번 매기기 해제 / 목록화로 변경 - 툴바 버튼 정의

var ParagraphInsertUnorderedList = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 순번 매기기 해제 / 목록화로 변경 ',

    tooltip: "순번 매기기 해제 / 목록화로 변경 ",

    click: function () {

      context.invoke("editor.insertUnorderedList");

    },

  });

  return button.render();

};

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

buttons.ParagraphInsertUnorderedList = ParagraphInsertUnorderedList;

 

//  순번 매기기 해제 / 목록화로 변경  - 이벤트 버튼 정의

var ParagraphinsertUnorderedList = function(){

  a.summernote('insertUnorderedList');

};

// -----------------------------------------------

// 중앙정렬 - 툴바 버튼 정의

var ParagraphJustifyCenter = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 중앙정렬 ',

    tooltip: "중앙정렬 ",

    click: function () {

      context.invoke("editor.justifyCenter");

      // $('#summernote').summernote('justifyLeft');

      // $('#summernote').summernote('justifyRight');

      // $('#summernote').summernote('justifyCenter');

      // $('#summernote').summernote('justifyFull');

    },

  });

  return button.render();

};

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

buttons.ParagraphJustifyCenter = ParagraphJustifyCenter;

 

//  중앙정렬  - 이벤트 버튼 정의

var ParagraphjustifyCenter = function(){

  a.summernote('justifyCenter');

};

// -----------------------------------------------

 

// 라인 헤이트 - 툴바 버튼 정의

var ParagraphLineHeight = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 라인 헤이트 ',

    tooltip: "라인 헤이트 ",

    click: function () {

      context.invoke("editor.lineHeight" , 10);

    },

  });

  return button.render();

};

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

buttons.ParagraphLineHeight = ParagraphLineHeight;

 

//  라인 헤이트  - 이벤트 버튼 정의

var ParagraphlineHeight = function(){

  a.summernote('lineHeight'20);

};

// -----------------------------------------------

 </script>

</body>



</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

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

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>


 

블로그 이미지

미나미나미

댓글을 달아 주세요

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

https://minaminaworld.tistory.com/176

 

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

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

minaminaworld.tistory.com

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

# 1. summernote 기본 사용법

 $(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 codeViewToggle = function () {
            // summer note code view 활성화
            a.summernote('codeview.toggle');
        };

        var enable = function () {
            // summer note 활성화, 비활성화
            a.summernote('enable');
        };

        var disable = function () {
            // summer note 활성화, 비활성화
            a.summernote('disable');
        };

        var insertText = function () {
            // 현재 커서 위치에 'hello world'라는 텍스트 생성 
            a.summernote('editor.insertText', 'hello world');
        };

        var fullscreen = function () {
            // fullscreen 토글 
            a.summernote('fullscreen.toggle');
            // fullscreen 활성화 여부 
            a.summernote('fullscreen.isFullscreen');
        };

        var empty = function () {
            // summer note empty 여부 확인 
            if (!a.summernote('isEmpty')) {
                alert('에디터 안에 글 존재함');
            }
        };
    
        var reset = function () {
            // summernote가 실행되기 전으로 돌아감
            a.summernote('reset');
        };

        var undo = function () {
            // 실행 전
            a.summernote('undo');
        };

        var redo = function () {
            // 실행 후
            a.summernote('redo');
        };

# 2. summernote 버튼

  <div class="container-fluid mt-2">
            <!-- 코드 르뷰 토글 -->
            <button id="codeViewToggle" class="btn btn-primary" onclick="codeViewToggle()" type="button">codeViewToggle</button>
            <!-- 썸머노트 활성화 비활성화 -->
            <button id="enable" class="btn btn-primary" onclick="enable()" type="button">enable</button>
            <button id="disable" class="btn btn-primary" onclick="disable()" type="button">disable</button>
            <!-- 썸머노트 글자기 넣기 -->
            <button id="insertText" class="btn btn-primary" onclick="insertText()" type="button">insertText</button>
            <!-- 썸머노트 풀스크린  -->
            <button id="fullscreen" class="btn btn-primary" onclick="fullscreen()" type="button">fullscreen</button>
            <!-- 썸머노트 비였는지 확인  -->
            <button id="empty" class="btn btn-primary" onclick="empty()" type="button">empty</button>
            <!-- 썸머노트 활성화 전으로 돌리기ㄴ -->
            <button id="reset" class="btn btn-primary" onclick="reset()" type="button">reset</button>
            <!-- 썸머노트 이전 되돌리기 -->
            <button id="undo" class="btn btn-primary" onclick="undo()" type="button">undo</button>
            <button id="redo" class="btn btn-primary" onclick="redo()" type="button">redo</button>
        </div>

# 3. 결과화면

# 전체 테스트 코드

더보기

<!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 -->

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

 

    <!-- CDN 한글화 -->

    <script src=https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js"></script>

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

    <!-- <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>

 

        <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>

 

        <hr class="my-2">

 

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

            <!-- 코드 르뷰 토글 -->

            <button id="codeViewToggle" class="btn btn-primary" onclick="codeViewToggle()" type="button">codeViewToggle</button>

            <!-- 썸머노트 활성화 비활성화 -->

            <button id="enable" class="btn btn-primary" onclick="enable()" type="button">enable</button>

            <button id="disable" class="btn btn-primary" onclick="disable()" type="button">disable</button>

            <!-- 썸머노트 글자기 넣기 -->

            <button id="insertText" class="btn btn-primary" onclick="insertText()" type="button">insertText</button>

            <!-- 썸머노트 풀스크린  -->

            <button id="fullscreen" class="btn btn-primary" onclick="fullscreen()" type="button">fullscreen</button>

            <!-- 썸머노트 비였는지 확인  -->

            <button id="empty" class="btn btn-primary" onclick="empty()" type="button">empty</button>

            <!-- 썸머노트 활성화 전으로 돌리기ㄴ -->

            <button id="reset" class="btn btn-primary" onclick="reset()" type="button">reset</button>

            <!-- 썸머노트 이전 되돌리기 -->

            <button id="undo" class="btn btn-primary" onclick="undo()" type="button">undo</button>

            <button id="redo" class="btn btn-primary" onclick="redo()" type="button">redo</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 codeViewToggle = function () {

            // summer note code view 활성화

            a.summernote('codeview.toggle');

        };

 

        var enable = function () {

            // summer note 활성화, 비활성화

            a.summernote('enable');

        };

 

        var disable = function () {

            // summer note 활성화, 비활성화

            a.summernote('disable');

        };

 

        var insertText = function () {

            // 현재 커서 위치에 'hello world'라는 텍스트 생성 

            a.summernote('editor.insertText''hello world');

        };

 

        var fullscreen = function () {

            // fullscreen 토글 

            a.summernote('fullscreen.toggle');

            // fullscreen 활성화 여부 

            a.summernote('fullscreen.isFullscreen');

        };

 

        var empty = function () {

            // summer note empty 여부 확인 

            if (!a.summernote('isEmpty')) {

                alert('에디터 안에 글 존재함');

            }

        };

    

        var reset = function () {

            // summernote가 실행되기 전으로 돌아감

            a.summernote('reset');

        };

 

        var undo = function () {

            // 실행 전

            a.summernote('undo');

        };

 

        var redo = function () {

            // 실행 후

            a.summernote('redo');

        };

 

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

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

 

 

 

 


2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 


 

 

3. SummerNote 만들기

 

3-1. SummerNote 필요한 Jquery 요소 불러오기

  - CDN 방식과 로컬 파일을 이용한 두가지 방식이 있습니다.

<!-- 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 -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    <!-- CDN 한글화 -->
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js"></script>
    <!-- 로컬 파일 한글화 -->
    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> -->
    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script> -->

3-2. SummerNote 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>

        <!-- 수정 시작 버튼 -->
        <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>

 

3-3. SummerNote document 시작시 옵션값을 통한 한글화 설정 

 <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');
        };
    </script>

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 -->

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

 

    <!-- CDN 한글화 -->

    <script src=https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js"></script>

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

    <!-- <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>

 

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

        <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>

 

    <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');

        };

    </script>

</body>

 

</html>

 

 

블로그 이미지

미나미나미

댓글을 달아 주세요