Dengan perkembangan pesat Internet, penyunting teks yang kaya telah menjadi bahagian yang amat diperlukan dalam proses pembangunan laman web. Sebagai penyunting teks kaya sumber terbuka domestik, WangEditor mempunyai ciri yang sangat baik seperti kemudahan penggunaan, ringan dan fungsi yang kaya, dan secara beransur-ansur telah menjadi pilihan pertama banyak pembangun.
ThinkPHP6, sebagai salah satu rangka kerja pembangunan PHP paling arus perdana di China, juga menyediakan pelbagai fungsi sambungan yang boleh membantu pembangun menyepadukan editor teks kaya WangEditor dengan cepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan editor teks kaya WangEditor dalam ThinkPHP6.
1. Muat turun WangEditor
Mula-mula, kita perlu memuat turun kod sumber editor WangEditor. Anda boleh memuat turun versi terkini dari laman web rasmi WangEditor (https://www.wangeditor.com/). Selepas membuka zip kod sumber, salin direktori ke direktori awam dalam projek ThinkPHP6 kami.
2. Memperkenalkan fail sumber WangEditor
Di halaman yang kita perlu menggunakan WangEditor, kita perlu memperkenalkan fail sumber berikut:
1 2 |
|
Antaranya, wangEditor.min .css ialah fail gaya WangEditor, wangEditor.min.js ialah fail Javascript utama WangEditor.
3. Cipta halaman
Dalam halaman di mana kita perlu menggunakan WangEditor, kita perlu mencipta bekas div untuk memaparkan editor dan menetapkan ID. Contohnya:
1 |
|
4. Mulakan WangEditor
Selepas halaman dimuatkan, kita perlu memulakan WangEditor dan menetapkan parameter yang berkaitan untuknya. Berikut ialah contoh mudah:
1 2 3 4 |
|
di mana #editor ialah ID div yang kami tetapkan. Semerta melalui var editor = wangEditor baru('#editor'); dan kemudian mulakan editor melalui kaedah editor.create(). Pada ketika ini, halaman kami boleh menggunakan editor teks kaya WangEditor.
5. Tetapkan parameter editor
Selain memulakan editor, kami juga boleh menetapkan parameter editor mengikut keperluan. Berikut adalah beberapa contoh, anda boleh memilih mengikut keperluan anda:
Tetapkan lebar dan ketinggian editor
1 2 3 |
|
Tetapkan warna fon dan warna latar belakang editor
1 2 3 4 5 6 7 8 9 10 |
|
Tetapkan pengeditan Fon editor
1 2 3 4 |
|
Tetapkan antara muka untuk memuat naik imej
1 2 |
|
6 Dapatkan kandungan dalam editor
Selepas pengguna selesai mengedit, kami perlu untuk mendapatkan kandungan dalam editor . Berikut ialah contoh mudah:
1 2 3 4 5 6 7 |
|
Di mana, kaedah editor.txt.html() mengembalikan rentetan HTML dalam editor.
Ringkasan
Di atas ialah pengenalan terperinci untuk menggunakan editor teks kaya WangEditor dalam ThinkPHP6. Dengan hanya memperkenalkan fail sumber, mencipta halaman, memulakan editor dan menetapkan parameter, kami boleh menyepadukan editor teks kaya WangEditor dengan cepat dan melaksanakan fungsi penyuntingan teks kaya dengan mudah.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan editor teks kaya WangEditor dalam ThinkPHP6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!