gnuboard 에서 summernote 에디터 사용하기 정보
gnuboard 에서 summernote 에디터 사용하기관련링크
본문
그누보드5 를 위한 Summernote 에디터 플러그인
bootstrap 을 사용하는 위지윅 에디터를 gnuboard 플러그인 형태로 구성하였습니다.
* 플러그인 설치
다운로드 : https://github.com/easylogic/gnuboard5-summernote/archive/master.zip
git clone : https://github.com/easylogic/gnuboard5-summernote.git
두가지 형태로 소스를 받은 후에
gnuboard 의 plugin/editor/ 디렉토리에 summernote 이름으로 넣어주세요.
* 플러그인 사용
[관리자 모드 > 환경 설정 > 기본 환경 설정] 메뉴의 [홈페이지 기본환경 설정 > 에디터 선택] 에서 summernote 를 선택해주세요.
* 지원 기능
- summernote 기본 기능
- drag&drop 형태로 Image Upload 지원
- video 태그 입력 플러그인
* 이미 bootstrap css 를 사용하는 경우
editor.lib.php 에서 사용하지 않는 css 를 제거해주시면 됩니다.
질문이나 기능에 대한 문의는 https://github.com/easylogic/gnuboard5-summernote 여기에 이슈 달아주세요.
감사합니다.
----
추가사항 : autosave 적용하기
auto save 를 적용 하기 위해서는 하드 코딩이 필요합니다.
일단 /js/autosave.js 를 열어서 아래 2가지를 추가 해주세요.
function autosave () {
...
// summernote data 설정
} else if (g5_editor.indexOf("summernote") != -1 ) {
this.wr_content.value = $("#wr_content").code();
}
...
}
// autosave 내용 로드
$(document).on( "click", ".autosave_load", function(){
...
// summernote 내용 로드
} else if (g5_editor.indexOf("summernote") != -1 ) {
$("#wr_content").code(content);
}
...
}
bootstrap 을 사용하는 위지윅 에디터를 gnuboard 플러그인 형태로 구성하였습니다.
* 플러그인 설치
다운로드 : https://github.com/easylogic/gnuboard5-summernote/archive/master.zip
git clone : https://github.com/easylogic/gnuboard5-summernote.git
두가지 형태로 소스를 받은 후에
gnuboard 의 plugin/editor/ 디렉토리에 summernote 이름으로 넣어주세요.
* 플러그인 사용
[관리자 모드 > 환경 설정 > 기본 환경 설정] 메뉴의 [홈페이지 기본환경 설정 > 에디터 선택] 에서 summernote 를 선택해주세요.
* 지원 기능
- summernote 기본 기능
- drag&drop 형태로 Image Upload 지원
- video 태그 입력 플러그인
* 이미 bootstrap css 를 사용하는 경우
editor.lib.php 에서 사용하지 않는 css 를 제거해주시면 됩니다.
질문이나 기능에 대한 문의는 https://github.com/easylogic/gnuboard5-summernote 여기에 이슈 달아주세요.
감사합니다.
----
추가사항 : autosave 적용하기
auto save 를 적용 하기 위해서는 하드 코딩이 필요합니다.
일단 /js/autosave.js 를 열어서 아래 2가지를 추가 해주세요.
function autosave () {
...
// summernote data 설정
} else if (g5_editor.indexOf("summernote") != -1 ) {
this.wr_content.value = $("#wr_content").code();
}
...
}
// autosave 내용 로드
$(document).on( "click", ".autosave_load", function(){
...
// summernote 내용 로드
} else if (g5_editor.indexOf("summernote") != -1 ) {
$("#wr_content").code(content);
}
...
}
추천
4
4
댓글 26개
video 삽입 기능이 편리하네요!
그누스트랩에는 무난히 쓸 수 있을까요?
그누보드 원본에 적용했더니... 'bootstrap.min.css' 영향을 많이 받아... 틀어지는 부분들이 있네요.
그누스트랩에는 무난히 쓸 수 있을까요?
그누보드 원본에 적용했더니... 'bootstrap.min.css' 영향을 많이 받아... 틀어지는 부분들이 있네요.
감사합니다
써보겠습니다
써보겠습니다
@fm25 현재 summernote 가 bootstrap 기반이라 bootstrap 안에서 동작이 됩니다. 스크립트도 모두 bootstrap 을 쓰고 있어서 현재는 뺄 수가 없구여 multi ui 를 지원하는 방식을 현재 연구중인 것으로 알고 있습니다. 그렇게 되면 bootstrap 상관 없이 쓸 수 있을 것 같아요.
부트스트랩을 적용한 사이트에서는 부딪치는 부분들이 거의 없네요. "editor.lib.php에서 사용하지 않는(중복된) css"를 몇개 제거하니 완벽...
샘플 페이지 없나요 ㅎㅎ
어떤건지 궁금하네요
어떤건지 궁금하네요
감사합니다
autosave 관련된 코드 readme 에 추가하엿습니다.
참고하세요.
참고하세요.
감사합니다~
반응형도 지원되고, 아주 멋지네요 ^0^
어디서 많이 본 에디터지 싶었는데, okky 에서 사용되고 있는 에디터네요...
반응형도 지원되고, 아주 멋지네요 ^0^
어디서 많이 본 에디터지 싶었는데, okky 에서 사용되고 있는 에디터네요...
@매생이님, summernote 가 기본적으로 html5 기능(canvas, blob) 을 이용해서 이미지를 생성하기 때문에 이미지 업로드 구현이 아직 없습니다 .
모바일에서도 구동되는게 좋네요
나눔고딕이나 돋움 같은 폰트를 따로 추가하고 싶은데 방법이 있을까요?ㅠㅠ
그누보드에 섬머노트 적용
혹시 이미지 원본 리사이징 기능이 되나요??
모바일기기에서는 안보이던데 다른 분들은 모바일에서 사용된다고 하시네요. 특별한 부분의 수정이 필요한가요?
익스 낮은버전은 지원 안되니 모바일에서만 적용하려 합니다.
어떻게 하는게 좋을까요?
어떻게 하는게 좋을까요?
모바일쪽 따로 설정하는건 없습니다. 키 입력할때 버그 때문에 실행하실 때 shortcut:false 해주시고 하시면 모바일에서도 정상적으로 입력하실 수 있습니다.
http://summernote.org/
여기 공식사이트 모바일에서도 잘 보이시는지 확인 한번 해주세요.
http://summernote.org/
여기 공식사이트 모바일에서도 잘 보이시는지 확인 한번 해주세요.
에디터
반응형 에디터 감사합니다.
감사 합니다
모두 적용 잘쓰고 있습니다
설정 0.88 최신 버전 까지 업데이트 마지막 칼라까지 되네요
참조) 저의 설치기 입니다.
http://11q.kr/g5s/bbs/board.php?bo_table=s11&wr_id=3100
문의)
한글 폰트 적용은 무엇을 해야 하는지 조언 좀 부탁 합니다
모두 적용 잘쓰고 있습니다
설정 0.88 최신 버전 까지 업데이트 마지막 칼라까지 되네요
참조) 저의 설치기 입니다.
http://11q.kr/g5s/bbs/board.php?bo_table=s11&wr_id=3100
문의)
한글 폰트 적용은 무엇을 해야 하는지 조언 좀 부탁 합니다
설치가 안되네요...다운받아서 풀면 js 파일등도 있던데 이것도 업로드 하나요
에디터를 적용했더니 에디터안에 또 에디터가 생깁니다. 어떻게해줘야 하나의 에디터만 사용할수있을까요 답변 좀 부탁드립니다. 감사합니다.
@신비나라 혹시 해결 하셨나요? 저도 같은 증상인데 원인을 못찾겠네요
감사합니다. ^^
사용해볼께요