라라벨 에디터

라라벨 에디터 (Wizwig Editor for Laravel)

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

Installation

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

Configure

config/pondol-editor 에서 default-template 값을 변경하시면 원하시는 에디터로 적용됩니다.

Templates

richtext : RichText Editor (default)
tinymce : TinyMce
smart-editor : Naver Smart Editor
froala: Froala Editor

Tests

세팅이 완료된 후 서비스가능한 Templates 을 입력하시면 세팅을 확인 하실 수 있습니다.

https://yourdomain/editor/[templates]
https://yourdomain/editor/smart-editor // Naver Smart Editor 적용시

Ex

before

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

after

<form>
  @include ('editor::default', ['name'=>'comment', 'id'=>'comment-id', 'value'=>'', 'attr'=>['class'=>'']])
  <button type="submit">Save</button>
</form>

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

다른 Templates 사용하기

configure에 설정된 template외에 다른 것을 사용하고 싶다면 아래처럼 처리하시면 됩니다.

TinyMce 적용예

<form>
  @include ('editor::tinymce.editor', ['name'=>'comment', 'id'=>'comment-id', 'value'=>'', 'attr'=>['class'=>'']])
  <button type="submit">Save</button>
</form>

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

multi (여러개를 처리)

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

template : (optional) 만약 특정 template을 사용하려면 Templates 중 하나(richtext, tinymce..)를 선택하시면 됩니다.
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>

Naver Smart Editor

네이버 스마트 에디터를 사용하시려면 submit 시 아래 두가지 방법을 제공합니다.

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;
}

Facades

Pondol\Editor\Facades\Editor

extractBase64Image

입력된 텍스트($str) 에 포함된 base64 이미지를 $destination_dir 로 이동시키고 텍스트 중 bbase64 이미지를 $destination_public_url 경로로 치환하여 리턴한다.

Editor::extractBase64Image($str, $destination_dir, $destination_public_url);