[공지] MD에디터 스킨 With 프로알라 사용 설명서
본문
MD에디터 스킨
With 프로알라 Editor
사용 설명서
- 기능 소개
- 사용 환경
- 라이선스 안내
- 설치 안내
- 커스텀 안내
- 오류 조치
1. 기능소개
웹사이트에 좀 더 글을 편하게 쓰기 위해 제작된 스킨 및 에디터입니다.
좀 더 전문적인 글 작성을 위해 '프로알라 에디터'를 추가로 포함 및 배포로 웹사이트에 방문하신 손님들이 장치 구분을 두지 않고 더욱더 편하게 글 작성이 가능한 스킨입니다.
1-1 프로알라 에디터란?
Web, Android, IOS에서 높은 호환성으로 홈페이지에 DHTML 작성이 가능한 에디터입니다.
1-2 기능 소개
- 에디터 반응형
- 이미지 멀티업로드
- 올린 이미지 에디터 기능
- 마크다운 기능
- 파일 업로드
- 댓글에 이미지 작성
- 이모지 추가
사용 환경
- 그누보드 5
- 영카트
- 이윰빌더
- 아미나/나리야
* 서버환경 *
- PHP 5.4버전 이상
- MYSQL을 사용하는 웹서버/호스팅
2. 라이선스 안내
프로알라 에디터는 유료 제품이며 구매 1개당 1개의 도메인에서만 사용이 가능한 표준 라이선스가 적용됩니다.
sir.kr 적용 시 sir.kr 하위 도메인까지 사용할 수 있습니다
구매하신 프로알라 에디터는 라이선스는 기업용이며,
본인이 운영하는 커뮤니티, 쇼핑몰 또는 납품제품에 사용할 수 있습니다.
기업용이 아닌 개인용 라이선스는 커뮤니티 용도로 사용하시면 라이선스 위반으로
본사에서 경고 및 라이선스 정지가 됩니다.
구매 후 라이선스 요청은 ‘오픈 카톡’으로 부탁드립니다.
3. 설치 안내
4-1. Sir에서 받은 ‘[24.**.**]MD 에디터 스킨.7z’ 파일을 열어주세요
4-2. 총 5개의 폴더와 1개의 PDF파일의 설명서가 존재합니다.
1. bbs
2. lib
3. plugin [Froala에디터 폴더]
4. skin [시연용 샘플 스킨 폴더]
5. vendor [Froala에디터 실행 전용JS 폴더]
4-3
<!------------------------------ 원본 덮어씌우기 주의 ------------------------->
( 아래 두 파일은 꼭 설치 할 필요는 없습니다. 필요하시면 진행해주세요 )
bbs폴더에 있는 view_image.php은 Froala에디터로 넣은 이미지 게시글의 원본보기 연결 파일입니다.
lib폴더에 있는 thumbnail.lib.php은 Froala에디터로 넣은 이미지 게시글의 썸네일 생성 파일입니다.
위에 파일은 덮어씌우기 전에 원본 백업 부탁드리며, 순정 파일이 아닐 경우 덮어씌우기가 아닌, 기존 파일에 코드 추가 방식으로 하는걸 추천드립니다.
<!------------------------------------------ 종료 ----------------------------------->
4-4. 3번, 4번, 5번, 폴더는 루트(www/)에 넣어주세요.
4-5. Froala에디터를 사용할 보드 스킨의 [기본]skin/board/view.php파일을 불러와주세요.
내용출력 코드 부모DIV에 class=“fr-view”를 추가해주세요
수정 전
<!-- 본문 내용 시작 { --> <div id="bo_v_con"> <?php echo get_view_thumbnail($view['content']); ?> </div> <!--} 본문 내용 끝 --> |
수정 후
<!-- 본문 내용 시작 { --> <div id="bo_v_con" class=“fr-view”> <?php echo get_view_thumbnail($view['content']); ?> </div> <!--} 본문 내용 끝 --> |
4-5. plugin/editor/froala_editor_4.1.4에 ‘Key.js’ 파일을 넣어주세요
Key.js파일은 에디터 라이선스 파일입니다.
Key.js파일은 판매자에게 받을 수 있습니다.
Key.js파일은 다른 도메인에서는 작동되지 않습니다.
4-6. '기본환경설정'에 '추가script, css' 항목에 아래 코드를 추가 해 주세요
<link href="/plugin/editor/froala_editor_4.1.4/css/froala_style.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="/plugin/editor/froala_editor_4.1.4/css/third_party/embedly.min.css"> <link rel="stylesheet" href="/plugin/editor/froala_editor_4.1.4/css/sir_custom.css"> |
4-7. 그누보드5 에디터 설정에서 froala_editor_4.1.4로 변경해주세요.
커스텀 안내
프로알라 에디터는 자유로운 커스텀을 지원합니다.
간단한 코드 추가/삭제로 커스텀이 가능하며, 그 외 기능 커스텀은 전문지식이 요구됩니다.
모든 설정은 froala_editor_4.1.4 폴더에 있는 Froala.js 파일에서 수정 가능합니다.
Froala.js 주석으로 기능설명이 기재되어있습니다.
원하시는 대로 기능 커스텀 해주시고 주석 외 커스텀을 더 원하시면 아래 주소로 접속해서 옵션을 확인해주세요.
링크 : https://froala.com/wysiwyg-editor/docs/options
5-1 회원등급별 에디터 메뉴
회원등급 또는 관리자만 사용하고 싶은 기능이 있으면 아래와 같이 진행해주세요
Froala.js 파일을 복사 후 ‘다른 이름’으로 저장한다.
‘다른 이름’으로 저장된 파일을 열어 설정을 변경한다.
froala_editor_4.1.4 폴더에 있는 editor.lib.php 파일을 열어서 52번 줄을 확인한다.
3. if 조건문을 사용해서 Froala.js를 불러와 주시면 끝
if ($is_dhtml_editor) { if($member[mb_level]==10) { $html .= "<script type=\"module\" src=\"{$editor_url}/Froala.js\"></script>"; } else { $html .= "<script type=\"module\" src=\"{$editor_url}/Froala.js\"></script>"; } }
|
|
5-2 폰트 추가
5-2-1. 운영중인 홈페이지에 설치되어 있는 웹 폰트 사용
Froala.js 열기
fontFamily: {
"gulim": '굴림',
"dotum": '돋움',
"Malgun Gothic": '맑은 고딕',
"Nanum Gothic": '나눔 고딕',
"Batang": '바탕',
"Gungsuh": '궁서'
},
에 폰트 추가 문구 입력하기
.끝
5-2-2. 에디터에서만 웹 폰트 추가
홈페이지의 메인 CSS 파일 열기
구글 웹 폰트를 CSS로 설치하기
https://fonts.google.com/?subset=korean¬o.script=Kore
Froala.js 열기
fontFamily: {
"gulim": '굴림',
"dotum": '돋움',
"Malgun Gothic": '맑은 고딕',
"Nanum Gothic": '나눔 고딕',
"Batang": '바탕',
"Gungsuh": '궁서'
},
에 폰트 추가 문구 입력하기
.끝
오류 조치
판매하면서 발생빈도가 높았던 위주로 준비했습니다.
Q : 글 작성 페이지 접속 시 하얀화면[about blank]이 출력됩니다.
A : 라이선스 파일이 잘못되거나, 구매시 작성한 도메인과 다른 도메인에서 사용하면 보이는 현상입니다.
판매자에게 문의해주세요.
Q : 이미지 업로드 되지 않습니다.
A : 1. Froala.js가 로드되어있는지 확인해주세요
2. data폴더에 froala 폴더가 생성되어있는지 확인해주세요
3. 에디터 폴더명을 임의로 변경하셨으면 원상태로 되돌려주세요
4. mysql 및 서버환경 확인해주세요
Q : 영상을 삽입했는데 "귀하의 브라우저는 html5 video를 지원하지 않습니다." 라고 표시됩니다
A : 해당 부분은 그누보드5 htmlpurifier 에서 video 태그를 막아서 그렇습니다. 아래 링크를 보고 수정해주세요
Q : 멀티업로드로 이미지를 넣을 경우 역순으로 삽입됩니다
A : 이번 패치로 수정되었습니다.
Q : Froala.js 코드를 수정했는데 갱신되지 않습니다
A : JS파일은 캐쉬로 저장되기 때문에 수정해도 바로 보이지 않습니다. PC 브라우저는 ‘컨트롤+F5’로 완전 새로고침 해주시고, 스마트폰은 브라우저앱에서 캐시 삭제를 해주셔야 합니다.
그 외
기능 설명 및 추가 사항은
http://moonbean.pe.kr에서 확인 가능합니다
구매해주셔서 감사합니다
댓글목록0