Init Emoji Picker – Thư viện chọn Emoji không cần Framework cho mọi website

Tại sao nên chọn Init Emoji Picker?

Các giải pháp emoji picker hiện có trên thị trường thường đi kèm với nhiều hạn chế. Một số yêu cầu cài đặt plugin cồng kềnh, một số khác phụ thuộc vào framework UI như Bootstrap hoặc UIkit, khiến việc tích hợp trở nên phức tạp và dễ gây xung đột với mã nguồn hiện có. Init Emoji Picker được xây dựng từ đầu để giải quyết những vấn đề này một cách triệt để.

Không cần dependency

Init Emoji Picker được viết hoàn toàn bằng vanilla JavaScript. Không cần jQuery, không cần React, không cần Vue, không cần Bootstrap hay UIkit. File JavaScript duy nhất và CSS được tự động inject vào trang khi khởi động. Bạn có thể sử dụng Init Emoji Picker trên bất kỳ website nào, từ blog WordPress cá nhân đến các ứng dụng web phức tạp, mà không lo xung đột với các thư viện hiện có.

Giao diện hiện đại với 2 theme

Widget được thiết kế với giao diện sạch sẽ, hiện đại, hỗ trợ cả theme sáng và theme tối. Dropdown picker có bo góc mềm mại, bóng đổ tinh tế và animation mượt mà. Các emoji được sắp xếp theo lưới 8 cột, dễ nhìn và dễ chọn. Thanh tìm kiếm nổi bật ở đầu picker, cho phép người dùng nhanh chóng tìm emoji mong muốn.

Tìm kiếm thông minh đa ngôn ngữ

Một trong những điểm mạnh nổi bật của Init Emoji Picker là hệ thống tìm kiếm thông minh hỗ trợ cả tiếng Anh và tiếng Việt. Người dùng có thể tìm emoji bằng cách gõ từ khóa như “vui”, “buồn”, “cafe”, “tim”, “cho”, “meo” hoặc “happy”, “sad”, “coffee”, “heart”, “dog”, “cat”. Hệ thống còn hỗ trợ fuzzy matching, cho phép tìm kiếm gần đúng khi người dùng gõ sai chính tả.

Tự động lưu lịch sử sử dụng

Init Emoji Picker tự động lưu các emoji gần đây vào localStorage, giúp người dùng nhanh chóng truy cập các emoji thường dùng mà không cần tìm kiếm lại. Danh sách emoji gần đây được hiển thị ở tab đầu tiên của picker, tối đa 30 emoji. Bạn có thể xóa lịch sử bất cứ lúc nào thông qua API.

10 danh mục emoji đầy đủ

Thư viện bao gồm 10 danh mục emoji phổ biến: Smileys & Emotion, People & Body, Animals & Nature, Food & Drink, Activities, Travel & Places, Objects, Symbols, Flags và Recently Used. Mỗi danh mục có biểu tượng riêng trên thanh tab, giúp người dùng dễ dàng chuyển đổi giữa các nhóm emoji.

Các tính năng chính của Init Emoji Picker

• Zero dependencies, chỉ một file JavaScript duy nhất
• CSS tự động inject, không cần thêm file stylesheet
• Hỗ trợ 2 theme: Light và Dark
• 10 danh mục emoji với hơn 1000 emoji
• Tìm kiếm thông minh hỗ trợ tiếng Anh và tiếng Việt
• Fuzzy matching cho tìm kiếm gần đúng
• Lưu lịch sử emoji gần đây vào localStorage
• Hỗ trợ input, textarea và contenteditable
• Chèn emoji tại vị trí con trỏ chuột
• Tự động định vị trong viewport, flip khi cần
• Điều hướng bằng bàn phím (mũi tên + Enter)
• Đóng picker bằng phím Escape
• Custom event iep:select khi chọn emoji
• Hỗ trợ trigger bằng click hoặc hover
• Tùy chọn autoClose sau khi chọn
• API đầy đủ: init, destroy, updateConfig, clearRecent

Hướng dẫn cài đặt Init Emoji Picker

Có nhiều cách để cài đặt Init Emoji Picker trên website của bạn. Dưới đây là các phương pháp phổ biến nhất.

Cách 1: Cơ bản nhất

Chỉ cần thêm script và khởi tạo trên input hoặc textarea:

<script src="https://inithtml.com/init-emoji-picker.js"></script>
<script>
  var picker = new InitEmojiPickerCore();
  picker.init('#comment');
</script>

Cách 2: Nhiều input cùng lúc

Khởi tạo trên nhiều phần tử với một selector:

<script>
  var picker = new InitEmojiPickerCore();
  picker.init('textarea, input[type="text"]');
</script>

Cách 3: Với cấu hình tùy chỉnh

<script>
  var picker = new InitEmojiPickerCore({
    theme: 'dark',
    position: 'auto',
    autoClose: true,
    maxRecent: 20
  });
  picker.init('#chat-input');
</script>

Bảng cấu hình đầy đủ của Init Emoji Picker

Hướng dẫn tùy chỉnh ngôn ngữ giao diện

Bạn có thể ghi đè các văn bản giao diện mặc định bằng cách truyền object i18n:

<script>
  var picker = new InitEmojiPickerCore({
    i18n: {
      recent: 'Gần đây',
      smileys: 'Cảm xúc',
      people: 'Con ngườ',
      search_placeholder: 'Tìm emoji...',
      no_recent: 'Chưa có emoji nào'
    }
  });
  picker.init('#comment');
</script>

Cách tích hợp Init Emoji Picker vào WordPress

Để thêm Init Emoji Picker vào website WordPress, bạn có thể sử dụng một trong các cách sau:

Phương pháp 1: Thêm vào theme file

Mở file footer.php của theme và thêm script trước thẻ đóng </body>:

<script src="https://inithtml.com/init-emoji-picker.js"></script>
<script>
  var picker = new InitEmojiPickerCore();
  picker.init('textarea#comment, textarea.wp-comment-input');
</script>
</body>

Phương pháp 2: Sử dụng plugin Insert Headers and Footers

Cài đặt plugin Insert Headers and Footers, sau đó vào Settings > Insert Headers and Footers và dán script vào ô Scripts in Footer.

Phương pháp 3: Sử dụng functions.php

Thêm đoạn code sau vào file functions.php của theme:

function enqueue_init_emoji_picker() {
    wp_enqueue_script('init-emoji-picker', 'https://inithtml.com/init-emoji-picker.js', array(), null, true);
    wp_add_inline_script('init-emoji-picker', '
        document.addEventListener("DOMContentLoaded", function() {
            var picker = new InitEmojiPickerCore();
            picker.init("textarea#comment");
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_init_emoji_picker');

Phương pháp 4: Sử dụng Code Snippets plugin

Nếu bạn không muốn chỉnh sửa file theme, hãy cài đặt plugin Code Snippets và tạo một snippet mới với code tương tự như phương pháp 3.

Lắng nghe sự kiện khi chọn emoji

Init Emoji Picker phát ra custom event iep:select khi người dùng chọn một emoji. Bạn có thể lắng nghe sự kiện này để thực hiện các hành động tùy chỉnh:

<script>
  document.addEventListener('iep:select', function(e) {
    console.log('Emoji đã chọn:', e.detail.emoji);
    console.log('Phần tử đích:', e.detail.targetElement);

    // Ví dụ: Gửi emoji đến server qua AJAX
    // fetch('/api/log-emoji', { method: 'POST', body: JSON.stringify({ emoji: e.detail.emoji }) });
  });
</script>

API JavaScript của Init Emoji Picker

Sau khi khởi tạo, bạn có thể điều khiển picker thông qua các phương thức sau:

// Khởi tạo picker
var picker = new InitEmojiPickerCore(config);

// Khởi tạo trên các phần tử
picker.init('#comment', { theme: 'dark' });

// Hủy instance cụ thể
picker.destroy('#comment');

// Hủy tất cả instances
picker.destroy();

// Cập nhật cấu hình
picker.updateConfig('#comment', { theme: 'light', autoClose: true });

// Xóa lịch sử emoji gần đây
picker.clearRecent();

// Lấy danh sách emoji theo danh mục
var smileys = picker.getEmojisByCategory('smileys');

// Thêm emoji tùy chỉnh
picker.addCustomEmoji('custom', ['🎨', '🚀', '⭐']);

Câu hỏi thường gặp

Init Emoji Picker có miễn phí không?

Có, Init Emoji Picker là thư viện mã nguồn mở được phát hành dưới giấy phép MIT. Bạn có thể sử dụng miễn phí cho cả dự án cá nhân và thương mại.

Init Emoji Picker có làm chậm website không?

Không. File JavaScript được tối ưu và nén. CSS được inject tự động nên không cần thêm request HTTP. Emoji được render dưới dạng Unicode text, không cần tải hình ảnh hay font icon.

Init Emoji Picker có hoạt động trên Safari không?

Có, Init Emoji Picker hỗ trợ tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Widget sử dụng các API web chuẩn như DOM API, localStorage và CustomEvent.

Làm sao để thay đổi theme?

Bạn có thể chọn theme khi khởi tạo picker bằng tùy chọn theme: theme: 'dark' cho theme tối hoặc theme: 'light' cho theme sáng.

Có thể tùy chỉnh danh mục emoji không?

Có, bạn có thể truyền mảng categories trong config để chỉ định các danh mục hiển thị và thứ tự của chúng.

Kết luận

Init Emoji Picker là giải pháp lý tưởng nếu bạn đang tìm kiếm một emoji picker nhẹ, đẹp và dễ sử dụng cho website của mình. Với thiết kế không phụ thuộc framework, tìm kiếm thông minh đa ngôn ngữ và giao diện hiện đại hỗ trợ cả theme sáng và tối, Init Emoji Picker sẽ nâng cao trải nghiệm tương tác của người dùng trên website bạn mà không làm tăng độ phức tạp của dự án.