Bootstrap용 WYSIWYG 웹에디터 Summernote 사용시 서버로 로컬 이미지 업로드후 삽입하기 (1)

Summernote 에디터에서 onImageLoad 콜백 제대로 사용하기

제목이 너무 길다. ㅎㅎㅎ

웹애플리케이션에서 사용자들이 글을 작성할 때 편리하게 사용할 수 있는 웹에디터를 제공하면 서비스의 질을 향상시킬 수 있다. 이 글은 루비온레일스 프렘임워크를 이용하여 웹애플리케이션을 개발할 때, 요즘 Bootstrap 분야에서 급부상하고 있는 WYSIWYG 웹에디터인 Summernote를 사용하는 방법과, 로컬이미지를 글 중에 삽입할 때, Summernote의 기본상태에서 이미지 파일을 Base64로 인코딩하여 DB에 저장하는 방식 외에, 별도로 이미지 파일을 서버로 업로드한 후 해당 링크를 에디터로 삽입하는 방식에 대해서 경험한 내용을 설명한다. 계속 “Bootstrap용 WYSIWYG 웹에디터 Summernote 사용시 서버로 로컬 이미지 업로드후 삽입하기 (1)” 읽기

Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (3)

2015-05-19_17-04-47

이번에는 category 항목을 다중 선택이 가능하도록 해 보자. 이를 위해서 우선 3개의 boolean 속성을 추가하자.

$ rails g migration add_fields_to_posts life_option:boolean study_option:boolean computer_option:boolean

계속 “Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (3)” 읽기

Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (2)

오늘은 지난 글에 이어서 문자열 속성을 가지는 필드에 대해서 라디오버튼 그룹 또는 SELECT 태그를 적용하는 방법을 알아보자.

계속 “Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (2)” 읽기

Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (1)

웹어플리케이션을 제작할 때 퍼블리셔는 프론트엔드를 제일선에서 담당하는 매우 중요한 역할을 수행한다.

레일스를 이용해서 웹개발할 때도 예외는 아니다. 그러나 레일스는 MVC 디자인 패턴이 완벽하게 통합되어 있어서 뷰(view)단에서 퍼블리셔의 능력을 한껏 발휘할 수 있다. 또한 bootstrap-sass 젬 덕분에 레일스에서 Twitter Bootstrap을 매우 쉽게 사용할 수 있고 simple_form 젬과 함께 사용하면 뷰단의 디자인을 비전문가의 입장에서도 비교적 간단하게 해결할 수 있어 매우 편리하다.

그러나 simple_form 젬을 처음 사용할 때는 `wrapper` 클래스에 대한 이해 부족으로 라디오버튼과 체크박스 표시를 자유자재로 사용하기 힘들다.

이 글에서는 예제 코드를 통해서 하나씩 해결해 보도록 하겠다.

계속 “Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (1)” 읽기

Jasny’s Bootstrap : The missing components for your favorite front-end framework.

http://jasny.github.io/bootstrap/

Jasny Bootstrap is an extension to vanilla Bootstrap, adding a number of features and components.

The aim of Jasny Bootstrap is to provide all the required features for building highly interactive web applications for desktop and mobile.

이 중에서, 특히, Bootstrap용 file input 이 유용하다.