봉봉의 개인 블로그

2017-07-11-T(게시판 editor)이미지 업로드 가능 본문

학원에서 배운것들/TEA - T

2017-07-11-T(게시판 editor)이미지 업로드 가능

봉봉이네 2017. 7. 11. 14:07

IDE 관련 궁금한걸 물어보려고 OKKY를 둘러보고 Q&A를 작성하려고 글쓰기를 눌렀습니다.. 

이때 처음 본게 에디터가 참 심플하고 괜찮다고 생각했습니다..

그래서 알아보니 Summernote 라는 위지윅 에디터를 사용하고 있었습니다.


약간의 검색을 해본 내용을 공유해볼까 합니다.



위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다.

현재 대부분의 워드 프로세서는 위지위그 방식을 쓰고 있으나 HTML이나 TeX는 편집 명령어를 통해 편집하는 방식을 고수하고 있다. 이는 문서의 호환성, 범용성 때문이다.


대표적으로는 CKEditor, FCKEditor, 다음 오픈 에디터


사용할 위지윅 에디터는 국내에서 시작된 오픈소스 프로젝트로 한국 개발자들이 만든 에디터다. Super simple WYSIWYG Editor using Bootstrap 라는 설명만큼 간단한 설정만으로 사용할 수 있다.









Bootstrap 기반이고 사용이 간편(설정이 별루 없다)하고, 심플하고, 거기다 오픈소스라 여러 개발자들의 버전이 존재한다.




AngularJS, Django, Ruby On Rails, Google Material 디자인등이 적용된 버전도 보인다.








사용하기 

사용법에 대해서 Summernote의 github (https://github.com/summernote/summernote) 과 홈페이지(http://summernote.org/getting-started/#requires-html5-doctype) 을 기준으로 작성하였다.





Summernote 다운로드

Download compiled

Download source code  소스코드 다운로드

Github을 통해 Summernote 최종 버전과 Javascript 코드를 얻을 수 있스빈다. Download

Install with Bower

웹 프론트앤드 패키지 관리자인 BOwer를 통해서도 인스톨을 할 수 있습니다.

bower install summernote

Installation 설치

Include js/css

Summernote 는 jQuery, Bootstrap 을 기반을 동작합니다. <HTML>태그 안에 다음 코드를 넣어주세요.

<!-- 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.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>

다른 폴더에 summernote를 다운로드 한 경우 파일의 경로를 변경하는 것을 잊지 마십시오.

Fontawesome dependancy

v0.8.0 버전 이후 fontawesome 을 반드시 포함 할 필요가 없습니다. 그러나 여전히 사용자 정의 아이콘을 사용할 수 있습니다. 더 자세한 사항은 사용자 정의 버튼 을 참조하시기 바랍니다.

Insert 추가

body태그 내에 div태그를 추가합니다.; 이 구성요소는 이후에 summernote 에디터 툴로 렌더링 됩니다.

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

summernote 실행

HTML Document가 준비되면 summnernote를 실행해야 합니다. 

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

Simple example 간단 예제

다음과 같은 내용을 index.html 에 추가하여 브라우져를 통해 실행해 볼 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <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> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>


i18n support  - 국제화 규격 지원

Language

summernote 라이브러리 파일에는 언어파일을 포함할 수고 있습니다. eg) summernote-ko-KR.js

<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> 

<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>

Run the script with locale option.

$(document).ready(function() {
  $('#summernote').summernote({
    lang: 'ko-KR' // default: 'en-US'
  });
});

추가로 지원되는 언어 파일은 다음과 같습니다: languages



*html5에서 이미지 표현하는 방식중 하나

blob데이터

blob는 서버내에서 관리 하지만 html5버전부터 웹브라우저에서도 관리가 가능하다.

----------------------------------------------------------------------------------------------------------------

이에따른 html5 canvas로 이미지를 그려 blob로 변환하여

서버에 전송이 가능하다.  blob데이터를 canvas에 표현이 가능하다.

또한 blob를 서버에서 전송받아 파일로 변환하여 다운로드도 가능하다.

(브라우져만으로도 canvas에서 그림을 그리고 파일 다운로드도 가능)

이에따른 간단한 예제 기능은 사인하기


연관 html5 api - new FileReader(); <--검색해보기












****꼭 부트스트랩을 이용한것만잇는것은 아니며 ckeditor 같은 툴을 이용해도 되지만 많이 복잡하게 된다.

저작자표시

'학원에서 배운것들 > TEA - T' 카테고리의 다른 글

2017-07-19-T(JQuery 플러그인 제작 및 콜백함수 및 바로호출  (0) 2017.07.19
2017-07-12-Entity Relationship Diagram  (0) 2017.07.12
2017-07-10-T(mock up)  (0) 2017.07.10
2017-06-30-T  (0) 2017.06.30
2017-06-29-T  (0) 2017.06.29
공유하기 링크
'학원에서 배운것들/TEA - T' Related Articles more
Comments