PHPackages webcito/bs-emoji-picker - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. webcito/bs-emoji-picker ActiveLibrary[Utility & Helpers](/categories/utility) webcito/bs-emoji-picker ======================= description 2.0.2(1mo ago)146proprietary Since Sep 15Pushed 4w agoCompare [ Source](https://github.com/ThomasDev-de/bs-emoji-picker)[ Packagist](https://packagist.org/packages/webcito/bs-emoji-picker)[ Docs](https://github.com/webcito/bs-emoji-picker)[ RSS](/packages/webcito-bs-emoji-picker/feed)WikiDiscussions main Synced today READMEChangelog (9)Dependencies (6)Versions (7)Used By (0) bs-emoji-picker =============== [](#bs-emoji-picker) A Bootstrap 5 compatible emoji picker for **jQuery**, with support for: - `input` - `textarea` - `contenteditable="true"` elements - parsing emoji shortcodes in plain text - parsing/replacing shortcodes in HTML and DOM nodes - inserting emojis at the current caret position It is designed as a lightweight plugin that adds a Bootstrap dropdown-based emoji picker and exposes utility methods for shortcode-to-emoji conversion. --- Features -------- [](#features) - Bootstrap 5 dropdown based UI - Works with jQuery 3+ - Inserts emojis into: - text inputs - textareas - `contenteditable` editors - Converts classic emoticons like `:-)` and shortcodes like `:heart:` - DOM parsing helpers for existing content - Customizable category labels - Click callback for selected emojis - Can be used as: - UI picker plugin - text parser - DOM/HTML emojifier --- Requirements ------------ [](#requirements) - Bootstrap 5+ - Bootstrap Icons 1+ - jQuery 3+ --- Installation ------------ [](#installation) ### Composer [](#composer) ``` composer require webcito/bs-emoji-picker ``` ### Manual [](#manual) Copy the plugin file into your project, for example: ``` dist/bs-emoji-picker.js ``` Then include the required dependencies. --- Include Assets -------------- [](#include-assets) ``` ``` --- Basic Setup ----------- [](#basic-setup) ### Markup [](#markup) ``` ``` ### Initialization [](#initialization) ``` $('.emoji-picker').bsEmojiPicker({ targetInput: '#myTextarea' }); ``` --- Use With `contenteditable` -------------------------- [](#use-with-contenteditable) The plugin also supports editable DOM nodes such as rich text editors based on `contenteditable="true"`. ### Markup [](#markup-1) ``` ``` ### Initialization [](#initialization-1) ``` $('.emoji-picker-editor').bsEmojiPicker({ targetInput: '#editor' }); ``` ### Notes for `contenteditable` [](#notes-for-contenteditable) - Emojis are inserted at the current caret position - Shortcodes can be converted on input/paste - Complex nested HTML editors may behave differently depending on browser selection handling - For best results, use simple text-oriented editable containers --- Quick Examples -------------- [](#quick-examples) ### 1. Insert emojis into a textarea [](#1-insert-emojis-into-a-textarea) ``` $('#picker1').bsEmojiPicker({ targetInput: '#message' }); ``` ### 2. Insert emojis into a contenteditable editor [](#2-insert-emojis-into-a-contenteditable-editor) ``` $('#picker2').bsEmojiPicker({ targetInput: '#editor' }); ``` ### 3. Customize labels [](#3-customize-labels) ``` $('#picker1').bsEmojiPicker({ targetInput: '#message', labels: { classics: 'Classic Emojis', heartsAndLove: 'Love', handsAndGestures: 'Hands' } }); ``` ### 4. React when an emoji is clicked [](#4-react-when-an-emoji-is-clicked) ``` $('#picker1').bsEmojiPicker({ targetInput: '#message', onClickEmoji(emoji) { console.log('Selected emoji:', emoji); return emoji; } }); ``` --- Usage ----- [](#usage) Initialize the picker --------------------- [](#initialize-the-picker) ``` $('.emoji-picker').bsEmojiPicker({ btnClass: 'btn btn-outline-secondary', btnText: '', btnIconClass: 'bi bi-emoji-smile', btnShowToggle: false, targetInput: '#myTextarea', labels: { classics: "Classics", slackDiscordFaces: "Slack/Discord Faces", heartsAndLove: "Hearts & Love", handsAndGestures: "Hands & Gestures", symbolsAndObjects: "Symbols & Objects", animalsAndNature: "Animals & Nature", foodAndDrink: "Food & Drink", activitiesAndSports: "Activities & Sports", travelAndPlaces: "Travel & Places", weatherAndNatureExtras: "Weather & Nature (Extra)", plantsAndFlowers: "Plants & Flowers", techAndObjectsExtra: "Tech & Objects (Extra)", uiSymbolsExtra: "UI Symbols", communicationAndMedia: "Communication & Media", peopleAndEmotionsExtra: "People & Emotions (Extra)", flagsBasic: "Flags (Basic)" }, onClickEmoji(emoji) { return emoji; } }); ``` The plugin creates a Bootstrap dropdown button and inserts the selected emoji into the configured target. --- Static Utility Methods ---------------------- [](#static-utility-methods) The plugin also exposes global helper methods via `$.bsEmojiPicker`. ### `$.bsEmojiPicker.emojify(input)` [](#bsemojipickeremojifyinput) Converts shortcodes/emoticons depending on input type. Supported input types: - plain string - HTML string - jQuery object - DOM element - `NodeList` - selector string #### Plain text [](#plain-text) ``` const output = $.bsEmojiPicker.emojify('Hello ``` Using `bootstrap.bundle.min.js` is recommended because it includes Popper. --- Error Handling / Common Pitfalls -------------------------------- [](#error-handling--common-pitfalls) ### The picker button is visible, but clicking does nothing [](#the-picker-button-is-visible-but-clicking-does-nothing) Check that: - Bootstrap JS is loaded - jQuery is loaded before the plugin - `targetInput` points to an existing element ### Emojis are not inserted into the editor [](#emojis-are-not-inserted-into-the-editor) Check that: - the selector in `targetInput` matches exactly one element - the target is an `input`, `textarea`, or `contenteditable` element - the target is focusable and not disabled/read-only ### DOM parsing does not change anything [](#dom-parsing-does-not-change-anything) Check that: - the content really contains matching shortcodes/emoticons - you are parsing text nodes, not attributes - the selector passed to `emojify()` or `emojifyDom()` matches an existing node ### `contenteditable` caret behavior feels inconsistent [](#contenteditable-caret-behavior-feels-inconsistent) This depends partly on browser selection APIs and the complexity of your editor markup. Simple text-focused editable areas work best. --- Browser Compatibility --------------------- [](#browser-compatibility) The plugin is intended for modern browsers that support: - jQuery 3+ - Bootstrap 5 - standard DOM Selection and Range APIs - Unicode emoji rendering If you need to support older browsers, test carefully, especially for `contenteditable`. --- Development Notes ----------------- [](#development-notes) The plugin is split conceptually into: - picker UI setup - shortcode/emoticon parsing - DOM traversal helpers - editable target insertion logic If you extend the emoji map, keep in mind: - overlapping patterns may affect replacement order - more specific/longer regex patterns should generally win - duplicate aliases should be reviewed carefully --- Demo ---- [](#demo) See: ``` demo/index.html ``` for a full usage example. --- Changelog --------- [](#changelog) Please see [CHANGELOG.md](CHANGELOG.md) for details on recent changes. --- License ------- [](#license) MIT --- Support / Issues ---------------- [](#support--issues) Issues and source: ``` https://github.com/webcito/bs-emoji-picker ``` ### Health Score 40 ↑ FairBetter than 86% of packages Maintenance94 Actively maintained with recent releases Popularity12 Limited adoption so far Community6 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~52 days Recently: every ~65 days Total 6 Last Release 30d ago Major Versions 0.0.3 → 1.0.02025-09-18 1.0.1 → 2.0.22026-06-04 ### Community Maintainers ![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81) --- Top Contributors [![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (19 commits)") --- Tags bootstrappickeremoji ### Embed Badge ![Health badge](/badges/webcito-bs-emoji-picker/health.svg) ``` [![Health](https://phpackages.com/badges/webcito-bs-emoji-picker/health.svg)](https://phpackages.com/packages/webcito-bs-emoji-picker) ``` ### Alternatives [jason-munro/cypht Lightweight Open Source webmail written in PHP and JavaScript 1.6k157.9k](/packages/jason-munro-cypht)[serhioromano/bootstrap-calendar Bootstrap full view calendar. 3.0k5.9k2](/packages/serhioromano-bootstrap-calendar)[mapbender/mapbender Mapbender library 10418.3k8](/packages/mapbender-mapbender)[kartik-v/yii2-widget-timepicker Enhanced Yii2 wrapper for the bootstrap timepicker plugin (sub repo split from yii2-widgets) 445.2M14](/packages/kartik-v-yii2-widget-timepicker)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2193.4k18](/packages/datatablesnet-datatablesnet-bs5)[datatables.net/datatables.net-bs4 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap4\](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 2925.5k14](/packages/datatablesnet-datatablesnet-bs4) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)