admin_hura_8/template/javascript/product_form.html

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ 'RowExpand.js' | asset_url }}"></script>

<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
    rel="stylesheet" />

<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>


<script>
    // Quan trọng: đăng ký plugin
    FilePond.registerPlugin(FilePondPluginImagePreview);

    function initCustomFilePond(buttonSelector, previewSelector, inputSelector, options = {}) {
        const button = document.querySelector(buttonSelector);
        const preview = document.querySelector(previewSelector);
        const input = document.querySelector(inputSelector);

        // Ẩn ban đầu nhưng không dùng display:none
        preview.style.opacity = "0";
        preview.style.transition = "0.2s";

        // Tạo FilePond instance
        const pond = FilePond.create(input, {
            allowMultiple: true,
            allowImagePreview: true,
            instantUpload: true,
            credits: false,
            labelIdle: "",
            ...options
        });

        // Đưa UI FilePond vào container preview
        preview.appendChild(pond.element);

        // Nút bấm → mở chọn file
        button.addEventListener("click", () => input.click());

        // Khi thêm file → show preview
        pond.on("addfile", () => {
            preview.style.opacity = "1";
        });

        // Khi xoá hết file → ẩn
        pond.on("removefile", () => {
            if (pond.getFiles().length === 0) {
                preview.style.opacity = "0";
            }
        });

        return pond;
    }

    // Gọi function
    initCustomFilePond(
        "#btnUploadImg",
        "#image-preview-filepond",
        "#hidden-filepond-input"
    );



    tinymce.init({
        selector: 'textarea#product-desc',
        height: 350,
        menubar: true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    });


    tinymce.init({
        selector: 'textarea#product-static',
        height: 350,
        menubar: true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
    });


</script>