크롬80버전 결제 이슈, 영카트5 주요패치 확인!

그누보드 5.4용 프로알라 에디터 > 그누보드5 플러그인

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 플러그인

그누보드는 여러가지 기능을 추가하기 쉽도록 제작 되었습니다.
플러그인 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

그누보드 5.4용 프로알라 에디터 정보

그누보드 5.4용 프로알라 에디터

첨부파일

첨부파일 froala-gnuboard54-1.0.2.zip (34.6K) 14회 다운로드 2020-06-01 02:22:16 포인트 차감500
테스트한 버전5.4.2.5
호환 가능 버전5.4

본문

프로알라 (Froala Editor 3.1) 그누보드 플러그인 설치 가이드

1. 프로알라 Editor 소개

  • 프로알라 에디터는 위지윅(wisiwyg)을 구현한 에디터입니다. 웹에서 깔끔하고 심플한 UI를 제공하며, javascript를 이용한 커스트마이징과, 서드파티 플러그인을 제작 가능하게 해줍니다.
  • 프로알라 에디터는 유료입니다. https://froala.com/wysiwyg-editor/pricing/ 에서 구매 가능합니다. 1개 도메인에서 사용가능한 최소 가격은 $239 입니다.
  • 7일동안 사용할수 있는 Trial을 제공합니다.(이 버전을 설치해도 경고 문구는 표시됩니다.)
  • 단점 : 3.1 버전에서는 drag and drop을 통해 여러 파일을 업로드 할 수 없습니다.

2. 이 플러그인에 대해

  • 그누보드에서 프로알라 에디터를 사용 하려면 추가 코드가 필요합니다. 이 플러그인은 초보자도 쉽게 프로알라 에디터를 사용할수 있도록 구현되어 있습니다.

  • 그누보드에서 변경해야 하는 부분을 최소화하였습니다. 설치후 에디터가 마음에 들면 정식버전 구매후 사용하시고, 반대 경우면, 기존 에디터 설정으로 변경하면 됩니다.(기존 코드는 영향 없음)

  • 프로알라 에디터 3.1의 기본 코드를 수정하지 않았습니다. (cdn 으로 배포되는 pkgd css, js 사용)

  • Toolbar 는 제공된 코드를 수정하여 변경 가능합니다.(editor.lib.php 파일내 froala 데이터의 options 를 수정하세요.)

  • 그누보드의 자동저장 기능이 제대로 동작합니다.

  • 프로알라 에디터의 css와 js파일을 커스트마이징할 경우 소스 파일을 다운받아 적용하여야 합니다.

    미구현 기능
    • 파일 업로드가 PHP Imagick 플러그인에서 동작되도록 되어 있습니다. 이를 GD에서 동작하도록 변경하였습니다. Imagick에서 동작하는 bestfit(최적 썸네일 생성) 기능이 미구현 상태입니다.
    • 그누보드 관리자에서 상세 설정 기능이 없습니다.(가령, 업로드 최대 사이즈 설정등)

2. 파일 구성

├── mobile   #모바일 예제 파일
│   └── skin
│       └── board
│           ├── basic
│           │   └── view.skin.php
│           └── gallery
│               └── view.skin.php
├── plugin  
│   └── editor
│       └── froala #프로알라 에디터 
│           ├── uploader #업로드 기능
│           │   ├── lib
│           │   │   ├── FroalaEditor
│           │   │   │   ├── Utils
│           │   │   │   │   ├── DiskManagement.php
│           │   │   │   │   ├── GDImage.php
│           │   │   │   │   └── Utils.php
│           │   │   │   ├── File.php
│           │   │   │   ├── Image.php
│           │   │   │   ├── S3.php
│           │   │   │   └── Video.php
│           │   │   ├── autoload.php
│           │   │   └── FroalaEditor.php
│           │   ├── _common.php
│           │   └── upload_image.php
│           ├── autosave.editor.js #그누보드 자동저장 기능
│           └── editor.lib.php  #그누보드 에디터용 lib 파일
├── skin
│   └── board
│       ├── basic
│       │   └── view.skin.php
│       └── gallery
│           └── view.skin.php
├── install_guide.txt #설치 가이드 문서
├── LICENSE.txt #라이센스 관련 설명
└── README.md 

3. 플러그인 설치

압축된 파일에서 plugin/editor/froala를 기존 그누보드가 설치된 editor에 업로드 합니다.

skin 폴더와, mobile 폴더는 기본스킨에 프로알라를 적용한 에제입니다. 소스를 직접 수정해도 되니, 필요하신 분만 업로드 하세요.

4. 플러그인 설정

  • plugin/editor/froala/editor.lib.php 파일을 열어서 프로알라 라이센스 key를 입력하세요. (key가 없는 경우 테스트 용도로만 사용하세요. 라이센스 key는 프로알라에서 구매시 이메일로 전송됩니다.)

    if (defined('FROALA_EDITOR_LICENSE_KEY')) {
        $FROALA_EDITOR_LICENSE_KEY = FROALA_EDITOR_LICENSE_KEY;
    } else {
        $FROALA_EDITOR_LICENSE_KEY = ""; //fixme 발급 받은 라이센스 키를 입력하세요.
    }
    
  • 관리자->기본설정->editor 설정에서 froala로 변경합니다. screenshot

  • 에디터를 사용할 게시판의 dhtml 사용여부를 체크 합니다.

  • view.skin.php 을 다음과 같이 수정합니다. (압축파일내 포함된 파일은 아래 사항들이 적용되어 있으니, 참고하세요.)

    상단 부분에 아래 내용 추가
    
    	
    //프로알라(froala 3.1) 에디터용 css 추가
    //본문 시작 영영에 fr-view 클래스 추가 (div id=bo_v_con 에 추가합니다.)
    add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css">', 10);
    
    	게시판 본문 보기 부분을 아래와 같이 변경(fr-view class 를 추가합니다.)
    
    	
    <!-- 본문 내용 시작 { -->
    <div id="bo_v_con" class="fr-view"><?php echo get_view_thumbnail($view['content']); ?></div>
    <?php //echo $view['rich_content']; //  과 같은 코드를 사용할 경우 ?>
    <!-- } 본문 내용 끝 -->
    
  • 5. 트러블 슈팅과 그외

    • 설치는 했는데, 에디터 상단에 빨간색으로 라인이 표시됩니다. Imgur

      프로알라 에디터의 라이센스가 없는 경우 표시됩니다. 프로알라 사이트에서 정식 버전을 구매후 key를 입력하시면 정상적으로 사용할수 있습니다. froala pricing

    • Powered by Froala Editor 라는 문구가 입력되거나 표시됩니다.

      정식 버전이 아닌 트라이벌 버전인 경우, 에디터에서 자동으로 입력되는 문구입니다. 정식 버전에서는 자동 입력되지 않습니다.

    • 에디터 화면을 변경할수 있나요? 프로알라 에디터 커스텀에 대해 알고 싶습니다.

      프로알라 에디터는 강력한 커스텀기능을 제공합니다. 현재 제공되는 화면은 가장 보편적인 화면입니다. 에디터의 커스텀은 프로알라 사이트에서 다양한 예제를 통해서 학습하실수 있습니다.

    • 프로알라 에디터가 한국어를 지원하나요?

      에디터 옵션에 language를 ko로 적용하면, 버튼의 설명이 한글로 표시됩니다. 현재 cdn의 js 싱글 파일은 language 를 포함하여 패키징 하지 않은것 같습니다. 이 문제는 프로알라 에디터를 수동으로 다운 받은뒤, js/languages/ko.js 을 포함하시면 됩니다.

    • 에디터에서 업로드된 이미지의 썸네일이 조금 이상한것 같아요.

      프로알라 에디터의 이미지 업로더의 샘플파일은 PHP imagick을 기본을 하고 있습니다. PHP GD으로 기능을 변환하면서 누락된 부분이며, 추후 개선할 예정입니다.

    • 이미지 멀티 업로드가 동작하지 않습니다.

      프로알라 에디터 3.x 은 아직 멀티 업로드가 지원되지 않습니다. 멀티 업로드가 꼭 필요한 경우라면, 2.x버전을 사용하셔야 합니다. 2.x 버전에서도 멀티 업로드는 공식 지원이 아니며, 커스텀한 플러그인에서 제공됩니다. github

    • 유튜브 동영상 링크를 첨부하였을때, 편집화면에서는 정상이지만 보기 화면에서는 깨진 이미지가 출력됩니다.

      이 문제는 프로알라 에디터와, 그누보드에서 상요중인 HTMLPurifier 간의 호환성 문제로 발생됩니다. 이 문제를 해결하는 쉬운 방법은 php-xml 라이브러리를 설치하는 것입니다. (좀 더 자세한 원인은 php-xml 이 로딩되지 않는 경우 DirectLex 를 사용할때 이 문제가 발생합니다.)

추천6

댓글 전체

전체 338
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT