# 라인 차트에서 데이터셋 , 데이터 제거


# 결과화면


# 데이터 제거 버튼 

// 첫번째 값 제거
document.getElementById('firstRemoveData').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		Chart.instances[elem].config.data.labels.shift(); 
		Chart.instances[elem].config.data.datasets.forEach(function (dataset) {
			// 첫번쨰 배열값 제거
			dataset.data.shift();
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

// 마지막 값 제거 
document.getElementById('LastRemoveData').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		Chart.instances[elem].config.data.labels.pop(); 
		Chart.instances[elem].config.data.datasets.forEach(function (dataset) {
			// 마지막 배열값 제거
			dataset.data.pop();
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

# 데이터셋 제거 버튼

document.getElementById('FirstRemoveDataset').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		// 첫번째 그래프 제거
		Chart.instances[elem].config.data.datasets.pop();
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

document.getElementById('LastRemoveDataset').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		// 마지막 그래프 제거
		Chart.instances[elem].config.data.datasets.shift();
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

 

블로그 이미지

미나미나미

댓글을 달아 주세요

# 라인 차트 생성 후,  여러 차트에 데이터셋 , 데이터 추가 방법


 

 

#결과화면


# 데이터셋 추가 버튼

var colorNames = Object.keys(window.chartColors);
// chartColor는 아래 차트 옵션에 정의되어 있음
// 데이터셋 추가 버튼 
document.getElementById('addDataset').addEventListener('click', function () {
	var colorNames = Object.keys(window.chartColors);
	// 새로운 데이터셋 세팅 
	var newData = {
		// 라벨 
		label: 'Dataset',
		// 꼭지점
		backgroundColor: '',
		// 라인색 
		borderColor: '',
		data: [],
	};

	var fill = [
		'end',
		'start', 
		'origin', 
		false 
	];

	for (let index = 0; index < 4; index++) {
		// 데이터 세팅 
		var settingData = JSON.parse(JSON.stringify(newData));
		// 배경
		settingData.backgroundColor = chartColors[colorNames[index + 1]];
		// 선색
		settingData.borderColor = chartColors[colorNames[index + 2]];
		// 라벨
		settingData.label = 'new Data line' + (index + 1) + '/ Fill=' + fill[index];
		// 채우기 옵션
		settingData.fill = fill[index];
		// 데이터 채우기 
		for(var i = 0; i < Chart.instances[0].config.data.datasets[0].data.length; i++){
			settingData.data.push(randomScalingFactor());
		}
		// 데이터 반영 
		Chart.instances[index].data.datasets.push(settingData);
		// 라인 차트 업데이트 
		Chart.instances[index].update();
	}
});

# 데이터 추가 버튼

// 데이터 추가 버튼 
document.getElementById('addData').addEventListener('click', function() {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 차트 옵션의 달력 값 지정 
		var month = MONTHS[Chart.instances[elem].config.data.labels.length % MONTHS.length];
		// 차트 키 값  
		// console.log(elem);
		// 달력값 
		// console.log(month);
		// 차트 객체 
		// console.log(Chart.instances[elem]);
		// 차트 객체의 달력값 (라벨 지정)
		Chart.instances[elem].config.data.labels.push(month);
		// 데이터 값 세팅 
		Chart.instances[elem].config.data.datasets.forEach(function(dataset) {
			dataset.data.push(randomScalingFactor());
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

# 차트 생성 옵션 

// 차트에 표현할 x 축의 값
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// 차트에 표현할 컬러 
var chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};
var config = {
	type: 'line',
	data: {
		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
		datasets: []
	},
	options: {
		// 컨테이너가 수행 할 때 차트 캔버스의 크기를 조정(dafalut : true)
		responsive: true,
		// 크기 조정 이벤트 후 새 크기로 애니메이션하는 데 걸리는 시간(밀리 초) (defalut : 0)
		responsiveAnimationDuration: 1000,
		// (width / height) 크기를 조정할 떄 원래 캔버스 종횡비를 유지 (defalut : true)
		maintainAspectRatio: true,
		// 캔버스 종횡비( width / height, 정사각형 캔버스를 나타내는 값) 높이가 속성으로 또는 스타일 통해 명시적으로 정의된 경우이 옵션은 무시
		aspectRatio: 2,
		// 크기 조정이 발생할 때 호출
		onResize: function () {
			console.log('onResize');
		},
		title: {
			display: true,
			// 차트 제목 
			text: 'Chart.js Line Chart'
		},
		tooltips: {
			mode: 'index',
			intersect: false,
		},
		hover: {
			mode: 'nearest',
			intersect: true
		},
		scales: {
			x: {
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Month'
				}
			},
			y: {
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Value'
				}
			}
		}
	}
};

// -100 ~ 100 사이 랜덤값 생성 
var randomScalingFactor = function () {
	return Math.round(Samples.utils.rand(-100, 100));
};
// 새로운 데이터 만들기 
var datasetSample = {
	label: 'label',
	backgroundColor: window.chartColors.red,
	borderColor: window.chartColors.red,
	data: [
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor()
	],
};

 

블로그 이미지

미나미나미

댓글을 달아 주세요

   # chart.js Fill 옵션 정리 

    - Fill 옵션은 총 네 가지가 존재합니다 

    - false  : 아무것도 채워지지 않음

    - origin : 기준점 사이로 채워짐 

    - start : x축 선부터 채워짐

    - end : x축의 최대값의 기준으로 채워짐


   # chart 생성 옵션

var config = {
			type: 'line',
			data: {
				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
				datasets: []
			},
			options: {
				// 컨테이너가 수행 할 때 차트 캔버스의 크기를 조정(dafalut : true)
				responsive: true,
				// 크기 조정 이벤트 후 새 크기로 애니메이션하는 데 걸리는 시간(밀리 초) (defalut : 0)
				responsiveAnimationDuration: 1000,
				// (width / height) 크기를 조정할 떄 원래 캔버스 종횡비를 유지 (defalut : true)
				maintainAspectRatio: true,
				// 캔버스 종횡비( width / height, 정사각형 캔버스를 나타내는 값) 높이가 속성으로 또는 스타일 통해 명시적으로 정의된 경우이 옵션은 무시
				aspectRatio: 2,
				// 크기 조정이 발생할 때 호출
				onResize: function () {
					console.log('onResize');
				},
				title: {
					display: true,
					// 차트 제목 
					text: 'Chart.js Line Chart'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					x: {
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Month'
						}
					},
					y: {
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Value'
						}
					}
				}
			}
		};

   # chart 데이터 셋 생성

	// -100 ~ 100 사이 랜덤값 생성 
		var randomScalingFactor = function () {
			return Math.round(Samples.utils.rand(-100, 100));
		};
		// 새로운 데이터 만들기 
		var datasetSample = {
			label: 'label',
			backgroundColor: window.chartColors.red,
			borderColor: window.chartColors.red,
			data: [
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor()
			],
		};

# chart 생성하기

// line1 ========================================================
// 생성할 canvas 요소 
var line1 = document.getElementById('line1').getContext('2d');
// config 파일 복사
var line1Config = JSON.parse(JSON.stringify(config));

// 데이터셋 생성하기 
var line1DatasetSample = datasetSample;
/// 라벨 
line1DatasetSample.label = 'line1 Dataset Sample';
// 채우기 옵션 
line1DatasetSample.fill = false;
// 채웠을 때 색깔
line1DatasetSample.backgroundColor = window.chartColors.red;
// 선 색깔 
line1DatasetSample.borderColor = window.chartColors.yellow;
// 데이터 채우기 
line1Config.data.datasets.push(line1DatasetSample);
// 타이틀값 
line1Config.options.title.text = 'line1/Fill Option = false';
// 차트 생성하기
window.line1 = new Chart(line1, line1Config);
//  ======================================================== line1

# 결과화면


 

블로그 이미지

미나미나미

댓글을 달아 주세요

# [charts.js]  intersection 이해하기 

   - charts.js의 제공하는 샘플 코드가 잘되어있어서 주석을 넣었습니다.

   - 아래의 jsffidle 화면을 통해서 비교해서 모드와 intersection을 선택하여 사용하시면 좋을것 같습니다.


 

 

# intersection 사용법 

options: {
	responsive: true,
	title: {
		display: true,
		text: 'Mode: ' + mode + ', intersect = ' + intersect
	},
	tooltips: {
        // 툴팁을 표현하는 방법
        // index, dataset, point, nearest(defalut), x, y
		mode: mode,
        // 툴팁을 표현할 때, 근처일때 표현할 것인가 아닌가
        // true(defalut), false
		intersect: intersect,
	},
	hover: {
		mode: mode,
		intersect: intersect
	},
}

 # intersection 사용한 화면

    - mode와 interesection의 사용법에 따라서 툴팁의 표현이 다릅니다.


 # 전체 테스트 코드

( # charts.js에서 utils.js는 cdn으로 제공하지 않아서 같이 들어가 있습니다. 이점 참고하세요.)

더보기

<!doctype html>

<html>

 

<head>

    <title>Tooltip Interaction Modes</title>

    <!-- <script src="../../dist/chart.min.js"></script> -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>

    <!-- <script src="../../utils.js"></script> -->

 

<style>

        canvas {

            -moz-user-selectnone;

            -webkit-user-selectnone;

            -ms-user-selectnone;

        }

 

        .chart-container {

            width400px;

            margin-left10px;

            margin-right10px;

            margin-bottom10px;

            border : 1px solid black;

        }

 

        .container {

            displayflex;

            flex-directionrow;

            flex-wrapwrap;

            justify-contentcenter;

        }

    </style>

</head>

 

<body>

    <div class="container"> </div>

    <script>

        var charts = [];

 

        // 차트 생성하기

        function createConfig(modeintersect) {

            return {

                // 차트 타입

                type: 'line',

                // 데이터셋 

                data: {

                    labels: ['January''February''March''April''May''June''July'],

                    datasets: [{

                        label: 'My First dataset',

                        borderColor: window.chartColors.red,

                        backgroundColor: window.chartColors.red,

                        data: [10304628500],

                        fill: false,

                    }, {

                        label: 'My Second dataset',

                        borderColor: window.chartColors.blue,

                        backgroundColor: window.chartColors.blue,

                        data: [7494613253022],

                        fill: false,

                    }]

                },

                // 옵션

                options: {

                    responsive: true,

                    title: {

                        display: true,

                        text: 'Mode: ' + mode + ', intersect = ' + intersect

                    },

                    tooltips: {

                        mode: mode,

                        intersect: intersect,

                    },

                    hover: {

                        mode: mode,

                        intersect: intersect

                    },

                }

            };

        }

 

        window.onload = function () {

            var container = document.querySelector('.container');

            // mode : defalut 'nearest' (툴팁에 표시되는 요소를 설정)

            // intersect : defalut true || false (마우스 위치가 차트의 항목과 교차할 때 만 호보)

            // axis : 

            // animationDuration : 호버 스타일 변경을 애니메이션하는 데 걸리는 시간 (밀리 초)

            [{

                mode: 'index',

                intersect: true,

                animationDuration: 100

            }, {

                mode: 'index',

                intersect: false,

                animationDuration: 300

            }, {

                mode: 'dataset',

                intersect: true,

                animationDuration: 100

            }, {

                mode: 'dataset',

                intersect: false,

                animationDuration: 300

            }, {

                mode: 'point',

                intersect: true,

                animationDuration: 100

            }, {

                mode: 'point',

                intersect: false,

                animationDuration: 300

            }, {

                mode: 'nearest',

                intersect: true,

                animationDuration: 100

            }, {

                mode: 'nearest',

                intersect: false,

                animationDuration: 300

            }, {

                mode: 'x',

                intersect: true,

                animationDuration: 100

            }, {

                mode: 'x',

                intersect: false,

                animationDuration: 300

            }, {

                mode: 'y',

                intersect: true,

                animationDuration: 100

            }, {

                mode: 'y',

                intersect: false,

                animationDuration: 300

            }].forEach(function (details) {

                console.log('details'details);

                // div 생성. <div class='chart-container'> </div> 

                var div = document.createElement('div');

                div.classList.add('chart-container');

 

                // canvas 생성.

                var canvas = document.createElement('canvas');

                div.appendChild(canvas);

                container.appendChild(div);

 

                // 2d 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D 객체를 생성하게 합니다.

                var ctx = canvas.getContext('2d');

                var config = createConfig(details.modedetails.intersect);

                charts.push(new Chart(ctxconfig));

            });

        };

    </script>

 

    <script>

        // charts.js에서 제공하는 utils.js 

        'use strict';

 

window.chartColors = {

    red: 'rgb(255, 99, 132)',

    orange: 'rgb(255, 159, 64)',

    yellow: 'rgb(255, 205, 86)',

    green: 'rgb(75, 192, 192)',

    blue: 'rgb(54, 162, 235)',

    purple: 'rgb(153, 102, 255)',

    grey: 'rgb(201, 203, 207)'

};

 

(function(global) {

    var MONTHS = [

        'January',

        'February',

        'March',

        'April',

        'May',

        'June',

        'July',

        'August',

        'September',

        'October',

        'November',

        'December'

    ];

 

    var COLORS = [

        '#4dc9f6',

        '#f67019',

        '#f53794',

        '#537bc4',

        '#acc236',

        '#166a8f',

        '#00a950',

        '#58595b',

        '#8549ba'

    ];

 

    var Samples = global.Samples || (global.Samples = {});

    var Color = Chart.helpers.color;

 

    function applyDefaultNumbers(config) {

        var cfg = config || {};

        cfg.min = cfg.min || 0;

        cfg.max = cfg.max || 1;

        cfg.from = cfg.from || [];

        cfg.count = cfg.count || 8;

        cfg.decimals = cfg.decimals || 8;

        cfg.continuity = cfg.continuity || 1;

 

        return cfg;

    }

 

    Samples.utils = {

        // Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/

        srand: function(seed) {

            this._seed = seed;

        },

 

        rand: function(minmax) {

            var seed = this._seed;

            min = min === undefined ? 0 : min;

            max = max === undefined ? 1 : max;

            this._seed = (seed * 9301 + 49297) % 233280;

            return min + (this._seed / 233280) * (max - min);

        },

 

        numbers: function(config) {

            var cfg = applyDefaultNumbers(config);

            var dfactor = Math.pow(10cfg.decimals) || 0;

            var data = [];

            var ivalue;

 

            for (i = 0i < cfg.count; ++i) {

                value = (cfg.from[i] || 0) + this.rand(cfg.mincfg.max);

                if (this.rand() <= cfg.continuity) {

                    data.push(Math.round(dfactor * value) / dfactor);

                } else {

                    data.push(null);

                }

            }

 

            return data;

        },

 

        labels: function(config) {

            var cfg = config || {};

            var min = cfg.min || 0;

            var max = cfg.max || 100;

            var count = cfg.count || 8;

            var step = (max - min) / count;

            var decimals = cfg.decimals || 8;

            var dfactor = Math.pow(10decimals) || 0;

            var prefix = cfg.prefix || '';

            var values = [];

            var i;

 

            for (i = mini < maxi += step) {

                values.push(prefix + Math.round(dfactor * i) / dfactor);

            }

 

            return values;

        },

 

        months: function(config) {

            var cfg = config || {};

            var count = cfg.count || 12;

            var section = cfg.section;

            var values = [];

            var ivalue;

 

            for (i = 0i < count; ++i) {

                value = MONTHS[Math.ceil(i) % 12];

                values.push(value.substring(0section));

            }

 

            return values;

        },

 

        color: function(index) {

            return COLORS[index % COLORS.length];

        },

 

        transparentize: function(coloropacity) {

            var alpha = opacity === undefined ? 0.5 : 1 - opacity;

            return Color(color).alpha(alpha).rgbString();

        }

    };

 

    // DEPRECATED

    window.randomScalingFactor = function() {

        return Math.round(Samples.utils.rand(-100100));

    };

 

    // INITIALIZATION

 

    Samples.utils.srand(Date.now());

 

    // Google Analytics

    /* eslint-disable */

    if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {

        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create''UA-28909194-3''auto');

        ga('send''pageview');

    }

    /* eslint-enable */

 

}(this));

 

    </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 검색될 키워드 요소 지정

// 웹에디터에서 키워드 검색될 요소 
  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>


 

블로그 이미지

미나미나미

댓글을 달아 주세요

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

 

 

 

 


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>

 

 

블로그 이미지

미나미나미

댓글을 달아 주세요