ASP.NET CORE MVC EntityFramework 게시판만들기 - 5.WYSIWYG Editor 달기

목표

안녕하세요.

엄청 중요한 게시판의 꽃 WYSIWYG 에디터를 달아보겠습니다.

WYSIWYG에디터가 뭐냐면

What You See Is What You Get 의약자입니다.

해석하면 보이는데로 나오는 에디터죠.

WYSIWYG에디터들은 많이 나와있는데요, 무료부터 유료까지 크게 한 5개정도되는것 같네요.

우리나라에서 자주쓰이는건 진도와 다음에디터가있는데, 저는

bootstrap css와 상호작용하고, 달기 편한 Summernote라는걸 쓸거에요

http://summernote.org/

설치는 아래 링크만 달면 설치완료입니다.

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>

사용법은 이게 땡이에요. 참 쉽죠? 물론 깊이 들어가면, 세세하게 할게있지만 튜토리얼이니 깊이들어가진 않겠습니다.

<div id="summernote">Hello Summernote</div>

$(document).ready(function() {
  $('#summernote').summernote();
});

그럼 위 내용을 저희 소스에 달아보겠습니다.

설치는 Layout 에서 하고,

사용 코드는 입력, 수정페이지에 달면되겠죠?

아니면 설치도 입력, 수정페이지에서 각각 하셔도됩니다.

작업계획

1. _Layout에 summernote 세팅

2. 입력페이지에 summernote 적용

3. 수정페이지에 summernote 적용

작업시작

1. _Layout에 summernote 세팅

_Layout은 공통으로 사용하는 부모입니다. css와 js 같은것들은 이곳에 넣으면 모든 페이지에 적용됩니다.

1-0. _Layout을 엽니다.(Views\Shared\_Layout.cshtml)

1-1. css 링크를 추가합니다.

1-2. js 링크를 추가합니다.

2. 입력페이지에 summernote 적용

2-0. Create.cshtml 페이지를 엽니다. (Views\Boards\Create.cshtml)

2-1. 직접 보이는 input을 hidden으로 변경하고 summer note div를 넣습니다.

2-2. summernote를 구동시킵니다.

2-3. 폼을 저장할때 summernote의 내용을 content input에 넣어줍니다.

3. 수정 페이지에 summernote적용

수정 페이지는 입력페이지와 99퍼센트 유사합니다. 단 하나 이전 데이터를 불러오는것 빼구요.

3-0. Edit.cshtml 페이지를 엽니다. (Views\Boards\Edit.cshtml)

3-1. 직접 보이는 input을 hidden으로 변경하고 summer note div를 넣습니다.

3-2. summernote를 구동시킵니다. 이때 이전 데이터도 불러옵니다.

@Html.Raw(Model.Content) //이 내용은 모델의 Content를 입력한 그대로 가져오겠다는 것입니다.

이 때 Model.Content를 통해 해커가 공격할 수 있으니, 추후 Sanitize 해주어야합니다.

3-3. 폼을 저장할때 summernote의 내용을 content input에 넣어줍니다.

이제 입력 및 수정해서 결과를 확인해봅니다.