'jquery 썸머노트'에 해당되는 글 2건

2020.08.30 [jquery] 웹에디터 썸머노트(SummerNote) 힌트(Hint) 사용하기
2020.08.26 [jquery] 웹에디터 썸머노트(SummerNote) 기본 사용법 정리 1

[jquery] 웹에디터 썸머노트(SummerNote) 힌트(Hint) 사용하기

[javascript]/[jquery] 2020. 8. 30. 17:37

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

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>

<head>

<title>Summer Note </title>

</head>

<body>

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

<p>Hello Summernote</p>

</div>

</div>

$(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 (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;

});

};

// 수정 종료

var save = function () {

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

a.summernote('destroy');

};

</script>

</body>

</html>

저작자표시 비영리 변경금지

'[javascript] > [jquery]' 카테고리의 다른 글

[jquery] 웹에디터 썸머노트(SummerNote) 단락(Paragraph) 사용기 & 커스텀 버튼 버전 (0)	2020.08.30
[jquery] 웹에디터 썸머노트(SummerNote) 커스텀 버튼 (0)	2020.08.29
[jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법 (0)	2020.08.26
jquery contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기 및 사용법 (0)	2020.08.25
[Jquery] JsonViewer 만들기 JsonView.js 사용법 (JsonViewer) (0)	2019.10.21

미나미나미

[jquery] 웹에디터 썸머노트(SummerNote) 기본 사용법 정리

카테고리 없음 2020. 8. 26. 21:05

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

https://minaminaworld.tistory.com/176

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

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>

<head>

<title>Summer Note </title>

</head>

<body>

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

<p>Hello Summernote</p>

</div>

</div>

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

</div>

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

저작자표시 비영리 변경금지

미나미나미

'jquery 썸머노트'에 해당되는 글 2건

[jquery] 웹에디터 썸머노트(SummerNote) 힌트(Hint) 사용하기

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

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

2. summernote Hint 값 지정

3. 결과화면

4. 전체 테스트 코드

'[javascript] > [jquery]' 카테고리의 다른 글

[jquery] 웹에디터 썸머노트(SummerNote) 기본 사용법 정리

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

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

# 1. summernote 기본 사용법

# 2. summernote 버튼

# 3. 결과화면

공지사항

카테고리

태그목록

글 보관함

달력

링크

미나미나미

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31