'summernote 커스텀' 태그의 글 목록

[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) 단락(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

미나미나미

,

'summernote 커스텀'에 해당되는 글 3건

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

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

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

2. summernote Hint 값 지정

3. 결과화면

4. 전체 테스트 코드

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

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

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

# 커스텀 버전 방법

# 단락 H1 포맷 적용

# 단락 P 태그 적용

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

# 결과화면

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

[jquery] 웹에디터 썸머노트(SummerNote) 커스텀 버튼

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

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

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

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

4. 전체테스트 코드

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

미나미나미

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