장고:썸머노트 설치 - 편집 역사

2022년 11월 28일 (월) 06:42에 58.233.232.101님의 편집

2022-11-28T06:42:33Z

← 이전 판		2022년 11월 28일 (월) 06:42 판
86번째 줄:		86번째 줄:
	=부트스트랩 위에 올리기=		=부트스트랩 위에 올리기=

	=== 시작 전에 ===		===시작 전에===
	미디어 설정을 해주는데... 확인이 필요하다. summernote에선 DB에 바로 저장해버리는듯.		미디어 설정을 해주는데... 확인이 필요하다. summernote에선 DB에 바로 저장해버리는듯.
	{\| class="wikitable"		{\| class="wikitable"
101번째 줄:		101번째 줄:
	\|}		\|}

	=== 시작 ===		===시작===
	썸머노트 공식페이지에 설명되어 있다. https://summernote.org/getting-started/#for-bootstrap-4		썸머노트 공식페이지에 설명되어 있다. https://summernote.org/getting-started/#for-bootstrap-4

218번째 줄:		218번째 줄:
	</syntaxhighlight>		</syntaxhighlight>

	=== 알면 좋을 사실 ===		===알면 좋을 사실===
	이미지는 media가 아닌 DB에 저장하는듯.<references />		이미지는 media가 아닌 DB에 저장하는듯.<references />

2022년 7월 14일 (목) 01:46에 Sam님의 편집

2022-07-14T01:46:33Z

@@ 85번째 줄: / 85번째 줄: @@
 =부트스트랩 위에 올리기=
 썸머노트 공식페이지에 설명되어 있다. https://summernote.org/getting-started/#for-bootstrap-4
@@ 123번째 줄: / 140번째 줄: @@
 ===드롭다운 버튼 작동===
-그런데, 위처럼 작성하면 드롭다운 버튼을 한 번 누르고 난 후에 다시 눌리지가 않는 기현상이 발생한다. 썸머노트의 구조적인 문제라고 하는데<ref>https://blog.naver.com/rainbow0043/221527367467</ref>, 다음의 한 줄을 썸머노트코드 마지막 줄에 추가하자.
+그런데, 위처럼 작성하면 드롭다운 버튼을 한 번 누르고 난 후에 다시 눌리지가 않는 기현상이 발생한다. 썸머노트의 구조적인 문제라고 하는데<ref>https://blog.naver.com/rainbow0043/221527367467</ref>, 다음의 한 줄을 썸머노트코드 마지막 줄에 추가하자.(부트스트랩의 popper를 설치했다면 문제 없음.)
 <code>$('.dropdown-toggle').dropdown()</code>
@@ 200번째 줄: / 217번째 줄: @@
      </script>
 </syntaxhighlight>
 <references />

180.81.16.24: /* django-summernote 모듈로 설치하는 방법 */

2022-05-04T02:49:17Z

django-summernote 모듈로 설치하는 방법

← 이전 판		2022년 5월 4일 (수) 02:49 판
14번째 줄:		14번째 줄:

	=django-summernote 모듈로 설치하는 방법=		=django-summernote 모듈로 설치하는 방법=
	이 방법보다 부트스트랩 위에 올리는 방법이 더 괜찮다;; 이 방법은 쓰지 말자~~. 아래 참조~~.		이 방법보다 부트스트랩 위에 올리는 방법이 더 괜찮다;;(2022.05기준 반응형으로 넣기 어렵다.) 이 방법은 쓰지 말자.
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+

180.81.16.24: /* 부트스트랩 위에 올리기 */

2022-05-04T02:23:55Z

부트스트랩 위에 올리기

← 이전 판		2022년 5월 4일 (수) 02:23 판
3번째 줄:		3번째 줄:
	==개요==		==개요==

	=== WYSIWYG ===		===WYSIWYG===
	위징위그. What You See Is What You Get 의 약자이다. 일반적으로 입력을 하면 코드를 사용하여 입력을 해야 사용자가 원하는 크기, 색의 글을 쓸 수 있다. 제대로 된 게시판, 사용자 친화적인 게시판이 되기 위해선 필수적인 기능이다.		위징위그. What You See Is What You Get 의 약자이다. 일반적으로 입력을 하면 코드를 사용하여 입력을 해야 사용자가 원하는 크기, 색의 글을 쓸 수 있다. 제대로 된 게시판, 사용자 친화적인 게시판이 되기 위해선 필수적인 기능이다.

13번째 줄:		13번째 줄:
	이미 장고앱으로 개발되어 있어 쉽게 설치가 가능하다.		이미 장고앱으로 개발되어 있어 쉽게 설치가 가능하다.

	==django-summernote 모듈로 설치하는 방법==		=django-summernote 모듈로 설치하는 방법=
	이 방법보다 부트스트랩 위에 올리는 방법이 더 괜찮다;; 이 방법은 쓰지 말자. 아래 참조.		이 방법보다 부트스트랩 위에 올리는 방법이 더 괜찮다;; 이 방법은 쓰지 말자. 아래 참조.
	{\| class="wikitable"		{\| class="wikitable"
84번째 줄:		84번째 줄:
	<br />		<br />

	==부트스트랩 위에 올리기==		=부트스트랩 위에 올리기=
	썸머노트 공식페이지에 설명되어 있다. https://summernote.org/getting-started/#for-bootstrap-4		썸머노트 공식페이지에 설명되어 있다. https://summernote.org/getting-started/#for-bootstrap-4

2021년 1월 6일 (수) 10:33에 Sam님의 편집

2021-01-06T10:33:59Z

← 이전 판		2021년 1월 6일 (수) 10:33 판
2번째 줄:		2번째 줄:

	==개요==		==개요==

			=== WYSIWYG ===
			위징위그. What You See Is What You Get 의 약자이다. 일반적으로 입력을 하면 코드를 사용하여 입력을 해야 사용자가 원하는 크기, 색의 글을 쓸 수 있다. 제대로 된 게시판, 사용자 친화적인 게시판이 되기 위해선 필수적인 기능이다.

			네이버 스마트에디터, MediumEditor, 섬머노트 등이 오픈되어있다.


	일반적인 textarea에서 표현할 수 있는 방식은 굉장히 적다. 적어도 위키처럼 목차관리를 해준다든가, 링크를 만든다든가 정도는 되야 하지 않을까. 많이 사용되는 에디터인 섬머노트를 장고에 설치해본다.		일반적인 textarea에서 표현할 수 있는 방식은 굉장히 적다. 적어도 위키처럼 목차관리를 해준다든가, 링크를 만든다든가 정도는 되야 하지 않을까. 많이 사용되는 에디터인 섬머노트를 장고에 설치해본다.

115번째 줄:		122번째 줄:
	영어긴 하지만 끝까지 읽어보면 기능이 정말 많다; 솔직히 좀 놀람;;;		영어긴 하지만 끝까지 읽어보면 기능이 정말 많다; 솔직히 좀 놀람;;;

	=== 드롭다운 버튼 작동 ===		===드롭다운 버튼 작동===
	그런데, 위처럼 작성하면 드롭다운 버튼을 한 번 누르고 난 후에 다시 눌리지가 않는 기현상이 발생한다. 썸머노트의 구조적인 문제라고 하는데<ref>https://blog.naver.com/rainbow0043/221527367467</ref>, 다음의 한 줄을 썸머노트코드 마지막 줄에 추가하자.		그런데, 위처럼 작성하면 드롭다운 버튼을 한 번 누르고 난 후에 다시 눌리지가 않는 기현상이 발생한다. 썸머노트의 구조적인 문제라고 하는데<ref>https://blog.naver.com/rainbow0043/221527367467</ref>, 다음의 한 줄을 썸머노트코드 마지막 줄에 추가하자.

	<code>$('.dropdown-toggle').dropdown()</code>		<code>$('.dropdown-toggle').dropdown()</code>

	=== 재미난 옵션 ===		===재미난 옵션===
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+
144번째 줄:		151번째 줄:
	\|}		\|}

	=== 스크립트 예시 ===		===스크립트 예시===
	나는 다음과 같은 형식을 선호한다.<syntaxhighlight lang="html+django">		나는 다음과 같은 형식을 선호한다.<syntaxhighlight lang="html+django">
	<script>		<script>
193번째 줄:		200번째 줄:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>
			<references />

2020년 11월 17일 (화) 14:19에 Sam님의 편집

2020-11-17T14:19:02Z

@@ 77번째 줄: / 77번째 줄: @@
 <br />
-== 부트스트랩 위에 올리기 ==
+==부트스트랩 위에 올리기==
 썸머노트 공식페이지에 설명되어 있다. https://summernote.org/getting-started/#for-bootstrap-4
@@ 95번째 줄: / 95번째 줄: @@
      <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
-</syntaxhighlight>다음을 적절한 장소에 기입하면 썸머노트 에디터를 볼 수 있다.<syntaxhighlight lang="html+django">
+</syntaxhighlight>다음을 폼 안의 적절한 장소에 기입하면 썸머노트 에디터를 볼 수 있다.(input으로 두면 안되고 textarea로 두어야 되더라;;)<syntaxhighlight lang="html+django">
-<div id="summernote"></div>
+<textarea name="content" id="summernote">
      <script>
        $('#summernote').summernote({
@@ 111번째 줄: / 114번째 줄: @@
 영어긴 하지만 끝까지 읽어보면 기능이 정말 많다; 솔직히 좀 놀람;;;

Sam: /* 과정 */

2020-11-17T13:18:21Z

과정

@@ 6번째 줄: / 6번째 줄: @@
 이미 장고앱으로 개발되어 있어 쉽게 설치가 가능하다.
-==과정==
+==django-summernote 모듈로 설치하는 방법==
 {| class="wikitable"
 |+
@@ 73번째 줄: / 74번째 줄: @@
 |}
 근데, 이 섬머노트는 반응형이 아니다; 반영할 수 있는 방법이 있을까?

Sam: /* 과정 */

2020-11-12T11:55:55Z

과정

← 이전 판		2020년 11월 12일 (목) 11:55 판
72번째 줄:		72번째 줄:
	</syntaxhighlight>		</syntaxhighlight>
	\|}		\|}
			근데, 이 섬머노트는 반응형이 아니다; 반영할 수 있는 방법이 있을까?

Sam: /* 과정 */

2020-11-12T11:29:57Z

과정

@@ 63번째 줄: / 63번째 줄: @@
          fields = ['title', 'content']
          widgets = {'content': SummernoteWidget(),}
 </syntaxhighlight>
 |}

2020년 11월 12일 (목) 07:22에 Sam님의 편집

2020-11-12T07:22:29Z

← 이전 판		2020년 11월 12일 (목) 07:22 판
1번째 줄:		1번째 줄:
	{{장고}}		{{장고}}

	== 개요 ==		==개요==
	일반적인 textarea에서 표현할 수 있는 방식은 굉장히 적다. 적어도 위키처럼 목차관리를 해준다든가, 링크를 만든다든가 정도는 되야 하지 않을까. 많이 사용되는 에디터인 섬머노트를 장고에 설치해본다.		일반적인 textarea에서 표현할 수 있는 방식은 굉장히 적다. 적어도 위키처럼 목차관리를 해준다든가, 링크를 만든다든가 정도는 되야 하지 않을까. 많이 사용되는 에디터인 섬머노트를 장고에 설치해본다.

	이미 장고앱으로 개발되어 있어 쉽게 설치가 가능하다.		이미 장고앱으로 개발되어 있어 쉽게 설치가 가능하다.

	== 과정 ==		==과정==
	{\| class="wikitable"		{\| class="wikitable"
	\|+		\|+
25번째 줄:		25번째 줄:

	추가		추가
			\|-
			\|settings.py 설정
			\|클릭재킹 방지설정 변경.
			'django.middleware.clickjacking.XFrameOptionsMiddleware'라는 미들웨어가 클릭재킹을 방지해주는데, 기본설정이 DENY다.

			때문에 아래 옵션을 주어 설정을 변경해준다.<syntaxhighlight lang="python">
			#클릭재킹 방지설정 변경
			X_FRAME_OPTIONS = 'SAMEORIGIN'
			</syntaxhighlight><br />
	\|-		\|-
	\|urls.py 변경		\|urls.py 변경
53번째 줄:		62번째 줄:
	model = Post		model = Post
	fields = ['title', 'content']		fields = ['title', 'content']
	widgets = {		widgets = {'content': SummernoteWidget(),}
	'content': SummernoteWidget(),
	}
	</syntaxhighlight>		</syntaxhighlight>
			\|-
			\|
			\|
	\|}		\|}