'summernote 힌트'에 해당되는 글 1건

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

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>

 

 

블로그 이미지

미나미나미

,