개발

Froala Editor 이미지 매니저

106 views as of October 17, 2024.

주요 기능 및 설정
이미지 매니저 기능
마무리

Froala Editor는 직관적이고 다양한 기능을 제공하는 웹 기반 WYSIWYG 에디터예요.

이 에디터는 스크립트를 활용해서 내부 기능을 자유롭게 조율하거나 수정할 수 있어서, 사용자 목적에 맞는 맞춤형 에디터를 만들기 정말 좋아요.

하지만, 큰 단점이 있다면 유료라는 점과, 개발 문서가 친절하지 않다는 거예요.

물론 제 개인적인 의견일 수 있지만, 다른 도구들과 비교했을 때 필요한 정보를 찾기가 어렵고, 찾더라도 예제가 부족해서 응용하는 데 시간이 좀 걸릴 수 있어요.

그럼에도 불구하고 여러 포럼이나 GPT 같은 도구들을 통해 적용할 수 있는 예제는 쉽게 찾을 수 있고, Froala의 다양한 이벤트를 활용하면 에디터 커스터마이징이 무척 강력해져요.

주요 기능 및 설정

Froala Editor를 사용해보시려면 이 공식 데모 사이트에 가보세요. 다양한 기능을 직접 체험할 수 있어요. 에디터를 적용하는 것도 간단해서, 스타일 및 스크립트를 웹 페이지 헤더에 추가하고 FroalaEditor 객체를 초기화하면 바로 사용할 수 있어요.

이미지 매니저 기능

Froala Editor의 특징 중 하나는 이미지 매니저 기능이에요. 대부분의 에디터는 이미지 업로드 기능까지만 지원하는데, Froala는 이미지를 관리할 수 있는 기능까지 제공해요.

툴바에서 이미지 업로드 버튼을 누르고 “Browse”를 선택하면 이미지 매니저 모달이 떠요. 여기서 업로드된 이미지를 불러와서 에디터에 다시 삽입하거나 삭제할 수 있어요.

물론, 이 기능은 웹사이트의 백엔드와 잘 연동해야 제대로 작동해요.

이미지 매니저기능과 각종 이미지 관련 기능을 사용하기 위해서는 아래와 같은 파라미터와 이벤트 선언들이 필요해요.

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
        },
    }
 
    ...Copy