미나미 블로그

[jquery] 웹에디터 썸머노트(SummerNote) 단락(Paragraph) 사용기 & 커스텀 버튼 버전

[javascript]/[jquery] 2020. 8. 30. 14:51

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

https://minaminaworld.tistory.com/176

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

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

minaminaworld.tistory.com

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

# 커스텀 버전 방법

// 버튼을 추가하기위한 방법
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>

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

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

</button>

</div>

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

</div>

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

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>

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

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

[jquery] 웹에디터 썸머노트(SummerNote) 힌트(Hint) 사용하기 (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) 커스텀 버튼

[javascript]/[jquery] 2020. 8. 29. 22:54

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

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>

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

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>

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

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

[jquery] 웹에디터 썸머노트(SummerNote) 힌트(Hint) 사용하기 (0)	2020.08.30
[jquery] 웹에디터 썸머노트(SummerNote) 단락(Paragraph) 사용기 & 커스텀 버튼 버전 (0)	2020.08.30
[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) 한글화 사용법

# 예시 화면 (예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.) 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>

<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] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법

[javascript]/[jquery] 2020. 8. 26. 20:12

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

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>

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

a.summernote({ focus: true });

};

// 수정 종료

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 contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기 및 사용법 (0)	2020.08.25
[Jquery] JsonViewer 만들기 JsonView.js 사용법 (JsonViewer) (0)	2019.10.21
[jquery] 자바스크립트 모든 input값 가져오기 (input selector) (2)	2018.04.24

미나미나미

,

jquery contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기 및 사용법

[javascript]/[jquery] 2020. 8. 25. 21:06

# contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기

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

# 1. 준비물 - 필요한 jquery 파일들을 불러옵니다.

 <!-- jquery 불러오기 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- 우클릭시 contextmenu 만들기 -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>

# 2. HTML BODY에 contextMenu 만들 div 만들기

<!-- 활성화 비활성화 조절 버튼 -->
    <button id="actvie">활성화</button>
    <button id="disable">비활성화</button>
    <!-- id 접근 요소 -->
    <div id="id_context_menu"
        style="position: relative; top:20px; left:100px; width:200px; height:200px; background-color: black;">
        asdsadasdasd
    </div>

    <!-- class 접근 요소 -->
    <div class="class_context_menu"
        style="position: relative; margin-top:10px; top:20px; left:100px; width:200px; height:200px; background-color: red;">
        asdsadasdasd
    </div>

# 3. contextMenu 생성 및 옵션값 조절

- contextMenu dom 선택

 // 선택자 어떤 dom의 요소를 선택할 것인가?
 selector: '#id_context_menu',
 // 클래스 접근 방법
 selector: '.class_context_menu',

- contextMenu 어느 위치에 생성할 것인가?

 // 어느 위치에 우클릭 menu를 생성할 것인가? , 없을 경우 클릭한 위치에서 생성
 appendTo: '.class_context_menu',

- contextMenu 항상 클릭시 callback을 받을 것인가?

callback: function (key, options) {
	// 메뉴 아이템을 클릭한 경우, callback 이벤트 동작
	console.log(arguments);
	console.log("Clicked on " + key + " on element id " + options.$trigger.attr("id") + " on element name " + options.$trigger.attr("name"));
	console.log("options", options);
	// return false; // 리턴값이 false인 경우, 메뉴가 사라지지 않음 
},

- contextMenu 위치에 마우스가 있는 경우, 특정 key를 누른 경우, context menu가 생성됨,

// 마우스가 생성하는 dom 위치에 있을 때, accesskey 누른 경우 메뉴 화면 생성
accesskey: 'a',

- contextMenu 생성될 때, 트리거 요소

  // 메뉴 생성 트리거 요소 [right , left , hover, touchstart, none]
  trigger: 'hover',

- contextMenu 메뉴가 생성될때 요소

 items: {
                    "edit": { 
                            // 아이템 표현되는 이름 
                            name: "Edit", 
                            // fontawsome을 통한 아이콘 표현 
                            icon: "edit", 
                            // 버튼 클릭시 콜백 받는 부분
                            callback: (itemKey, opt, e) => {
                            console.log(arguments);
                            console.log("edit 아이템 클릭");
                        } 
                    },
                    "cut": { name: "Cut", icon: "cut" },
                    copy: { name: "Copy", icon: "copy" },
                    "paste": { name: "Paste", icon: "paste" },
                    "delete": { name: "Delete", icon: "delete" },
                    "sep1": "---------", // 라인 만들기
                    // 아이템 안에 아이템을 만드는 경우
                    "fold1": {
                        "name": "Sub group",
                        "items": {
                            "fold1-key1": { "name": "Foo bar" },
                            "fold2": {
                                "name": "Sub group 2",
                                "items": {
                                    "fold2-key1": { "name": "alpha" },
                                    "fold2-key2": { "name": "bravo" },
                                    "fold2-key3": { "name": "charlie" }
                                }
                            },
                            "fold1-key3": { "name": "delta" }
                        }
                    },
                    "sep2": "---------", // 라인 만들기
                    "quit": {
                        name: "Quit", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }
                    }
                },

- contextMenu 메뉴가 생성될때 요소

- 메뉴가 생성, 활성화, 사라질 때, 이벤트 발생

events: {
    show: function (options) {
        // S.fn.init [div#id_context_menu] 메뉴화면 
        console.log(this);

        // 메뉴 생성 시 클래스 추가 
        this.addClass('currently-showing-menu');
        var open = confirm('메뉴 화면을 생성하시겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return open === true ? true : false;
    },
    hide: function (options) {
        // 메뉴 화면이 사라질떄
        var hide = confirm('메뉴 화면을 숨기겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return hide === true ? true : false;
    },
    activated: function (options) {
        // 메뉴화면이 활성화 되었을 때 
        var activated = confirm('메뉴 활성화 하겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return activated === true ? true : false;
    }
}

# 4. contextMenu 활성화 비활성화 버튼 요소

$('#actvie').on('click', function (e) {
    console.log(this);
    var $trigger = $('#id_context_menu');
    $trigger.contextMenu(true);
});

$('#disable').on('click', function (e) {
    console.log(this);
    var $trigger = $('#id_context_menu');
    $trigger.contextMenu(false);
});

# 5. 전체 테스트 코드

<!DOCTYPE html>

<head>

<title>Context Menu 만들기</title>

integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">

</head>

<body>

<div id="id_context_menu"

style="position: relative; top:20px; left:100px; width:200px; height:200px; background-color: black;">

asdsadasdasd

</div>

<div class="class_context_menu"

style="position: relative; margin-top:10px; top:20px; left:100px; width:200px; height:200px; background-color: red;">

asdsadasdasd

</div>

$(function () {

$.contextMenu({

// 선택자 어떤 dom의 요소를 선택할 것인가?

selector: '#id_context_menu',

// 클래스 접근 방법

// selector: '.class_context_menu',

// 어느 위치에 우클릭 menu를 생성할 것인가? , 없을 경우 클릭한 위치에서 생성

appendTo: '.class_context_menu',

// 마우스가 생성하는 dom 위치에 있을 때, accesskey 누른 경우 메뉴 화면 생성

//accesskey: 'a',

callback: function (key, options) {

// 메뉴 아이템을 클릭한 경우, callback 이벤트 동작

console.log(arguments);

console.log("Clicked on " + key + " on element id " + options.$trigger.attr("id") + " on element name " + options.$trigger.attr("name"));

console.log("options", options);

// return false; // 리턴값이 false인 경우, 메뉴가 사라지지 않음

},

// 메뉴 생성 트리거 요소 [right , left , hover, touchstart, none]

trigger: 'hover',

items: {

"edit": {

// 아이템 표현되는 이름

name: "Edit",

// fontawsome을 통한 아이콘 표현

icon: "edit",

// 버튼 클릭시 콜백 받는 부분

callback: (itemKey, opt, e) => {

console.log(arguments);

console.log("edit 아이템 클릭");

}

},

"cut": { name: "Cut", icon: "cut" },

copy: { name: "Copy", icon: "copy" },

"paste": { name: "Paste", icon: "paste" },

"delete": { name: "Delete", icon: "delete" },

"sep1": "---------",

// 아이템 안에 아이템을 만드는 경우

"fold1": {

"name": "Sub group",

"items": {

"fold1-key1": { "name": "Foo bar" },

"fold2": {

"name": "Sub group 2",

"items": {

"fold2-key1": { "name": "alpha" },

"fold2-key2": { "name": "bravo" },

"fold2-key3": { "name": "charlie" }

}

},

"fold1-key3": { "name": "delta" }

}

},

"sep2": "---------",

"quit": {

name: "Quit", icon: function () {

return 'context-menu-icon context-menu-icon-quit';

}

},

events: {

show: function (options) {

// S.fn.init [div#id_context_menu] 메뉴화면

console.log(this);

// 메뉴 생성 시 클래스 추가

this.addClass('currently-showing-menu');

var open = confirm('메뉴 화면을 생성하시겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

return open === true ? true : false;

},

hide: function (options) {

// 메뉴 화면이 사라질떄

var hide = confirm('메뉴 화면을 숨기겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

return hide === true ? true : false;

},

activated: function (options) {

// 메뉴화면이 활성화 되었을 때

var activated = confirm('메뉴 활성화 하겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

return activated === true ? true : false;

}

});

$('#actvie').on('click', function (e) {

console.log(this);

var $trigger = $('#id_context_menu');

$trigger.contextMenu(true);

});

$('#disable').on('click', function (e) {

console.log(this);

var $trigger = $('#id_context_menu');

$trigger.contextMenu(false);

});

</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] JsonViewer 만들기 JsonView.js 사용법 (JsonViewer) (0)	2019.10.21
[jquery] 자바스크립트 모든 input값 가져오기 (input selector) (2)	2018.04.24

미나미나미

,

[JavaScript] Array.From 사용법 / Array 복사 방법

[javascript] 2020. 8. 24. 15:18

# Array.From 사용법 / Array 복사 방법

- 사용법 : Array.from(arrayLike[, mapFn[, thisArg]])

- 예시 : Array.from( 복사할 array , 복사하면서 수행할 function)

- 주의 사항 : Array 복사 얇은(Shallow) 복사로 됨.

# 예시

// Array 얕은 복사 방법
var a = [1, 2, 3];
console.log("a" , a)
// Array A를 복사
var b = Array.from(a);
console.log("b" , b)

// Array A를 복사하면 +1 증가
var c = Array.from(a, function (x) {
console.log("c" , c)
    return x + 1;
});

// Array A를 복사하면 제곱하기
var d = Array.from(a, x => x * x);
console.log("d" , d)

// 부록 : es6 Array 복사
var e = [...a];
console.log("e" , e)

// Array 안에 Object 형식도 복사 가능
var f = Array.from([{ a : 1 , b: 2}]);
console.log("f" , f)

// 부록 : 깊은 복사 방법 
var deep_copy = JSON.parse(JSON.stringify(a));
console.log("deep_copy" , deep_copy)

# 결과화면

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

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

[JavaScript] ES6 Getter Setter 사용법 (0)	2020.08.23
[JavaScript] ES6 클래스(Class) extends , super 사용 (0)	2020.08.23
[JavaScript] ES6 Class 생성 및 인스턴스 생성 (0)	2020.08.19
[javascript]Call 메소드 함수 예시 (0)	2020.08.17
[javascript] arguments 인자값의 변화 (0)	2020.08.02

미나미나미

,

[JavaScript] ES6 Getter Setter 사용법

[javascript] 2020. 8. 23. 20:53

# [JavaScript] ES6 Getter Setter 사용법

- JavsScript ES6의 Getter와 Setter를 사용한 데이터 초기화 및 출력


var student = {
  fullInfo : "",
  name : "",
  grade : "",
  number : "",
  // student 정보 출력
  get getStudent(){
    return "name = >" + this.name + "grade = >" + this.grade + "number = >" + this.number;
  },
  // Property 'setPerson' implicitly has type 'any', because its set accessor lacks a parameter type annotation.
  // setter에 매개변수가 하나만 들어갈 수 있다.
  set setStudent(data){
    this.fullInfo = data;
    data = data.split(" ");
    this.name = data[0];
    this.grade = data[1];
    this.number = data[2];
  }
}

// setter를 사용한 초기화
student.setStudent = "김구 3학년 11번";
// ES6 객체 복사
var stu1 = {...student};
console.log(stu1.getStudent);

// setter를 사용한 초기화
student.setStudent = "포그바 1학년 1번";
// ES6 객체 복사
var stu2 = {...student};
console.log(stu2.getStudent);

// 객체 복사시 setter는 사용할 수 없게됨.
var stu3 = {...student};
console.log(stu3);

# 결과화면

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

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

[JavaScript] Array.From 사용법 / Array 복사 방법 (0)	2020.08.24
[JavaScript] ES6 클래스(Class) extends , super 사용 (0)	2020.08.23
[JavaScript] ES6 Class 생성 및 인스턴스 생성 (0)	2020.08.19
[javascript]Call 메소드 함수 예시 (0)	2020.08.17
[javascript] arguments 인자값의 변화 (0)	2020.08.02

미나미나미

,

[JavaScript] ES6 클래스(Class) extends , super 사용

[javascript] 2020. 8. 23. 19:53

# [JavaScript] ES6 클래스(Class) extends , super 사용

1. Parent가 될 클래스

// extends할 클래스 
class Car {
  constructor(name = "없음", passengers = "0", price = "0") {
    this.name = name;
    this.passengers = passengers;
    this.price = price;
  }
  carPrint() {
    return (
      "name => " +
      this.name +
      "/ passengers => " +
      this.passengers +
      "/ price => " +
      this.price
    );
  }
  // Car 클래스의 static 메소드
  static description() {
    console.log("static carPrint 스태틱 메소드 출력");
  }
}

2. Child가 될 클래스

// Car를 상속 받음 
// 
class Sonata extends Car{
// "var Sonata = class extends Car"와 "class Sonata extends Car" 동일함
    constructor(name, passengers, price, seatFacility){
        // Car 클래스에 변수값 전달
        super(name, passengers, price);
        // 현재 클래스에 할당 
        this.seatFacility = seatFacility; 
    }

    // 내용 정보찍기 
    sonataPrint(){
        // super 키워드를 통한 부모의 메소드 접근 
        return super.carPrint() + "/ seatFacility => " + this.seatFacility; 
    }

    // Sonata 클래스의 static 메소드
    static description(){
        console.log("이 클래스는 소나타 클래스입니다");
    }
}

3. 실행하기

var sonata = new Sonata("소나타" , "4" , "1000" , "열시트");
console.log("sonata.carPrint =>" , sonata.carPrint());
console.log("sonata.sonataPrint =>" , sonata.sonataPrint());

// VM67:47 sonata.carPrint => name => 소나타/ passengers => 4/ price => 1000
// VM67:48 sonata.sonataPrint => name => 소나타/ passengers => 4/ price => 1000/ seatFacility => 열시트

4,결과화면

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

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

[JavaScript] Array.From 사용법 / Array 복사 방법 (0)	2020.08.24
[JavaScript] ES6 Getter Setter 사용법 (0)	2020.08.23
[JavaScript] ES6 Class 생성 및 인스턴스 생성 (0)	2020.08.19
[javascript]Call 메소드 함수 예시 (0)	2020.08.17
[javascript] arguments 인자값의 변화 (0)	2020.08.02

미나미나미

,

« 2024/05 »
일	월	화	수	목	금	토
			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

'전체 글'에 해당되는 글 214건

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

# 커스텀 버전 방법

# 단락 H1 포맷 적용

# 단락 P 태그 적용

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

# 결과화면

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

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

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

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

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

4. 전체테스트 코드

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

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

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

# 1. summernote 기본 사용법

# 2. summernote 버튼

# 3. 결과화면

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

3. SummerNote 만들기

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

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

3-2. SummerNote Body 요소

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

4. 결과화면 및 테스트 코드

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

# contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기

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

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

# [JavaScript] ES6 Getter Setter 사용법

# 결과화면

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

# [JavaScript] ES6 클래스(Class) extends , super 사용

1. Parent가 될 클래스

2. Child가 될 클래스

3. 실행하기

4,결과화면

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

미나미나미

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

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