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);
}
...
}
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 26개
그누스트랩에는 무난히 쓸 수 있을까요?
그누보드 원본에 적용했더니... 'bootstrap.min.css' 영향을 많이 받아... 틀어지는 부분들이 있네요.
써보겠습니다
부트스트랩을 적용한 사이트에서는 부딪치는 부분들이 거의 없네요. "editor.lib.php에서 사용하지 않는(중복된) css"를 몇개 제거하니 완벽...
어떤건지 궁금하네요
참고하세요.
반응형도 지원되고, 아주 멋지네요 ^0^
어디서 많이 본 에디터지 싶었는데, okky 에서 사용되고 있는 에디터네요...
어떻게 하는게 좋을까요?
http://summernote.org/
여기 공식사이트 모바일에서도 잘 보이시는지 확인 한번 해주세요.
저도 모바일기기에서는 안보이던데~ 혹시 shortcut:false는 어디서 하는건가요~?
모두 적용 잘쓰고 있습니다
설정 0.88 최신 버전 까지 업데이트 마지막 칼라까지 되네요
참조) 저의 설치기 입니다.
http://11q.kr/g5s/bbs/board.php?bo_table=s11&wr_id=3100
문의)
한글 폰트 적용은 무엇을 해야 하는지 조언 좀 부탁 합니다
[http://sir.kr/data/editor/1910/eb2f4ede392256baf837d35726fb8294_1571292147_2671.jpg]