NAVER SMART Editor for Laravel
라라벨에디터
라라벨에디터는 naver smart editor를 라라벨에 적용한 package입니다.
v8.x
Installation
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;
}