Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Cipta editor teks kaya menggunakan PHP dan CKEditor

Cipta editor teks kaya menggunakan PHP dan CKEditor

WBOY
WBOYasal
2023-05-11 16:06:212116semak imbas

Dengan penggunaan aplikasi web yang meluas, mencipta editor teks yang kaya telah menjadi semakin biasa. CKEditor diiktiraf secara meluas sebagai salah satu penyunting teks kaya terbaik kerana kebolehsesuaian yang baik dan kemudahan penggunaannya. Artikel ini akan memperkenalkan cara mencipta editor teks kaya menggunakan PHP dan CKEditor.

Pengenalan kepada CKEditor

CKEditor ialah editor teks kaya merentas platform yang dilaksanakan melalui JavaScript. Ia menyediakan bar alat yang intuitif dan mudah difahami, termasuk gaya fon, pemformatan, sisipan imej dan jadual, tetapan pautan, semakan ejaan dan banyak lagi. Ciri utama CKEditor termasuk kebolehubahsuaian, kebolehlanjutan mudah dan keserasian merentas penyemak imbas, yang menjadikannya salah satu pilihan terbaik untuk mencipta editor teks kaya.

Sebelum menggunakan CKEditor

Pertama, pastikan anda mempunyai persekitaran PHP di tapak web anda. Jika tidak, sediakannya dengan memasang pelayan Apache, PHP dan MySQL. Jika anda sudah mempunyai perisian ini, maka anda boleh mula menggunakan CKEditor.

Langkah 1: Muat turun CKEditor

Mula-mula, muat turun versi terkini CKEditor daripada laman web rasmi CKEditor (http://ckeditor.com).

Langkah 2: Buat halaman HTML

Buat fail bernama index.html dalam pengurus fail, dan kemudian tambah kandungan berikut pada fail:

eac1677d5db0d167a97c3dd98bc198ab
100db36a723c770d327fc0aef2ce13b1
a801d9c20ab268ecdf000c4cd37b7338

<title>使用PHP和CKEditor创建富文本编辑器</title>
<script src="ckeditor/ckeditor.js"></script>

4f7e9ee3c387fa7cd73e9b3fa70c81fd
3c30aa6c4c72dd8ead30672a51b803a7

<textarea id="editor1" name="editor1"></textarea>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

cd3fcada0716d3523f937317d6c15667 >73a6ac4ed44ffec12cee46588e518a5e

Baris 1 mengisytiharkan jenis dokumen HTML.
Baris 2 ialah tajuk halaman HTML.
Baris 3 memperkenalkan fail JavaScript CKEditor.
Barisan 6 mencipta elemen 4750256ae76b6b9d804861d8f69e79d3
Barisan 7 memulakan CKEditor.

Langkah 3: Muat naik fail CKEditor

Ekstrak fail CKEditor yang dimuat turun ke direktori web pada pelayan anda. Adalah lebih baik untuk menyimpan fail CKEditor dalam direktori yang sama seperti index.html.

Langkah 4: Uji editor teks kaya

Buka fail index.html dalam penyemak imbas, anda akan melihat editor teks dengan CKEditor, anda boleh mengedit teks dan format yang anda suka .

Dapatkan data daripada CKEditor menggunakan PHP

Sekarang, anda telah berjaya mencipta editor teks kaya menggunakan CKEditor. Langkah seterusnya ialah melihat cara mendapatkan data daripada CKEditor menggunakan PHP. Sila ikut langkah di bawah:

Langkah 1: Ubah suai halaman HTML

Tambahkan borang penyerahan dalam index.html untuk menghantar kandungan yang diedit oleh editor teks kaya ke fail PHP. Halaman HTML yang diubah suai kelihatan seperti berikut:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>使用PHP和CKEditor创建富文本编辑器</title>
<script src="ckeditor/ckeditor.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
< ;body>

<form action="submit.php" method="POST">
    <textarea id="editor1" name="editor1"></textarea>
    <input type="submit" value="提交">
</form>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Barisan 9-11 ialah borang tambahan. Ia mempunyai elemen 4750256ae76b6b9d804861d8f69e79d3 iaitu kawasan penyuntingan dan ia juga mempunyai butang hantar.
Barisan 12 memulakan CKEditor menggunakan JavaScript.

Langkah 2: Buat fail submit.php

Buat fail bernama submit.php dalam pengurus fail, dan kemudian tambah kandungan berikut dalam fail:

< ; ?php
if(isset($_POST['editor1'])) {
echo $_POST['editor1'];
}
?>

Ini mudah Program PHP hanyalah untuk menunjukkan cara mendapatkan data daripada CKEditor. Ia menyemak tatasusunan $_POST untuk melihat sama ada data bernama "editor1" telah ditetapkan, dan jika ya, memaparkannya.

Langkah 3: Uji fail PHP

Dalam langkah menggunakan CKEditor untuk mencipta editor teks kaya, buka index.html, masukkan beberapa teks, dan kemudian klik butang hantar. Selepas menghantar, anda akan melihat kandungan yang dimasukkan dalam submit.php.

Kesimpulan

Mencipta penyunting teks kaya menggunakan PHP dan CKEditor ialah tugas yang mudah tetapi penting yang boleh membantu anda mencipta penyunting teks yang sangat disesuaikan untuk memenuhi keperluan tapak web anda. Dari masa ke masa, anda boleh berasa bebas untuk menaik taraf dan melanjutkan editor ini untuk memenuhi keperluan anda. Saya harap artikel ini membantu anda mencipta editor teks kaya yang berguna.

Atas ialah kandungan terperinci Cipta editor teks kaya menggunakan PHP dan CKEditor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn