개발
Froala Editor 이미지 매니저
18 views as of October 17, 2024.
Froala Editor는 직관적이고 다양한 기능을 제공하는 웹 기반 WYSIWYG 에디터예요.
이 에디터는 스크립트를 활용해서 내부 기능을 자유롭게 조율하거나 수정할 수 있어서, 사용자 목적에 맞는 맞춤형 에디터를 만들기 정말 좋아요.
하지만, 큰 단점이 있다면 유료라는 점과, 개발 문서가 친절하지 않다는 거예요.
물론 제 개인적인 의견일 수 있지만, 다른 도구들과 비교했을 때 필요한 정보를 찾기가 어렵고, 찾더라도 예제가 부족해서 응용하는 데 시간이 좀 걸릴 수 있어요.
그럼에도 불구하고 여러 포럼이나 GPT 같은 도구들을 통해 적용할 수 있는 예제는 쉽게 찾을 수 있고, Froala의 다양한 이벤트를 활용하면 에디터 커스터마이징이 무척 강력해져요.
주요 기능 및 설정
Froala Editor를 사용해보시려면 이 공식 데모 사이트에 가보세요. 다양한 기능을 직접 체험할 수 있어요. 에디터를 적용하는 것도 간단해서, 스타일 및 스크립트를 웹 페이지 헤더에 추가하고 FroalaEditor 객체를 초기화하면 바로 사용할 수 있어요.
이미지 매니저 기능
Froala Editor의 특징 중 하나는 이미지 매니저 기능이에요. 대부분의 에디터는 이미지 업로드 기능까지만 지원하는데, Froala는 이미지를 관리할 수 있는 기능까지 제공해요.
툴바에서 이미지 업로드 버튼을 누르고 “
Browse”를 선택하면 이미지 매니저 모달이 떠요. 여기서 업로드된 이미지를 불러와서 에디터에 다시 삽입하거나 삭제할 수 있어요.물론, 이 기능은 웹사이트의 백엔드와 잘 연동해야 제대로 작동해요.
이미지 매니저기능과 각종 이미지 관련 기능을 사용하기 위해서는 아래와 같은 파라미터와 이벤트 선언들이 필요해요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | new FroalaEditor(id, { ... imageUploadParam: 'file', imageUploadURL: '/editor/file/upload', imageUploadMethod: 'post', imageDefaultAlign: 'center', imageDefaultDisplay: 'block', imageMaxSize: 20 * 1024 * 1024, imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif', 'webp'], imageManagerPageSize: 20, imageManagerLoadURL: '/editor/file/load', imageManagerLoadMethod: 'post', imageManagerDeleteURL: '/editor/file/delete', imageManagerDeleteMethod: 'post', events: { 'imageManager.beforeDeleteImage': function ($img) { var imageUrl = $img.attr('src'); // Get the image URL var canDelete = false; // Variable to track if deletion is allowed // Make a synchronous AJAX request to check if the image is being used in any post $.ajax({ method: 'POST', url: '/editor/file/check', // Your Laravel route for checking image usage data: { src: imageUrl, _token: $('meta[name="csrf-token"]').attr('content') // Include CSRF token }, async: false, // Make this request synchronous success: function (response) { if (response.error) { // If image is used in a post, prevent deletion and show error alert(response.error); canDelete = false; // Do not allow deletion } else { // Allow the deletion if the image is not in use canDelete = true; // Set flag to allow deletion // Save the current scroll position of the image manager var imageManagerContainer = document.querySelector('.fr-modal .fr-modal-body'); window.imageManagerScrollTop = imageManagerContainer.scrollTop; // Save scroll position globally } }, error: function (jqXHR, textStatus, errorThrown) { alert('An error occurred: ' + textStatus); canDelete = false; // Do not allow deletion on error } }); // Return true if deletion is allowed, false otherwise return canDelete; }, 'imageManager.imageDeleted': function (data) { // alert ('Image has been deleted.'); // Restore the scroll position after the image is deleted setTimeout(function() { var imageManagerContainer = document.querySelector('.fr-modal .fr-modal-body'); if (window.imageManagerScrollTop !== undefined) { imageManagerContainer.scrollTop = window.imageManagerScrollTop; // Restore saved scroll position } }, 100); // Small delay to allow the UI to refresh }, } ... | cs |
이미지 매니저 관련 주요 설정은 다음 세 가지 URL을 설정하는 거예요:
1.
imageUploadURL: 이미지를 업로드하는 백엔드 URL 2.
imageManagerLoadURL: 이미지 리스트를 불러오는 URL 3.
imageManagerDeleteURL: 이미지를 삭제하는 URL또한,
imageManager.beforeDeleteImage와 imageManager.imageDeleted 같은 이벤트를 활용하면 이미지 삭제 시에 추가적인 로직을 구현할 수 있어요.예를 들어, 다른 게시물에서 사용 중인 이미지를 삭제할 수 없도록, 삭제 전에 이미지 사용 여부를 체크하는 로직을 추가할 수 있답니다.
저 같은 경우는
/editor/file/check API로 해당 이미지가 게시물에서 사용 중인지 확인한 후, 사용 중인 이미지는 삭제되지 않도록 로직을 추가했어요.그리고 이미지 매니저에서 스크롤 위치가 초기화되는 문제를 해결하기 위해, 스크롤 위치를 기억하고 삭제 후에 복구하는 기능도 구현했어요.
마무리
Froala Editor는 커스터마이징이 자유롭고 다양한 기능을 제공해요.
초반에는 설정과 이벤트에 익숙해지는 데 시간이 조금 걸릴 수 있지만, 익숙해지면 자신만의 고급 에디터 환경을 구축할 수 있답니다.
본 글은 내가 원고 쓰고 ChatGPT로 한 번 다음은 내용임. 어우 너무 어투가 간드러지는거 같음...