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

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

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

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

첨부파일

froala-gnuboard54-1.0.2.zip (34.6K) 82회 다운로드 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 를 사용할때 이 문제가 발생합니다. html에 class가 중복으로 있는 경우 제대로 처리 못함.)

       php-xml 설치가 어려운 경우에, 간단하게 extend.video.php 에서 유튜브를 주석처리하여 해결 가능합니다만, 보안상 위험합니다.

      소스에서  fr-dragable  클래스를 강제로 지우고, 다시 추가하는 방식으로 처리하는걸 권장합니다.

추천
6

댓글 전체

이건 그냥 테스트로만 봐주시구요.
컨텐츠몰에서 마인드핵님이 판매중인 솔루션이 있으니, 그걸 구매하시는게 좋을것 같네요.
https://sir.kr/cmall/1596418856
궁금한게 있는데용
if (defined('FROALA_EDITOR_LICENSE_KEY')) {
    $FROALA_EDITOR_LICENSE_KEY = FROALA_EDITOR_LICENSE_KEY;
} else {
    $FROALA_EDITOR_LICENSE_KEY = ""; //fixme 발급 받은 라이센스 키를 입력하세요.
}

플로그인에 발급받은 라이센스키 쓰면 코드에 노출되어버리는데 다른방법이 없나요?
이건 저도 잘 모르겠네요. 가이드 문서에 그렇게 되어 있어서. 사용경험상 도메인이 활성화되어 에디터에 라이센스 경고 부분이  사라지면 그 다음부턴 안 넣어도 되더라구요.

프로알라 서버쪽에 이런걸 체크하는게 아닐까합니다.
안녕하세요, 이 버전은 php 5.3 버전에서도 동작할까요?
마인드핵님 소스로 구매했는데.. 5.3에서 돌아가게 해보려고 해봤지만 역부족이네요 ㅜㅜ
답변 감사합니다, 5.3을 7.x로 변경하고자 했었으나 그누보드도 5.1.1버전에 커스텀된 부분이 워낙 많아 아예 새로 만드는게 낫다고 작업을 못하신다고 하더라고요..ㅜ.ㅜ 비용이 너무 많이 들어 현재 5.3 형태에서 조금씩 업글하는 쪽으로 가고 있습니다..
위의 소스중 PHP 관련 부분은 파일 업로드를 처리하는 부분입니다.
프로알라 원본에는 composer를 사용하는데, 굳이 composer 를 쓸 필요가 없어서 해당 코드 부분을 그누보드에 맞춰서 수정을 해두었습니다.

프로알라에서 이미지 업로드후에 크롭이나 회전이 가능한데, 이 기능을 imagick을 사용하여 처리합니다. 그누보드는 gd를 기본 이미지 라이브러리로 사용합니다.

1. php5.3  에 imagemagick 을 설치하여  php imagick을  연동하거나
2. 위의 코드에서 imagick 부분을 gd로 변경(또는 이미지 변형 기능이 필요없다면 삭제)

둘중에서 편한방법(후자가 조금 편할듯)으로 진행하시면 됩니다.
안녕하세요. 감사합니다. 한가지 질문이 있는데요
컨텐츠몰의 마인드핵님 솔루션과 안내해주신 버전은 어떤 차이점이 있는지요?
https://sir.kr/cmall/1596418856
안녕하세요! 솔그루님 써주신거 잘보고 있습니다!

제가 프로알라를 구입해서 쓰고 있는데 고민이 하나 생겼어요.

비디오파일 업로드시
<p>
<span class="fr-video fr-dvb fr-draggable">
<video class="fr-draggable" controls="" src="/data/froala/23.08/영상이름.mp4"></video>
</span>
</p>
이런식으로 span 클래스가 video영역을 감싸면서 처리되야하는데..


<p><span class="fr-video fr-dvb fr-draggable"></span></p>
<video class="fr-draggable" controls="" src="/data/froala/23.08/영상이름.mp4"></video>

p태그가 따로 놀아서...

혹시 이런문제점에 대해 어떤 조언해주실것이 있으신가 해서 여쭤봅니다~
저장할때 문제인가요? 아니면, 에디터에 삽입된 편집하면에서 문제인가요?
저장할때 문제는 보통 그누보드에 포함된 html purifier 가 강제로 안전한(?) 태그로 변환하기 때문에 틀어지는 경우가 있습니다.
앗 감사합니다
저장한후의 문제입니다
그게 htmk purifier 영향력이 있었군요  괜시리 attr이 잘못붙은건지 스크립트만 휘젓고 다녔는데 ㅠㅠ
그런 연유가 있었군요 감사합니다
html purifier  가 태그를 완전히 해체한뒤에, 하나씩  태그 속성값들이 안전한지 검증하고, 다시 재조합하는 로직으로 동작합니다.
재조합하는 오동작하여 발생하는 문제인것 같네요. 해당 기능을 빼버리거나(비추) 사이트에 맞게 수정하시면 됩니다.
전체 503
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT