라라벨에디터

라라벨에디터는 naver smart editor를 라라벨에 적용한 package입니다.

github

Installation

v8.2 이상

8.2 이상부터는 artisan editor:install 명령을 이용하여 설치를 진행한다.

composer require wangta69/laravel-editor
php artisan pondol:install-editor

v8.2 미만

composer require wangta69/laravel-editor

storage softlink

아래와 같이 걸어두면 /project/public/storage 의 내용들이 /project/storage/app/public 으로 심볼릭 링크로 된다.

php artisan storage:link

기본 파일들을 publish 한다.

php artisan vendor:publish --provider="Pondol\Editor\EditorServiceProvider"

설치확인

브라우저에 https://yourdomain/editor/smart-editor 를 입력하면 smart Editor가 열립니다.
naver smart editor 가 열리면 인스톨이 정상적으로 이루어 진것 입니다. 샘플 url

기존 프로젝트에 Smart-Editor 사용하기

single - submit

naver smart editor 가 정상적으로 노출되는 것을 확인했다면 이제 실제 프로제트에서 editor를 호출하여 작업해 보자

아래와 같이 comment 라는 textarea가 있으면

<form>
  <textarea name="comment"></textarea>
  <button type="submit">전송</button>
</form>

아래처럼 적용을 하면 됩니다.

 @include ('editor::smart-editor.editor', ['name'=>'comment', 'id'=>'comment-id', 'value'=>'', 'attr'=>['class'=>'']])

• name : textarea name과 동일하게 설정 (필수값)
• id : 아이디 (필수값)
• value : 기본값이나 수정시 기존 값등을 입력
• attr : 다양한 attr 입력가능(class, style, 사용자 정의 attr......)

submit버튼을 클릭할 경우 자동으로 처리되게 되어 있으므로 상기 태그들은 form으로 감싸줘야 합니다.

multi (여러개를 처리)

여러개의 editor를 동시에 처리할 경우 @include 대신에 components를 사용합니다.
name, id, value, attr 는 @include를 사용할 때와 동일하나 type 설정이 중요합니다.

• type

  • start : 여러개중 처음 editor 시
  • end : 여러개중 마지막 editor 시
  • 중간에 있는 것은 아무것도 넣지 않으면 됩니다.
  • single: 하나의 editor 만 적용할 경우 ( @include ('editor::smart-editor.editor') 와 동일)

• onsubmit: true 시 submit와 동시에 처리, 함수실행후처리할 경우 아래 "전송 방식" 참조

수정전 소스

<form>
  <textarea name="desc1"></textarea>
  <textarea name="desc2"></textarea>
  <button type="button">전송</button>
</form>

<form>
  <x-editor-components 
  name="desc1" 
  id="desc1" 
  :value=$desc1 
  :attr="['class'=>'form-control']"
  type="start" />

   <x-editor-components 
    name="desc2" 
    id="desc2" 
    :value=$desc2 
    :attr="['class'=>'form-control']"
    type="end"/>
  <button type="button">전송</button>
</form>

전송 방식

현재는 두가지 방식을 제공해 드리고 있습니다.

updateContentsField

전송전 editor의 값을 실제 textarea에 넣어 주기만 합니다.

<form name="submitform" onsubmit="return formcheck()">
  ..........
  <button type="submit">전송</button>
</form>

<script>
function formcheck() {
  updateContentsField(); // editor값을 실제 textarea넣음
  return true;
}
</script>

submitContentsField

editor의 값을 실제 textarea에 넣고 submit 기능도 함께 제공합니다.

<form name="submitform">
..........
  <button type="button" onclick="formcheck()">전송</button>
</form>

<script>
function formcheck() {
  submitContentsField($(form[name=submitform])); // editor값을 실제 textarea넣은 후 입력된 폼값을 submit 시킴
}
</script>

Tip

실제 저장경로는 storage/tmp/editor/세션/파일 에 저장이 됩니다.
따라서 현재 파일들을 다른 곳에 저장 하고 싶은 경우 텍스트를 저장할때 아래와 같은 방식으로 처리하시면 이후 파일을 관리하시는 데 도움이 될 것입니다.

private function contents_update($text) {
  $sourceDir = storage_path() .'/app/public/tmp/editor/'. session()->getId(); // 현재 editor 저장 경로 
  $destinationDir = storage_path() .'/app/public/items/editor'; // 원하는 저장 경로 

  // $text의 내용에 포함된 img src 경로를 '원하는 저장 경로' 로 변경
  $new_text = str_replace('/storage/tmp/editor/'.session()->getId(), '/storage/items/editor', $text);

  // 현재 이미지 저장 경로를 원하는 저장경로로 copy
  $success = File::copyDirectory($sourceDir, $destinationDir);
  // 현재 이미지들을 삭제
  Storage::deleteDirectory('public/tmp/editor/'. session()->getId());

  return $new_text;
}