프로알라 (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로 변경합니다. 

• 에디터를 사용할 게시판의 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. 트러블 슈팅과 그외

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

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

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

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

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

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

  • All Demos https://froala.com/wysiwyg-editor/examples/
  • API Docs https://froala.com/wysiwyg-editor/docs/overview/

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

  에디터 옵션에 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  클래스를 강제로 지우고, 다시 추가하는 방식으로 처리하는걸 권장합니다.