Cara Menambah Keupayaan Penyuntingan Imej pada Editor WYSIWYG Anda-tutorial js-php.cn

Suntingan imej ialah ciri yang berkuasa untuk setiap editor WYSIWYG. Ia meningkatkan keupayaan aplikasi dengan ketara dan menggembirakan pengguna yang ingin melakukan lebih banyak lagi dengan imej yang dimuat naik mereka.

Kini, pengguna menjangkakan aplikasi mempunyai ciri penyuntingan imej, tetapi melaksanakan ciri tersebut bukanlah sepele seperti yang didengari.

Sebagai contoh, dalam sesetengah sistem pengurusan LMS, CMS dan dokumen, pengguna memerlukan pengeditan imej dalam editor HTML WYSIWYG.

Memuat naik imej dan media lain mungkin merupakan ciri biasa yang perlu dimiliki oleh editor, tetapi pengeditan imej biasanya tidak begitu. Itulah sebabnya dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana anda boleh melaksanakan keupayaan penyuntingan imej dalam editor anda. Kami akan meneroka pemangkasan imej, penapis, menambah teks dan banyak lagi.

Pengambilan Utama

Gunakan transformasi imej Filestack terbina dalam Froala untuk menambahkan penyuntingan imej dengan mudah.
Sesuaikan pilihan Filestack untuk mempunyai lebih kawalan ke atas muat naik dan pengeditan imej.
Kendalikan acara Froala untuk melakukan tindakan apabila pengguna berinteraksi dengan Filestack.
Sediakan editor WYSIWYG dalam beberapa saat dan dengan beberapa baris.
Jimatkan banyak masa dengan menyepadukan editor dengan penyuntingan imej terbina dalam.

Menyediakan Editor WYSIWYG

Sebelum kita mula menyunting imej, kita memerlukan editor WYSIWYG terlebih dahulu. Untuk melakukan ini, sertakan fail Editor Froala dalam aplikasi anda walau bagaimanapun anda mahu (kami menggunakan CDN dalam aplikasi ini). Dan kemudian, kami memulakan editor di dalam elemen div dengan id "froala-editor:"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Image Editing with Froala and Filestack</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
</head>

<body>
    <div>



<p>On your JS file, add the following line of code:<br>
</p>

<pre class="brush:php;toolbar:false">new FroalaEditor('#froala-editor');

Salin selepas log masuk

Apabila anda menjalankan aplikasi web anda, anda sepatutnya melihat skrin berikut:

How to Add Image Editing Capabilities to Your WYSIWYG Editor

Setelah kami menjalankan editor kami, kami akan menambah ciri penyuntingan imej dengan mendayakan pemalam Filestack bersepadu asli. Kami melakukannya dengan menyatakan pilihan untuk editor:

new FroalaEditor('#froala-editor',{
    filestackOptions: {
        filestackAPI: 'YourFilestackAPIKey',
        uploadToFilestackOnly: true,
        pickerOptions: {
            accept: [
                '.pdf',
                'image/jpeg',
                'image/png',
                'image/*',
                'video/*',
                'audio/*'
            ],
            fromSources: [
                'local_file_system',
                'url',
                'facebook',
                'instagram'
            ]
        }
    },
    toolbarButtons: {
        'moreRich': {
            'buttons': ['openFilePickerImageOnly', 'openFilePickerVideoOnly', 'openFilePicker', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
            'buttonsVisible': 3
        },
        'moreText': {
            'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']
        },
        'moreParagraph': {
            'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
        },
        'moreMisc': {
            'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
            'align': 'right',
            'buttonsVisible': 2
        }
    },
    events: {
        'filestack.uploadedToFilestack': function (response) {
            console.log("Callback is triggered for upload to Filestack ",)
        },
        'filestack.filestackPickerOpened': function (response) {
            console.log("Callback is triggered for picker opened ",)
        },
        'filestack.filestackPickerClosed': function (response) {
            console.log("Callback is triggered for picker closed ",)
        },
        'filestack.uploadFailedToFilestack': function (response) {
            console.log(response);
        },
    },
    heightMin: 500,
    heightMax: 1000
});

Salin selepas log masuk

Di sini, kami mengisytiharkan beberapa pilihan untuk butang bar alat editor, saiz, acara dan pilihan tambahan untuk Filestack. Dalam harta filestackOptions, kami mengisytiharkan kunci API Filestack kami, boolean yang menentukan sama ada fail dimuat naik secara eksklusif ke Filestack dan beberapa pilihan pemilih. Pilihan ini menentukan jenis dan sumber fail yang dibenarkan.

Dan jika anda belum melakukannya, dapatkan kunci API dengan membuat akaun Filestack percuma. Selepas menetapkan Froala dan Filestack, kami sudah selesai! Anda kini boleh menggunakan editor WYSIWYG lanjutan dengan ciri penyuntingan imej dalam aplikasi anda. Selain itu, berikut ialah cara editor seharusnya muncul sekarang:

How to Add Image Editing Capabilities to Your WYSIWYG Editor

Perhatikan bagaimana editor kini mempunyai saiz yang lebih baik. Lebih penting lagi, kami kini mempunyai butang dengan ikon Filestack di dalamnya. Butang ini membolehkan pengguna memuat naik imej, video dan fail lain melalui Filestack. Sekarang, untuk menunjukkan kepada anda beberapa keupayaan pemalam Filestack, mari kita selami beberapa kes penggunaan penyuntingan imej.

Kes Penggunaan untuk Penyuntingan Imej dalam Editor WYSIWYG

Memotong Imej

Selepas memuat naik imej, klik padanya dan ikon Filestack akan muncul di sebelahnya. Klik ikon untuk memasuki paparan transformasi fail. Di bawah tab "Transform", pilih "Pangkas" dan laraskan imej mengikut keinginan anda. Ambil perhatian bahawa anda boleh memangkas dan memutar imej walaupun sebelum anda memuat naiknya. Mari muat naik imej dan memangkasnya selepas itu menggunakan transformasi Filestack.

How to Add Image Editing Capabilities to Your WYSIWYG Editor

Beginilah rupa pemangkasan imej menggunakan Filestack. Anda boleh memilih daripada pilihan pemangkasan yang berbeza, termasuk bentuk bebas, bulatan, segi empat sama dan 16:9, yang kami gunakan di sini. Apabila anda selesai memangkas, klik butang semak dan tekan "Simpan."

Memohon Penapis

Penapis telah menjadi bahagian penting dalam setiap apl yang mengendalikan imej. Dengan Filestack dan Froala, anda boleh mencapainya dengan mengklik pada ikon Filestack di sebelah imej yang dimuat naik dan pergi ke tab "Penapis". Dari sana, anda boleh memilih daripada banyak penapis imej, seperti Polaroid, Sepia, Skala Kelabu dan banyak lagi. Sekarang, mari gunakan penapis pada imej kami yang dipangkas.

How to Add Image Editing Capabilities to Your WYSIWYG Editor

Menambah dan Mempertingkatkan Teks

Sama ada untuk menambahkan tajuk pada tajuk bab atau harga pada produk atau penyenaraian hartanah, teks adalah penting untuk penyuntingan imej. Menggunakan Editor Froala, anda boleh menambah teks dengan fon dan gaya yang berbeza. Menggunakan imej dari tadi, mari tambahkan beberapa teks dan tingkatkan ia.

How to Add Image Editing Capabilities to Your WYSIWYG Editor

Memasukkan Sempadan

Kami juga boleh memasukkan sempadan atau bingkai dengan mudah pada imej kami menggunakan ciri transformasi Filestack. Mari pergi ke tab "Sempadan" dan sesuaikan sempadan untuk imej kami:

How to Add Image Editing Capabilities to Your WYSIWYG Editor

Selepas mengklik "Simpan", kita akan melihat imej kami yang dipertingkatkan pada editor. Dari sana, anda boleh menyemak imej yang dimuat naik pada papan pemuka Filestack anda. Pergi ke "Pelayar Kandungan" dan anda akan melihat imej kami, yang boleh anda muat turun secara berasingan atau pada aplikasi anda. Sebagai rujukan, berikut ialah cara imej harus kelihatan selepas melakukan semua operasi ini:

How to Add Image Editing Capabilities to Your WYSIWYG Editor

Kesimpulan

Untuk sebarang aplikasi moden, penyuntingan imej ialah alat yang berharga. Dengan alatan seperti Froala, anda boleh mempercepatkan pelaksanaan editor WYSIWYG yang mempunyai keupayaan menyunting imej yang hebat. Alat sedemikian membolehkan anda memangkas, menambah teks dan penapis, memasukkan jidar dan menggunakan tindanan pada imej anda.

Dengan mengikuti panduan ini, anda kini boleh mula melaksanakan ciri sedemikian tanpa terlalu banyak usaha. Kini, anda bersedia untuk menawarkan pengalaman pengeditan imej yang lancar dan menyeronokkan yang membolehkan pengguna memperhalusi imej mereka tanpa meninggalkan editor.

Artikel ini pada mulanya disiarkan pada Blog Froala.

Atas ialah kandungan terperinci Cara Menambah Keupayaan Penyuntingan Imej pada Editor WYSIWYG Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!