{"componentChunkName":"component---src-templates-tag-page-tsx","path":"/tag/emoticons/","result":{"data":{"allContentfulCategory":{"edges":[{"node":{"contentful_id":"2gOurgpDj1BasZvVToN13z","slug":"tiny-sparks","title":"The Tiny Way","description":{"description":"Understand the Tiny Way - our heritage, values-driven approach and thinking through stories from and about Tiny people and culture, technology and the world at large."}}},{"node":{"contentful_id":"2a3w396SgR2Fl1ep4eYu0w","slug":"product-management","title":"Product-Led Growth","description":{"description":"Everything from product roadmaps and market fit, through customer acquisition and onboarding to retention and product-led growth, can be found here to help you grow your brand, company and product."}}},{"node":{"contentful_id":"T7VZcLaLRpt6XlNLJPLmL","slug":"wysiwyg-world","title":"World of WYSIWYG","description":{"description":"Learn about the WYSIWYG world of rich text editors - the power behind the democratization of content creation, web applications and SaaS projects."}}},{"node":{"contentful_id":"6HNYGjOUjHzUS2gXBnMVXn","slug":"design-and-ux","title":"Content Marketing & Design","description":{"description":"Be at the forefront of content design trends, get inspiration for your projects and learn new ways to use content marketing strategies and content-led approaches that deliver brilliant user experiences."}}},{"node":{"contentful_id":"6XFMYLCe4AEYIDazkjGFvb","slug":"engineering","title":"Developer Insights","description":{"description":"The perfect source for all web application and software developers, as well as engineering teams who want to stay up to date with the latest development tools, developer insights, leading edge thinking and experiments."}}},{"node":{"contentful_id":"24ufWIsR0ImSvxvvIrutB5","slug":"open-source","title":"Open Source","description":{"description":"Having a vibrant open source community is a vital part of TinyMCE, so you'll find important open source contribution news here – both from our own community, and from other open source projects in global communities."}}},{"node":{"contentful_id":"2fLgNI8yOMeZHNl1nSQ11","slug":"how-tos-and-tutorials","title":"How-to Use TinyMCE","description":{"description":"Learn how-to use TinyMCE rich text editor, all in one place – here's our set-up tips, tricks, FAQs, updates and new releases, customisations, ideas on things to build and easy migration from other text editing platforms."}}}]},"allContentfulBlogPost":{"edges":[{"node":{"title":"How to Add an Emoji Picker to a React Rich Text Editor","slug":"react-emoji-picker","featured":true,"lastUpdated":"Jul 22nd, 2025","description":{"description":"<p>Learn How to Add an Emoji Picker to a React Rich Text Editor quickly with TinyMCE emoticons&mdash;step-by-step setup, code, and customization tips.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Learn How to Add an Emoji Picker to a React Rich Text Editor quickly with TinyMCE emoticons—step-by-step setup, code, and customization tips."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"How to Add an Emoji Picker to a React Rich Text Editor","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAMAAABI111xAAABiVBMVEUKE1QACE8AB08ABk4ABE4ABU4JElMLE1QEDVEABk8AB1EABVMABlIAB1AEDlEJE1QAAk4AAEwAAEkAAEoAAEgAAE8AClUbJlwQHVkAD1UABE8AAEsAPWMAV3YAS28ARm4AS3QAUHsAQHEAQXQARnsARHsANXJCRGe5ucCPkJwAAFUIE1QEDVAARmkAaIMAW3wWVXk3Xn82YoZJZog4WYE2WYQASYEAN3M7PWOpqbJ/gI8AAFMCEVQABU8AAEcASGoAZYU/YoCEgpCXlqGSkZ13doYAAEYAAE0ABVQACFYAE1cADlYAE1gCElUABVAAAEVuboGZmaSCg5KIiJaJiZeOjpyamqWOj5xERWULGFgUIlwEFllwcYR7fI0VIFkABFMxM1xSUm5BQmRCQ2RLTGpISWhQUW1OUGwcH1QAAE4EDFMRO2cMSHcPHVwIG1uMjZqZmqUhKV0EDVMRKV4RMmUIFVcAEVYnLl4tM2EAE1YABFEBCVADC1IAClEACFECD1QIEVMLFFQAB04jQzlBAAAAiUlEQVQIHV3BMQ7BYBzG4ff3tVqLqM/YxSEMJjcQi0vYzDZ293CH3kA6O4OtIRIxtH9fFIk+DxL6IKhNlpBSN3qzlOCuAWQgzDVy4u1iIqfrbPicf5UvmVN5EK3bkCAe4WkVjyX+mhGMF3SdWB+dJBPTYsOX+vVMQfm0LYLDaoK048dF+6gXK3kByDMgGBTbYvgAAAAASUVORK5CYII=","aspectRatio":1.7824074074074074,"src":"//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=185&h=104&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=370&h=208&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=739&h=415&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=1109&h=622&q=50&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=1478&h=829&q=50&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=1925&h=1080&q=50&fit=scale 1925w","srcWebp":"//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=185&h=104&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=370&h=208&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=739&h=415&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=1109&h=622&q=50&fm=webp&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=1478&h=829&q=50&fm=webp&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/6dDa8Kd7slXNlcBGHwaULU/3d2aaeb76c53221f9d95d58bb99855b4/_Blog_Header__How_to_Add_an_Emoji_Picker_to_a_React_Rich_Text_Editor.png?w=1925&h=1080&q=50&fm=webp&fit=scale 1925w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Coco Poley","slug":"coco-poley"},"category":{"title":"How-to Use TinyMCE","slug":"how-tos-and-tutorials"},"metaTitle":{"metaTitle":"How to Add an Emoji Picker to a React Rich Text Editor | TinyMCE"},"metaDescription":{"metaDescription":"Learn How to Add an Emoji Picker to a React Rich Text Editor quickly with TinyMCE emoticons—step-by-step setup, code, and customization tips."}}},{"node":{"title":"How to set up a Vue emoji picker","slug":"vue-image-picker","featured":false,"lastUpdated":"Dec 12th, 2023","description":{"description":"<p>Vue can elevate your applications with useful features like access to emoji. Read on to find out how to easily add an emoji picker to your Vue app with TinyMCE.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vue can elevate your applications with useful features like access to emoji. Read on to find out how to easily add an emoji picker to your Vue app with TinyMCE."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"The Vue Icon stands next to a number of emoji being selected or picked from a window in a rich text editor","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAMAAABI111xAAAAzFBMVEXVxvTVxvXUxfTUxfXVxfXWx/XXyfTl4PHo5PHn4/Hd0/PWxu/YyvXZzfTXyPXg1vTf1/Lg2vHe0eXp17bdz9rf2+zj4OrUxfK6w9DExd7cz/Dr5+f39PLy3bn38en09fb09PPa1OnTxPPWxvXXyPbDx93KyOjPxdbW1Kn6+O3xx5Tz1sH+//////7Tz9vRwvHYyPbWxvfbz+X48NH//fj57sb37tv4+fr9/vzTztzSwvHXyfbf1fnf1Pne1Pne0/jd0vbf0/fUx+/UxPThp1OeAAAAX0lEQVQIHQXBMQ4BUQBAwXnxO+sS27qB0sHFSSSiV1Ft7DcDAAACASYQJPUDE6FRVd+lz7AROu2Hqqq3jQH7UlXV8dU0sFZVVcGA57mqqiC0elyqqvs0BeQKbkwAAAV/OfkTWsJuNQoAAAAASUVORK5CYII=","aspectRatio":1.7824074074074074,"src":"//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=185&h=104&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=370&h=208&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=739&h=415&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=1109&h=622&q=50&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=1478&h=829&q=50&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=1925&h=1080&q=50&fit=scale 1925w","srcWebp":"//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=185&h=104&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=370&h=208&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=739&h=415&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=1109&h=622&q=50&fm=webp&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=1478&h=829&q=50&fm=webp&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/1Dha2hKHs5otrILR707ROz/8a4cadbe1a3c8bae349bbd061594bed2/img-Howto-Vue-emoji-picker-1.png?w=1925&h=1080&q=50&fm=webp&fit=scale 1925w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Joe Robinson","slug":"joseph-robinson"},"category":{"title":"How-to Use TinyMCE","slug":"how-tos-and-tutorials"},"metaTitle":{"metaTitle":"How to setup Vue emoji picker | TinyMCE"},"metaDescription":{"metaDescription":"Elevate your Vue.js development with our tutorial on adding and customizing the Vue emoji picker for a richer user experience."}}},{"node":{"title":"How to add an emoji picker to the textarea","slug":"emoji-picker","featured":false,"lastUpdated":"Oct 12th, 2022","description":{"description":"<p>Add an emoji picker to a textarea and input elements in your applications and HTML forms. Open source and great for React, Angular, Bootstrap, Vue, JavaScript, jQuery, and Rails.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Add an emoji picker to a textarea and input elements in your applications and HTML forms. Open source and great for React, Angular, Bootstrap, Vue, JavaScript, jQuery, and Rails."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"Emoji picker on a text field.","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAC5JRUMgNjE5NjYtMi4xIERlZmF1bHQgUkdCIGNvbG91ciBzcGFjZSAtIHNSR0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHZpZXcAAAAAABOk/gAUXy4AEM8UAAPtzAAEEwsAA1yeAAAAAVhZWiAAAAAAAEwJVgBQAAAAVx/nbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAo8AAAACc2lnIAAAAABDUlQgY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08DWgNmA3IDfgOKA5YDogOuA7oDxwPTA+AD7AP5BAYEEwQgBC0EOwRIBFUEYwRxBH4EjASaBKgEtgTEBNME4QTwBP4FDQUcBSsFOgVJBVgFZwV3BYYFlgWmBbUFxQXVBeUF9gYGBhYGJwY3BkgGWQZqBnsGjAadBq8GwAbRBuMG9QcHBxkHKwc9B08HYQd0B4YHmQesB78H0gflB/gICwgfCDIIRghaCG4IggiWCKoIvgjSCOcI+wkQCSUJOglPCWQJeQmPCaQJugnPCeUJ+woRCicKPQpUCmoKgQqYCq4KxQrcCvMLCwsiCzkLUQtpC4ALmAuwC8gL4Qv5DBIMKgxDDFwMdQyODKcMwAzZDPMNDQ0mDUANWg10DY4NqQ3DDd4N+A4TDi4OSQ5kDn8Omw62DtIO7g8JDyUPQQ9eD3oPlg+zD88P7BAJECYQQxBhEH4QmxC5ENcQ9RETETERTxFtEYwRqhHJEegSBxImEkUSZBKEEqMSwxLjEwMTIxNDE2MTgxOkE8UT5RQGFCcUSRRqFIsUrRTOFPAVEhU0FVYVeBWbFb0V4BYDFiYWSRZsFo8WshbWFvoXHRdBF2UXiReuF9IX9xgbGEAYZRiKGK8Y1Rj6GSAZRRlrGZEZtxndGgQaKhpRGncanhrFGuwbFBs7G2MbihuyG9ocAhwqHFIcexyjHMwc9R0eHUcdcB2ZHcMd7B4WHkAeah6UHr4e6R8THz4faR+UH78f6iAVIEEgbCCYIMQg8CEcIUghdSGhIc4h+yInIlUigiKvIt0jCiM4I2YjlCPCI/AkHyRNJHwkqyTaJQklOCVoJZclxyX3JicmVyaHJrcm6CcYJ0kneierJ9woDSg/KHEooijUKQYpOClrKZ0p0CoCKjUqaCqbKs8rAis2K2krnSvRLAUsOSxuLKIs1y0MLUEtdi2rLeEuFi5MLoIuty7uLyQvWi+RL8cv/jA1MGwwpDDbMRIxSjGCMbox8jIqMmMymzLUMw0zRjN/M7gz8TQrNGU0njTYNRM1TTWHNcI1/TY3NnI2rjbpNyQ3YDecN9c4FDhQOIw4yDkFOUI5fzm8Ofk6Njp0OrI67zstO2s7qjvoPCc8ZTykPOM9Ij1hPaE94D4gPmA+oD7gPyE/YT+iP+JAI0BkQKZA50EpQWpBrEHuQjBCckK1QvdDOkN9Q8BEA0RHRIpEzkUSRVVFmkXeRiJGZ0arRvBHNUd7R8BIBUhLSJFI10kdSWNJqUnwSjdKfUrESwxLU0uaS+JMKkxyTLpNAk1KTZNN3E4lTm5Ot08AT0lPk0/dUCdQcVC7UQZRUFGbUeZSMVJ8UsdTE1NfU6pT9lRCVI9U21UoVXVVwlYPVlxWqVb3V0RXklfgWC9YfVjLWRpZaVm4WgdaVlqmWvVbRVuVW+VcNVyGXNZdJ114XcleGl5sXr1fD19hX7NgBWBXYKpg/GFPYaJh9WJJYpxi8GNDY5dj62RAZJRk6WU9ZZJl52Y9ZpJm6Gc9Z5Nn6Wg/aJZo7GlDaZpp8WpIap9q92tPa6dr/2xXbK9tCG1gbbluEm5rbsRvHm94b9FwK3CGcOBxOnGVcfByS3KmcwFzXXO4dBR0cHTMdSh1hXXhdj52m3b4d1Z3s3gReG54zHkqeYl553pGeqV7BHtje8J8IXyBfOF9QX2hfgF+Yn7CfyN/hH/lgEeAqIEKgWuBzYIwgpKC9INXg7qEHYSAhOOFR4Wrhg6GcobXhzuHn4gEiGmIzokziZmJ/opkisqLMIuWi/yMY4zKjTGNmI3/jmaOzo82j56QBpBukNaRP5GokhGSepLjk02TtpQglIqU9JVflcmWNJaflwqXdZfgmEyYuJkkmZCZ/JpomtWbQpuvnByciZz3nWSd0p5Anq6fHZ+Ln/qgaaDYoUehtqImopajBqN2o+akVqTHpTilqaYapoum/adup+CoUqjEqTepqaocqo+rAqt1q+msXKzQrUStuK4trqGvFq+LsACwdbDqsWCx1rJLssKzOLOutCW0nLUTtYq2AbZ5tvC3aLfguFm40blKucK6O7q1uy67p7whvJu9Fb2Pvgq+hL7/v3q/9cBwwOzBZ8Hjwl/C28NYw9TEUcTOxUvFyMZGxsPHQce/yD3IvMk6ybnKOMq3yzbLtsw1zLXNNc21zjbOts83z7jQOdC60TzRvtI/0sHTRNPG1EnUy9VO1dHWVdbY11zX4Nhk2OjZbNnx2nba+9uA3AXcit0Q3ZbeHN6i3ynfr+A24L3hROHM4lPi2+Nj4+vkc+T85YTmDeaW5x/nqegy6LzpRunQ6lvq5etw6/vshu0R7ZzuKO6070DvzPBY8OXxcvH/8ozzGfOn9DT0wvVQ9d72bfb794r4Gfio+Tj5x/pX+uf7d/wH/Jj9Kf26/kv+3P9t////2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAALABQDAREAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAQgCBQn/xAAnEAABAwIEBQUAAAAAAAAAAAACAQMEAAUGBwgxERMUIVESInGBsf/EABoBAAICAwAAAAAAAAAAAAAAAAAFBAYBAgP/xAAhEQACAgEEAgMAAAAAAAAAAAABAgADEQQSITETIjJhgf/aAAwDAQACEQMRAD8ATfTLljZs29QuBMG4ibfcsd4mmxLCM6rTiijLhoiGm3cUq5aotVSzrFFGGfBjea7dCmUWnvIyRijBkW5xcQN3KLHHq7oT4k04aifsX9pPodRdddtbJH3J1yqEMz46RfFWLZFOTLYH3YRo9GedjPD3F1g1Ax+CRUVPqpgAPB6M59ew7ELl4uVzHlzbnPmtb8uVLcdHimy8CJUrJRE+Kgfgh5HfhjIehPFa4hP/2Q==","aspectRatio":1.7767441860465116,"src":"//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=185&h=104&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=370&h=208&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=739&h=416&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=1109&h=624&q=50&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=1478&h=832&q=50&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=1528&h=860&q=50&fit=scale 1528w","srcWebp":"//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=185&h=104&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=370&h=208&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=739&h=416&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=1109&h=624&q=50&fm=webp&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=1478&h=832&q=50&fm=webp&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/6Kl1ODnV7QoRLhn1kFnNkL/5491b4ccaa80dbdfed5f2531ff714504/img-emoticon-version-2.jpg?w=1528&h=860&q=50&fm=webp&fit=scale 1528w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Ben Long","slug":"ben-long"},"category":{"title":"How-to Use TinyMCE","slug":"how-tos-and-tutorials"},"metaTitle":{"metaTitle":"Add an emoji picker to the textarea in two steps | TinyMCE"},"metaDescription":{"metaDescription":"Add an emoji picker to text editor and input elements in your applications and HTML forms. Open source and great for React, Angular, Bootstrap, Vue, JavaScript, jQuery, and Rails."}}},{"node":{"title":"How to add an Emoji Picker to your Angular App","slug":"How-to-build-angular-app-tinymce-emoji","featured":false,"lastUpdated":"Oct 4th, 2022","description":{"description":"<p>It&rsquo;s possible to build a demo Angular app with TinyMCE, and to add the emoticon plugin with an emoji database. Here&rsquo;s how to do it.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It’s possible to build a demo Angular app with TinyMCE, and to add the emoticon plugin with an emoji database. Here’s how to do it."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"Two emoji on a blue background with hidden lines","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAMAAABI111xAAABHVBMVEUXIk8XIlAOHE0AAEI8QV4cJlAAAB8AAD4GGEwVIU4XI1EVIVAAFUsAACiio6zKy8+LjZhucIAAAEcUIE4XIU8XI1ARH08AFEuOkJvn6Ov////29/h+gIoAAEARHk4WIU8XI1IAEkqOkJrr7O319vdrbXwFF0wAD0oPHU0VIU8AACmxsrnP0NOmqK54eoY0OVpXWm5RVGoADkkNHE4WIlAXIlESH04AAkcvNVQAADIAAEE0OVmen6fk5ujAwcZaXG8TH04UIFAADUkAEUoLG00ACkkrMlXS09fz9PVtb3wYI1IVIE4fJ1DOz9L5+vu4ub1PUmYIGUwmLlTMzNCZmqA5PVgAAEMPHU4eJ1FkZnYADkYPHE0BFksAAEQADkrMbSGMAAAAm0lEQVQIHTXBwQoBQQDH4d+fmVmzU6RQSrlKjryCx3V0UMrRI7hy1Cqlnd32sna1vk+A/gqQj2CAVJ2QQYhgYNJTJ/ezR8jA0Eilwqsc+CpZFUAfIhra1NrH3HrnQhUxwFqqEmmrH6APvOswcq3bwn3sM6Ip7I5L2JRerZPPMBlcuAOvvVoxh15d1/xE59zZXmkYOvnYSO9DSeMLHQMp38tqIacAAAAASUVORK5CYII=","aspectRatio":1.7767441860465116,"src":"//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=185&h=104&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=370&h=208&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=739&h=416&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=1109&h=624&q=50&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=1478&h=832&q=50&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=1528&h=860&q=50&fit=scale 1528w","srcWebp":"//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=185&h=104&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=370&h=208&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=739&h=416&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=1109&h=624&q=50&fm=webp&fit=scale 1109w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=1478&h=832&q=50&fm=webp&fit=scale 1478w,\n//images.ctfassets.net/s600jj41gsex/1R9qUelJMFa0utmtjsMJnH/393c6ee22314f59c57d6ff619e8911e6/img-emoji-picker-ver-2.png?w=1528&h=860&q=50&fm=webp&fit=scale 1528w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Joe Robinson","slug":"joseph-robinson"},"category":{"title":"How-to Use TinyMCE","slug":"how-tos-and-tutorials"},"metaTitle":{"metaTitle":"How to add emoji picker to your Angular app | TinyMCE"},"metaDescription":{"metaDescription":"Angular emoji picker setup with TinyMCE is quite easy: learn about necessary configurations and steps."}}},{"node":{"title":"Best custom Slack emojis for the workplace","slug":"custom-slack-emojis-combinations-work","featured":false,"lastUpdated":"Jul 14th, 2020","description":{"description":"<p>Jazz up your workplace with custom Slack emojis. Plus, get tips to combine emojis and encourage emoticon usage at work, including how to add emojis to text areas in your apps.</p>","childMarkdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Jazz up your workplace with custom Slack emojis. Plus, get tips to combine emojis and encourage emoticon usage at work, including how to add emojis to text areas in your apps."}]}],"data":{"quirksMode":false}}}},"heroImage":{"alt":"Woman stands in front of a colorful painted brick wall, holding balloons shaped like emoji, with a cheeky-faced balloon covering her face.","artistName":null,"image":{"fluid":{"base64":"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAIAAACZeshMAAADoElEQVQYGQXBXWgbdQAA8P993yVp7nK5z2T53NKmZTXWbrqtVKzMgcig7GGI0IF7EMFXnwSFCYr4KhUEH2S++aAvKj4oDket2K60dW3atU3TdE3zcZfPy93l7nJ/fz/k3vKDh80i4HkQo36Yu7y46hF3HlS++6I8c7mr6WdntYwYzadTVb0DEQSBMBRkcJzYXCnzEo++EpsEfQuYBjA7dzf/esw64OaC4zgQRX0ff3N+Xlbih822NtBatX8q2hkkKQf6bCJYN2zs0y+/cs/1zVIR9BDQHfRFfGGicOqQzwBKE4TIsgGa6g09jITZOMMAre3zUY5XVOF5s4ZfILWPJ4aFxuGHXcGDw58OlaWX0yLkO6Uz1Dn3rCesMIxboGTGyuhFQZTMptU2Teh41tDDpeYniHJ+f84Vtip1L3IplFJJ9enBce+ouDRjSDOzIEgKKJbUaisHJ/t9FUEwkqJVmRMlCXt/vhjgU3TiSibYSaFCJDDpSuPpZHo+MhDpo6qjYhzvYGHYM+UgHFJZReChN4IQVBo6vj/4AD9Y5jL+WHIc+HalCxiGZhhqzOuPdAMlviWIDBEQh3WfZF5QRdaBSDgS2Nwrfb5Vw8Hs/bWdeHbno0w+jnC3GW3faxWl2jGtLxvWYkea8wydNRnfoQlaQgm6cV6jKRKiSFtMIp99/+PQdWdlKtb9/cmRx4X6c2pRr4mHjpoxNtpe4N/n8j0r7iqt9VvvNgHzdcWeCdPHRLgVjSF/rm/7vm+5rsiF/ljd2N5Zy+ONh4dMbkqW3dZimsnpz8RRo0qkNfH6NqIcRPPfAA4wIYAiOARAEKK2ZdqWfTWX1Nq1RyfkRbmVRLorJzbHqOPpl0x/sNaIzvaPlhauWGqisFbUPHqA0tjri2+rikzTVN+0VJ6JKWqIYDxNYyAR4YTfHp8NfX9qrDfQR288Qq8VsookoyPntalEQQpir751N5WI+QAJwkEkEGC5yI3pCeVC8tfVdZ4I4Rg2fXPasOw8evp3BTWG5lgQE1Q1SNE4QeDt7oBEIIrjO+Vyu1k13REboCdz4yrP93zPsu39rfopRf3y31CaTuZk9xL5dLeCUeksAhFs5/rCtRCLA2ejtFdulEIYYlh2qdbZO9YkmS1czVfr2nnP0gETDzOFyUkx82K10TFMz3F9vDXVfG/l5xxv1zkymwq4J1poRGpsOJtO5Fq7FuaPzB5F0ThOv3PrBsTw3WPdcWFcFpRI5H92SLqyNQt4GwAAAABJRU5ErkJggg==","aspectRatio":1.2173913043478262,"src":"//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=739&q=50&fit=scale","srcSet":"//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=185&h=152&q=50&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=370&h=304&q=50&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=739&h=607&q=50&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=896&h=736&q=50&fit=scale 896w","srcWebp":"//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=739&q=50&fm=webp&fit=scale","srcSetWebp":"//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=185&h=152&q=50&fm=webp&fit=scale 185w,\n//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=370&h=304&q=50&fm=webp&fit=scale 370w,\n//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=739&h=607&q=50&fm=webp&fit=scale 739w,\n//images.ctfassets.net/s600jj41gsex/w7OCwagmDiJnxEsethdRM/aa5b29ad044d63da73c323c9c2ea3d5b/Image_default_world-emoji-day.png?w=896&h=736&q=50&fm=webp&fit=scale 896w","sizes":"(max-width: 739px) 100vw, 739px"}}},"author":{"name":"Ben Long","slug":"ben-long"},"category":{"title":"World of WYSIWYG","slug":"wysiwyg-world"},"metaTitle":{"metaTitle":"Best custom Slack emojis for the workplace | TinyMCE"},"metaDescription":{"metaDescription":"Jazz up your workplace with custom Slack emojis. Plus, get tips to combine emojis and encourage emoticon usage at work, including how to add emojis to text areas in your apps."}}}]}},"pageContext":{"limit":12,"skip":0,"numPages":1,"currentPage":1,"slug":"emoticons","title":"Emoticons","page":"tag","banner":{"description":"Deploy TinyMCE in just 6 lines of code","buttonLabel":"Get your Cloud API Key","externalLink":"https://www.tiny.cloud/get-tiny/","section":["category","author","posts","home","tag"]},"bannerForTag":{"bannerDescription":"Want to easily add emojis into your content?","bannerButtonLabel":"Explore Emoticons","bannerExternalLink":"https://www.tiny.cloud/docs/tinymce/6/emoticons/","bannerIsEnabled":true}}},"staticQueryHashes":["2492987505","740350947"]}