Kata pengantar:
Karena proyek pengembangan perusahaan mensyaratkan penggunaan plug-in emoticon, sudah lama di Baidu. Banyak plug-in emoticon perlu merujuk banyak file JS, dan tidak ada demo siap pakai untuk digunakan. Beberapa plug-in mengacu pada banyak gambar, dan setiap emotikon perlu diminta lagi. Untuk fungsi seperti itu, tidak sebanding dengan upaya untuk memperkenalkan banyak JS dan IMGS ...
Oleh karena itu, blogger telah mengkodekan "plug-in ekspresi" kecil untuk mudah digunakan di masa depan.
Fungsi
Fungsi: Lewati format karakter yang sesuai dengan ekspresi ke latar belakang, latar belakang mengembalikan string, dan ujung depan mem -parsing string ke dalam ekspresi yang sesuai untuk menampilkannya pada halaman.
Bagaimana menggunakan:
Konfigurasikan Parameter yang Diperlukan dalam Opsi
var option = {emojiArray: ['angry'], //Fill in the array of emoji strings, [Note: The icon below the source file image, you only need to write the string in the red box, see the figure below for details] textareaId: 'emoji-editor', //The idloadId of the input box: 'load', //The idemojiContainer for loading emoji: 'emojicontainer', // objek wadah yang menyimpan emoji sendid: 'kirim', // tombol untuk mengirim informasi idemojitranslatecls: 'emoji-comment', // class name yang perlu dikonversi ke emoji (img) hanya diperlukan untuk menambahkan kelas untuk secara otomatis render: emoji baru (opsi); text.init ();Tangkapan layar dari perkiraan efek: (UI dapat mempercantik sesuai dengan kebutuhan mereka)
Setelah mengklik Kirim, data yang dikirim ke latar belakang adalah:
Tiga prinsip plug-in emoticon:
• Bagaimana cara menampilkan ekspresi?
CSS Sprite (Teknologi Integrasi Gambar), pertama -tama atur ikon latar belakang, lalu tentukan posisi, lebar, tinggi setiap ikon kecil, dan tampilkan ekspresi yang ingin Anda tampilkan. Masalah yang dihadapi selama periode ini: Bagaimana cara mengontrol ukuran ekspresi yang ditampilkan? Hal pertama yang saya pikirkan adalah metode ukuran latar belakang, tetapi sangat "fisik" untuk mendefinisikan kembali posisinya. Kemudian, ketika masa depan gelap, saya menemukan transformasi properti: skala (1.5); Untuk mengontrol rasio penskalaan elemen saat ini, haha, satu baris kode dilakukan ~ Apakah Anda ingin ekspresi menjadi besar atau kecil, dan Anda tidak puas dengan ukurannya? Selesaikan semua kode • Bagaimana cara menampilkan emoticon di kotak input?
Pada awalnya saya memilih TexTarea of Input, tetapi ketika saya meletakkan emotikon "Tambahkan" pada kotak input, ikon tidak ditampilkan. Kemudian, saya mencoba div dan kemudian "menambahkan" dan menemukan bahwa ekspresi dapat ditampilkan dengan sukses, tetapi div tidak dapat memasukkan teks, yang sia -sia ...
Ide Pendahuluan: Gunakan Input Mendengarkan Nilai Tambah TextArea ke Div dalam waktu nyata. Demikian pula, ini tidak berterima kasih ~ Terus jelajahi ...
Kemudian saya menemukan sejumlah besar atribut. ContentEditable = "true", dan dengan senang hati memilih yang dapat diedit.
Pada awalnya, Anda menggunakan rentang untuk meng -host ikon emoticon, tetapi jika Anda menempatkan gambar dengan tag div atau rentang, yang dapat diatasi akan ditambahkan ke div/rentang terakhir secara default ..., sehingga Anda akan menyebabkan Anda memasukkan ikon emotikon dan kemudian memasukkan teks. Teks terakhir akan berada dalam div/rentang terakhir, menghasilkan tidak ada teks yang ditampilkan. Oke ... saya sangat lelah ...
Karena Div/Span tidak memungkinkan, gunakan tag IMG untuk meng -host ekspresi, dan sekarang Anda akhirnya bisa memasukkannya secara normal.
[KontenDitable memiliki masalah, mendukung teks yang kaya, tidak aman, dan memiliki pengalaman pengguna yang buruk. 】
Misalnya: Ketika pengguna menempel, mereka akan secara otomatis membawa format. Contohnya adalah sebagai berikut:
Ini adalah kode dari master online untuk menghapus fungsi teks yang kaya. Untuk referensi spesifik: posting blog master
• Bagaimana cara mengonversi gambar dan teks?
Saat ini, Anda perlu menggunakan aturan yang kuat. Pertama gunakan html () untuk mendapatkan konten, dan kemudian memproses konten. Konversi ke teks:
1 konten.replace (/<img/b [^>]*/, imgobj [j]) // Cocokkan semua <img/> dan ganti dengan format yang sesuai
2 imgobj.push (format + img [i] .getAttribute ("alt") + format); // Saya menggunakan format di sini: jadi ini adalah format yang mirip dengan ini: takut: untuk mengubahnya menjadi gambar:
var keys = '//+|-|||| bola | a | ab | abc | abcd | abcd | terima ...' // Hanya beberapa regex yang terdaftar di sini. regex = regexp baru (':(' + keys + '):', 'g'), // Cocokkan format seperti ini: $ (obj [i]). html (). ganti (regex, emoji) // ganti fungsi emoji () {var key = argumen []; return '<img src = "class =" eMo = embo = argumen []; return' <img src = "class =" eMo = "EMOJi []; return '<img src =" class = "eMo =" EMOJI []; return' <img src = "class =" EMO = "EMOJI []; return '<img src =" class = "EMO =" EMOJI []; return' <img src = "class =" EMO = "EMOJI []; return '<img src =" class = "EMO =" EMOJI Format IMG yang sesuai}Format kode seluruh plug-in juga merupakan metode enkapsulasi yang umum.
// Emoji Objek Mutable Atribut Fungsi emoji (opsi) {this.emoji = option.emojiarray, this.textAreaid = option.textAreaid, this.loadId = option.loadId, this.sendid = option.sendid, this.emojicontainer = option.emojicontainer, this.emojicontainer = Option.emojicontainer, this. option.emojitranslatecls;}// Setiap kali instance dihasilkan, atribut di atas akan diregenerasi, sehingga untuk metode tetap, itu akan mengkonsumsi lebih banyak memori. Ini tidak ramah lingkungan atau efisien. Oleh karena itu, sifat dan metode yang tidak berubah tersebut dapat secara langsung didefinisikan pada objek prototipe. Pada saat ini, semua metode tetap sebenarnya adalah alamat memori yang sama, menunjuk ke objek prototipe, sehingga meningkatkan efisiensi operasi.
Emoji.prototype = {init: function () {// Masukkan beberapa metode inisialisasi this.toemoji (); this.loademoji (); this.bindevent ();}, bindevent: function () {}, toemoji: function () {}, // konversi data server ke emoticons totext: function () {} // konversi ke teks loademoji: () {} // muat emoticons}Oke, bahkan jika plug-in ekspresi seperti itu selesai, apakah mudah terikat atau tidak? Saat ini, Anda harus mengandalkan jQuery untuk saat ini. Jika Anda memiliki energi, terus bermain -main dengan O (∩_∩) o berdasarkan JS asli. Kode implementasi spesifik ada di GitHub. Akhirnya, lampirkan alamat GitHub: https://github.com/beidan/emoji
Di atas adalah pengantar JavaScript yang telah diperkenalkan oleh editor kepada Anda, mulai dari 0, dan saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!