Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Membuat HTML Di Dalam Div Boleh Diedit Kandungan (atau dengan Pemalam jQuery)?

Bagaimanakah Saya Boleh Membuat HTML Di Dalam Div Boleh Diedit Kandungan (atau dengan Pemalam jQuery)?

DDD
Lepaskan: 2024-12-06 00:45:16
asal
385 orang telah melayarinya

How Can I Render HTML Inside a Content Editable Div (or with jQuery Plugins)?

Memberikan HTML di dalam Textarea

Tidak seperti kawasan teks, div boleh diedit kandungan mentafsir kandungan mereka sebagai HTML, membolehkan anda memaparkan teg HTML di dalamnya. Untuk menggunakan div boleh diedit kandungan, ikuti langkah berikut:

  1. Sertakan kod HTML berikut:

    <div contenteditable="true"></div>
    Salin selepas log masuk
  2. Tambah penggayaan CSS mengikut keperluan. Contohnya:

    div.editable {
     width: 300px;
     height: 200px;
     border: 1px solid #ccc;
     padding: 5px;
    }
    Salin selepas log masuk
  3. Div boleh edit kandungan kini boleh digunakan untuk memaparkan teg HTML seperti , , dan < a>. Sebagai contoh:

    <div contenteditable="true">
     This is the first line.<br>
     See, how the text fits here, also if<br>
     there is a <strong>linebreak</strong> at the end?<br>
     It works nicely.<br>
     <br>
     <span>
    Salin selepas log masuk

JQuery Plugin Secara Alternatif

Jika anda lebih suka menggunakan pemalam jQuery, pertimbangkan pilihan berikut:

  1. X-Boleh Diedit: https://github.com/vitalets/x-editable
  2. TinyMCE: https://www.tinymce.com/
  3. CKEditor: https://ckeditor.com/

Pemalam ini menyediakan ciri tambahan dan pilihan penyesuaian untuk memaparkan HTML di dalam kawasan teks.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat HTML Di Dalam Div Boleh Diedit Kandungan (atau dengan Pemalam jQuery)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan