NAVER SMART Editor for Laravel

NAVER SMART Editor for Laravel updated_at: 2024-07-02 18:08

라라벨에디터

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

Installation

composer require wangta69/laravel-editor
php artisan vendor:publish --provider="Pondol\Editor\EditorServiceProvider"

2. 이미지등을 저장할 storage를 만든다.

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

php artisan storage:link

3. 설치확인

브라우저에 https://yourdomain/editor/smart-editor 를 입력하면 smart Editor가 열립니다.

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

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

원소스

@section('content')
  <form>
    title:  <input name="title">
    comment: <textarea name="comment"></textarea>
    <button type="submit">Write</button>
  </form>
@endsection

적용된 이후의 소스

@section('content')
  <form>
    title:  <input name="title">
    comment: <textarea name="comment" id="comment"></textarea> <!-- id 값 적용 -->
    <button type="button" onclick="submitContents(this);">Write</button>
     <!-- onclick 시 아래 정의된 submitContents()  호출 -->
  </form>
@endsection

@section('scripts')
  @parent
	{{ Html::script('/plugins/editor/smart-editor/js/service/HuskyEZCreator.js') }}
<script>
  var oEditors = [];
  nhn.husky.EZCreator.createInIFrame({
    oAppRef: oEditors,
    elPlaceHolder: "comment", // 적용될 textarea 의 ID값 입력
    sSkinURI: "/plugins/editor/smart-editor/SmartEditor2Skin.html",
    fCreator: "createSEditor2"
  });

  function submitContents(elClickedObj) {
    oEditors.getById["descriptions"].exec("UPDATE_CONTENTS_FIELD", []);	
    try {
      elClickedObj.form.submit();
    } catch(e) {}
  }
</script>
@endsection
평점을 남겨주세요
평점 : 5.0
총 투표수 : 1