카페 게시글
게시글 본문내용
|
다음검색
01~443_932 (1481)
<div class="entry"> | |
<div class="titleWrap jumbotron"> | |
<h2><a href="/177">[jquery] 웹에디터 썸머노트(SummerNote) 기본 사용법 정리</a></h2> | |
<span class="category label label-primary"><a href="/category">카테고리 없음</a></span> | |
<span class="date label label-info">2020. 8. 26. 21:05</span> | |
</div><!-- titleWrap close --> | |
<div class="article"> | |
<script xxonerror="changeAdsenseToAdfit()" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script> | |
<!-- inventory --> | |
<ins class="adsbygoogle" style="margin:50px 0; display:block" data-ad-client="ca-pub-9527582522912841" data-ad-slot="3825649038" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-nRFiQiN4avFYIKbk"></ins> | |
<script id="adsense_script"> | |
(adsbygoogle = window.adsbygoogle || []).push({}); | |
</script> | |
<script> | |
if(window.ObserveAdsenseUnfilledState !== undefined){ ObserveAdsenseUnfilledState(); } | |
</script> | |
<!-- System - START --> | |
<!-- System - END --> | |
<div class="tt_article_useless_p_margin contents_style"><h3 data-ke-size="size23"># 이 글을 읽기전에 생성 방법을 모르신다면, 아래의 글을 읽어주세요.</h3> | |
<p><a href="https://minaminaworld.tistory.com/176">https://minaminaworld.tistory.com/176</a></p> | |
<figure id="og_1598443170450" contenteditable="false" data-ke-type="opengraph" data-og-type="article" data-og-title="[jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법" data-og-description="# 예시 화면 (예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.) 2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 3. SummerNote 만들기 3-1. SummerNote 필요한 Jquery 요소 불러오기 -.." data-og-host="minaminaworld.tistory.com" data-og-source-url="https://minaminaworld.tistory.com/176" data-og-url="https://minaminaworld.tistory.com/176" data-og-image="https://scrap.kakaocdn.net/dn/mrPLM/hyHgztFxTL/jxhkQcvwdt22fUSFIv6kk1/img.png?width=800&height=249&face=0_0_800_249,https://scrap.kakaocdn.net/dn/ycuO3/hyHicQ9FCi/sZtaPC0wv0hAGzB7ThMto1/img.png?width=800&height=249&face=0_0_800_249,https://scrap.kakaocdn.net/dn/7OhS1/hyHgAe2ywF/28DYraDNKbIUjyryir2LFk/img.png?width=1091&height=643&face=0_0_1091_643"><a href="https://minaminaworld.tistory.com/176" target="_blank" rel="noopener" data-source-url="https://minaminaworld.tistory.com/176"> | |
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/mrPLM/hyHgztFxTL/jxhkQcvwdt22fUSFIv6kk1/img.png?width=800&height=249&face=0_0_800_249,https://scrap.kakaocdn.net/dn/ycuO3/hyHicQ9FCi/sZtaPC0wv0hAGzB7ThMto1/img.png?width=800&height=249&face=0_0_800_249,https://scrap.kakaocdn.net/dn/7OhS1/hyHgAe2ywF/28DYraDNKbIUjyryir2LFk/img.png?width=1091&height=643&face=0_0_1091_643');"> </div> | |
<div class="og-text"> | |
<p class="og-title">[jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법</p> | |
<p class="og-desc"># 예시 화면 (예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.) 2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 3. SummerNote 만들기 3-1. SummerNote 필요한 Jquery 요소 불러오기 -..</p> | |
<p class="og-host">minaminaworld.tistory.com</p> | |
</div> | |
</a></figure> | |
<h4 data-ke-size="size20"><b><span style="color: #333333;"># 예시 화면 </span></b><br /><b><span style="color: #333333;">(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)</span></b><b><span style="color: #333333;"></span></b></h4> | |
<p><figure class="imageblock alignCenter" data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/bQuzfj/btqHhGnhluj/1b6JsDcT4xpT9OrLamchj0/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/bQuzfj/btqHhGnhluj/1b6JsDcT4xpT9OrLamchj0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQuzfj%2FbtqHhGnhluj%2F1b6JsDcT4xpT9OrLamchj0%2Fimg.png" data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent" xxonerror="this.xxonerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"/></span></figure> | |
</p> | |
<h4 data-ke-size="size20"><b># 1. summernote 기본 사용법</b></h4> | |
<pre id="code_1598443250607" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code> $(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'); | |
}; | |
</code></pre> | |
<h4 data-ke-size="size20"><b><span style="color: #333333;"># 2. summernote 버튼</span></b><span style="color: #333333;"></span></h4> | |
<pre id="code_1598443310257" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code> <div class="container-fluid mt-2"> | |
<!-- 코드 르뷰 토글 --> | |
<button id="codeViewToggle" class="btn btn-primary" xxonclick="codeViewToggle()" type="button">codeViewToggle</button> | |
<!-- 썸머노트 활성화 비활성화 --> | |
<button id="enable" class="btn btn-primary" xxonclick="enable()" type="button">enable</button> | |
<button id="disable" class="btn btn-primary" xxonclick="disable()" type="button">disable</button> | |
<!-- 썸머노트 글자기 넣기 --> | |
<button id="insertText" class="btn btn-primary" xxonclick="insertText()" type="button">insertText</button> | |
<!-- 썸머노트 풀스크린 --> | |
<button id="fullscreen" class="btn btn-primary" xxonclick="fullscreen()" type="button">fullscreen</button> | |
<!-- 썸머노트 비였는지 확인 --> | |
<button id="empty" class="btn btn-primary" xxonclick="empty()" type="button">empty</button> | |
<!-- 썸머노트 활성화 전으로 돌리기ㄴ --> | |
<button id="reset" class="btn btn-primary" xxonclick="reset()" type="button">reset</button> | |
<!-- 썸머노트 이전 되돌리기 --> | |
<button id="undo" class="btn btn-primary" xxonclick="undo()" type="button">undo</button> | |
<button id="redo" class="btn btn-primary" xxonclick="redo()" type="button">redo</button> | |
</div></code></pre> | |
<h4 data-ke-size="size20"><b><span style="color: #333333;"># 3. 결과화면</span></b></h4> | |
<p> | |
<script src="//jsfiddle.net/SungSuNam/u3zy8kct/2/embed/js,html,result/dark/"></script> | |
</p> | |
<p><b><span style="color: #333333;"># 전체 테스트 코드</span></b></p> | |
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a class="btn-toggle-moreless">더보기</a> | |
<div class="moreless-content"> | |
<p><span><!</span><span>DOCTYPE</span><span> </span><span>html</span><span>></span></p> | |
<p><span><</span><span>html</span><span> </span><span>lang</span><span>=</span><span>"ko"</span><span>></span></p> | |
<p> </p> | |
<p><span><</span><span>head</span><span>></span></p> | |
<p><span> <</span><span>meta</span><span> </span><span>charset</span><span>=</span><span>"UTF-8"</span><span>></span></p> | |
<p><span> <</span><span>meta</span><span> </span><span>name</span><span>=</span><span>"viewport"</span><span> </span><span>content</span><span>=</span><span>"width=device-width, initial-scale=1.0"</span><span>></span></p> | |
<p><span> <</span><span>title</span><span>>Summer Note </</span><span>title</span><span>></span></p> | |
<p><span> </span><span><!-- include libraries(jQuery, bootstrap) --></span></p> | |
<p><span> <</span><span>link</span><span> </span><span>href</span><span>=</span><span>"<a href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css</a>"</span><span> </span><span>rel</span><span>=</span><span>"stylesheet"</span><span>></span></p> | |
<p><span> <</span><span>script</span><span> </span><span>src</span><span>=</span><span>"<a href="https://code.jquery.com/jquery-3.5.1.min.js">https://code.jquery.com/jquery-3.5.1.min.js</a>"</span><span>></</span><span>script</span><span>></span></p> | |
<p><span> <</span><span>script</span><span> </span><span>src</span><span>=</span><span>"<a href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js</a>"</span><span>></</span><span>script</span><span>></span></p> | |
<p> </p> | |
<p><span> </span><span><!-- 로컬 파일 summernote css/js --></span></p> | |
<p><span> </span><span><!-- <script src="../4.surmmernote/lib/summernote-bs4.js"></script> --></span></p> | |
<p><span> </span><span><!-- <link rel="stylesheet" href="../4.surmmernote/lib/summernote-bs4.css"> --></span></p> | |
<p> </p> | |
<p><span> </span><span><!-- CDN 파일 summernote css/js --></span></p> | |
<p><span> <</span><span>link</span><span> </span><span>href</span><span>=</span><span>"<a href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css">https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css</a>"</span><span> </span><span>rel</span><span>=</span><span>"stylesheet"</span><span>></span></p> | |
<p><span> <</span><span>script</span><span> </span><span>src</span><span>=</span><span>"<a href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js">https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js</a>"</span><span>></</span><span>script</span><span>></span></p> | |
<p> </p> | |
<p><span> </span><span><!-- CDN 한글화 --></span></p> | |
<p><span> <</span><span>script</span><span> </span><span>src</span><span>=</span><span>" <a href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js">https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js</a>"</span><span>></</span><span>script</span><span>></span></p> | |
<p><span> </span><span><!-- 로컬 파일 한글화 --></span></p> | |
<p><span> </span><span><!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> --></span></p> | |
<p><span> </span><span><!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script> --></span></p> | |
<p><span></</span><span>head</span><span>></span></p> | |
<p> </p> | |
<p><span><</span><span>body</span><span>></span></p> | |
<p><span> <</span><span>div</span><span> </span><span>class</span><span>=</span><span>"jumbotron p-1"</span><span>></span></p> | |
<p><span> <</span><span>h1</span><span> </span><span>class</span><span>=</span><span>"display-4"</span><span>>SummerNote 사용해보기</</span><span>h1</span><span>></span></p> | |
<p><span> </span><span><!-- <p class="lead">Subtitle</p> --></span></p> | |
<p><span> <</span><span>hr</span><span> </span><span>class</span><span>=</span><span>"my-4"</span><span>></span></p> | |
<p><span> <</span><span>div</span><span> </span><span>class</span><span>=</span><span>"container-fluid"</span><span>></span></p> | |
<p><span> </span><span><!-- summernote을 직접적으로 사용할 요소 --></span></p> | |
<p><span> <</span><span>div</span><span> </span><span>id</span><span>=</span><span>"summernote"</span><span>></span></p> | |
<p><span> <</span><span>p</span><span>>Hello Summernote</</span><span>p</span><span>></span></p> | |
<p><span> </</span><span>div</span><span>></span></p> | |
<p><span> </</span><span>div</span><span>></span></p> | |
<p> </p> | |
<p><span> <</span><span>div</span><span> </span><span>class</span><span>=</span><span>"container-fluid mt-2"</span><span>></span></p> | |
<p><span> </span><span><!-- 수정 시작 버튼 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"edit"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>edit</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>수정</</span><span>button</span><span>></span></p> | |
<p><span> </span><span><!-- 수정 완료 버튼 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"save"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>save</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>수정 종료</</span><span>button</span><span>></span></p> | |
<p><span> </</span><span>div</span><span>></span></p> | |
<p> </p> | |
<p><span> <</span><span>hr</span><span> </span><span>class</span><span>=</span><span>"my-2"</span><span>></span></p> | |
<p> </p> | |
<p><span> <</span><span>div</span><span> </span><span>class</span><span>=</span><span>"container-fluid mt-2"</span><span>></span></p> | |
<p><span> </span><span><!-- 코드 르뷰 토글 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"codeViewToggle"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>codeViewToggle</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>codeViewToggle</</span><span>button</span><span>></span></p> | |
<p><span> </span><span><!-- 썸머노트 활성화 비활성화 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"enable"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>enable</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>enable</</span><span>button</span><span>></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"disable"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>disable</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>disable</</span><span>button</span><span>></span></p> | |
<p><span> </span><span><!-- 썸머노트 글자기 넣기 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"insertText"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>insertText</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>insertText</</span><span>button</span><span>></span></p> | |
<p><span> </span><span><!-- 썸머노트 풀스크린 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"fullscreen"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>fullscreen</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>fullscreen</</span><span>button</span><span>></span></p> | |
<p><span> </span><span><!-- 썸머노트 비였는지 확인 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"empty"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>empty</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>empty</</span><span>button</span><span>></span></p> | |
<p><span> </span><span><!-- 썸머노트 활성화 전으로 돌리기ㄴ --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"reset"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>reset</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>reset</</span><span>button</span><span>></span></p> | |
<p><span> </span><span><!-- 썸머노트 이전 되돌리기 --></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"undo"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>undo</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>undo</</span><span>button</span><span>></span></p> | |
<p><span> <</span><span>button</span><span> </span><span>id</span><span>=</span><span>"redo"</span><span> </span><span>class</span><span>=</span><span>"btn btn-primary"</span><span> </span><span>xxonclick</span><span>=</span><span>"</span><span>redo</span><span>()</span><span>"</span><span> </span><span>type</span><span>=</span><span>"button"</span><span>>redo</</span><span>button</span><span>></span></p> | |
<p><span> </</span><span>div</span><span>></span></p> | |
<p><span> </</span><span>div</span><span>></span></p> | |
<p> </p> | |
<p><span> <</span><span>script</span><span>></span></p> | |
<p><span> </span><span>$</span><span>(document).</span><span>ready</span><span>(</span><span>function</span><span> () {</span></p> | |
<p><span> console.</span><span>log</span><span>($.</span><span>summernote</span><span>.</span><span>options</span><span>);</span></p> | |
<p><span> </span><span>// 실행시 언어 설정을 한글로 설정 </span></p> | |
<p><span> $.</span><span>summernote</span><span>.</span><span>options</span><span>.</span><span>lang</span><span> </span><span>=</span><span> </span><span>'ko-KR'</span><span>;</span></p> | |
<p><span> $.</span><span>summernote</span><span>.</span><span>options</span><span>.</span><span>airMode</span><span> </span><span>=</span><span> </span><span>false</span><span>;</span></p> | |
<p><span> });</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> a </span><span>=</span><span> </span><span>$</span><span>(</span><span>'#summernote'</span><span>);</span></p> | |
<p> </p> | |
<p><span> </span><span>// 수정버튼</span></p> | |
<p><span> </span><span>var</span><span> </span><span>edit</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> a.</span><span>summernote</span><span>({ </span><span>focus</span><span>:</span><span> </span><span>true</span><span> });</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>// 수정 종료</span></p> | |
<p><span> </span><span>var</span><span> </span><span>save</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>var</span><span> markup </span><span>=</span><span> a.</span><span>summernote</span><span>(</span><span>'code'</span><span>);</span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'destroy'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>codeViewToggle</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// summer note code view 활성화</span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'codeview.toggle'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>enable</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// summer note 활성화, 비활성화</span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'enable'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>disable</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// summer note 활성화, 비활성화</span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'disable'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>insertText</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// 현재 커서 위치에 'hello world'라는 텍스트 생성 </span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'editor.insertText'</span><span>, </span><span>'hello world'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>fullscreen</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// fullscreen 토글 </span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'fullscreen.toggle'</span><span>);</span></p> | |
<p><span> </span><span>// fullscreen 활성화 여부 </span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'fullscreen.isFullscreen'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>empty</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// summer note empty 여부 확인 </span></p> | |
<p><span> </span><span>if</span><span> (</span><span>!</span><span>a.</span><span>summernote</span><span>(</span><span>'isEmpty'</span><span>)) {</span></p> | |
<p><span> </span><span>alert</span><span>(</span><span>'에디터 안에 글 존재함'</span><span>);</span></p> | |
<p><span> }</span></p> | |
<p><span> };</span></p> | |
<p><span> </span></p> | |
<p><span> </span><span>var</span><span> </span><span>reset</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// summernote가 실행되기 전으로 돌아감</span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'reset'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>undo</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// 실행 전</span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'undo'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span>var</span><span> </span><span>redo</span><span> </span><span>=</span><span> </span><span>function</span><span> () {</span></p> | |
<p><span> </span><span>// 실행 후</span></p> | |
<p><span> a.</span><span>summernote</span><span>(</span><span>'redo'</span><span>);</span></p> | |
<p><span> };</span></p> | |
<p> </p> | |
<p><span> </span><span></</span><span>script</span><span>></span></p> | |
<p><span></</span><span>body</span><span>></span></p> | |
<p> </p> | |
<p><span></</span><span>html</span><span>></span></p> | |
</div> | |
</div></div> | |
<!-- System - START --> | |
<!-- System - END --> | |
<div class="container_postbtn #post_button_group"> | |
<div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; | |
window.ReactionApiUrl = '//minaminaworld.tistory.com/reaction'; | |
window.ReactionReqBody = { | |
entryId: 177 | |
}</script> | |
<div class="wrap_btn" id="reaction-177"></div> | |
<script src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-438ee78d135d01d706e7aa9124f77f5a35303bec/static/script/reaction-button-container.min.js"></script><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQuzfj%2FbtqHhGnhluj%2F1b6JsDcT4xpT9OrLamchj0%2Fimg.png" data-title="[jquery] 웹에디터 썸머노트(SummerNote) 기본 사용법 정리" data-description="# 이 글을 읽기전에 생성 방법을 모르신다면, 아래의 글을 읽어주세요. 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 () { cons.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="미나미나미" data-pc-url="https://minaminaworld.tistory.com/177" data-relative-pc-url="/177" data-blog-title="미나미 블로그"><span class="ico_postbtn ico_share">공유하기</span></button> | |
<div class="layer_post" id="tistorySnsLayer"></div> | |
</div><div class="wrap_btn wrap_btn_etc" data-entry-id="177" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> | |
<div class="layer_post" id="tistoryEtcLayer"></div> | |
</div></div> | |
<button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2542989" data-url="https://minaminaworld.tistory.com/177" data-device="web_pc"><em class="txt_state">구독하기</em><strong class="txt_tool_id">미나미 블로그</strong><span class="img_common_tistory ico_check_type1"></span></button><div class="postbtn_ccl" data-ccl-type="1" data-ccl-derive="2"> | |
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko" target="_blank" class="link_ccl" rel="license"> | |
<span class="bundle_ccl"> | |
<span class="ico_postbtn ico_ccl1">저작자표시</span> <span class="ico_postbtn ico_ccl2">비영리</span> <span class="ico_postbtn ico_ccl3">변경금지</span> | |
</span> | |
</a> | |
</div> | |
<!-- | |
<Work rdf:about=""> | |
</Work> | |
</License> | |
</rdf:RDF> | |
--> <div data-tistory-react-app="SupportButton"></div> | |
</div> | |
<!-- PostListinCategory - START --> | |
<!-- PostListinCategory - END --> | |
</div> | |
<div class="author alert alert-success"> | |
<img src="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" alt="블로그 이미지" class="img-responsive img-circle text-center" width="50%"> | |
<p><span class="text label label-primary">미나미나미</span></p> | |
<p></p> | |
<div style="clear: both;"></div> | |
</div> | |
<div class="tagTrail"> | |
<span class="tagText label label-success">Tag</span> <a href="/tag/javascript%20%EC%9B%B9%EC%97%90%EB%94%94%ED%84%B0" rel="tag">javascript 웹에디터</a>, <a href="/tag/jQuery%20Plugin" rel="tag">jQuery Plugin</a>, <a href="/tag/jquery%20summernote" rel="tag">jquery summernote</a>, <a href="/tag/jquery%20%EC%8D%B8%EB%A8%B8%EB%85%B8%ED%8A%B8" rel="tag">jquery 썸머노트</a>, <a href="/tag/jquery%20%EC%9B%B9%EC%97%90%EB%94%94%ED%84%B0" rel="tag">jquery 웹에디터</a> | |
</div> | |
<div class="actionTrail"> | |
<a href="#tb" xxonclick=""></a>, | |
<a href="#rp" xxonclick=""><span id="commentCount177_0">댓글 <span class="cnt label label-default">1개</span>가 달렸습니다</span></a> | |
</div> | |
<div data-tistory-react-app="Namecard"></div><div id="entry177Comment"> | |
<div class="comment"> | |
<h3 class="text-primary"><i class="fa fa-comments"></i>댓글을 달아 주세요 </h3> | |
<div id="commentList"> | |
<ul class="fa-ul"> | |
<li id="none_display_division_for_comment_list_177" style="display: none;"></li> | |
<script type="text/javascript"> | |
setInitialEntryComments(177, 1703608087) | |
</script> | |
</ul> | |
</div><!-- commentList close --> | |
<form method="post" action="/comment/add/177" xxonsubmit="return false" style="margin: 0"> | |
<div class="commentWrite"> | |
<form class="form-horizontal"> | |
<div class="form-group"> | |
<div class="col-md-12"> | |
<div class="input-group"> | |
<span class="input-group-addon"><i class="fa fa-user"></i></span> | |
<input type="text" class="form-control" id="name" name="name" value=""> | |
</div> | |
</div> | |
</div> | |
<div class="form-group"> | |
<div class="col-md-12"> | |
<div class="input-group"> | |
<span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span> | |
<input type="password" class="form-control" id="password" name="password" value=""> | |
</div> | |
</div> | |
</div> | |
<div class="form-group"> | |
<div class="col-md-12"> | |
<div class="input-group"> | |
<span class="input-group-addon"><i class="fa fa-home"></i></span> | |
<input type="text" class="form-control" id="homepage" name="homepage" value="http://"> | |
</div> | |
</div> | |
</div> | |
</form> | |
<p class="secretWrap"> | |
<input type="checkbox" name="secret" class="checkbox" /> | |
<label for="secret"> 비밀글 </label> | |
</p> | |
<p> | |
<textarea name="comment" class="form-control" rows="10"></textarea> | |
</p> | |
<p> | |
<input class="btn btn-primary" type="submit" value="댓글 달기" xxonclick="addComment(this, 177); return false;"> | |
</p> | |
</div><!-- commentWrite close --> | |
</form> | |
</div><!-- comment close --> | |
</div> | |
<script type="text/javascript">loadedComments[177]=true; | |
findFragmentAndHighlight(177);</script> | |
</div><!-- entry close --> | |
</div> | |
<div class="col-md-3"> | |
<div class="sidebar"> | |
<div class="revenue_unit_wrap"> | |
<div class="revenue_unit_item adsense responsive"> | |
<div class="revenue_unit_info">반응형</div> | |
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async="async"></script> | |
<ins class="adsbygoogle" style="display: block;" data-ad-host="ca-host-pub-9691043933427338" data-ad-client="ca-pub-3807628079045711" data-ad-format="auto"></ins> | |
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> | |
</div> | |
</div> | |
<!-- 검색 모듈 --> | |
<div id="searchBox" class="widget"> | |
<div class="input-group"> | |
<input type="text" class="form-control" name="search" value="" xxonkeypress="if (event.keyCode == 13) { try { | |
window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); | |
document.getElementsByName('search')[0].value = ''; | |
return false; | |
} catch (e) {} }" placeholder="검색어를 입력하세요"> | |
<span class="input-group-btn"> | |
<button class="btn btn-default" type="button" xxonclick="try { | |
window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value); | |
document.getElementsByName('search')[0].value = ''; | |
return false; | |
} catch (e) {}">검색</button> | |
</span> | |
</div><!-- /input-group --> | |
</div> | |
<!-- 공지사항 모듈 --> | |
<div id="notice" class="widget"> | |
<h3><i class="fa fa-bullhorn"></i>공지사항</h3> | |
<ul class="fa-ul"> | |
</ul> | |
</div> | |
<!-- 카테고리 모듈 --> | |
<div id="category" class="widget"> | |
<h3><i class="fa fa-folder"></i>카테고리</h3> | |
<ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(214)</span> </a> | |
<ul class="category_list"><li class=""><a href="/category/%5BGit%5D" class="link_item"> [Git] <span class="c_cnt">(1)</span> </a></li> | |
<li class=""><a href="/category/%5Bandroid%5D" class="link_item"> [android] <span class="c_cnt">(9)</span> </a></li> | |
<li class=""><a href="/category/%5Bjava%5D" class="link_item"> [java] <span class="c_cnt">(26)</span> </a> | |
<ul class="sub_category_list"><li class=""><a href="/category/%5Bjava%5D/%5B%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4%5D" class="link_sub_item"> [디자인패턴] <span class="c_cnt">(2)</span> </a></li> | |
</ul> | |
</li> | |
<li class=""><a href="/category/%5Bjavascript%5D" class="link_item"> [javascript] <span class="c_cnt">(43)</span> </a> | |
<ul class="sub_category_list"><li class=""><a href="/category/%5Bjavascript%5D/%5Bjquery%5D" class="link_sub_item"> [jquery] <span class="c_cnt">(7)</span> </a></li> | |
<li class=""><a href="/category/%5Bjavascript%5D/underscore.js" class="link_sub_item"> underscore.js <span class="c_cnt">(1)</span> </a></li> | |
<li class=""><a href="/category/%5Bjavascript%5D/charts.js" class="link_sub_item"> charts.js <span class="c_cnt">(4)</span> </a></li> | |
</ul> | |
</li> |
html
|
첫댓글 <div class="entry">
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default