How can I add smileys in the WYSIWYG ckeditor?

Question

I would like to add some smileys to the WYSIWYG ckeditor. How can I do this?

Answer 1

Adding smileys or emojis to the CKEditor, which is a WYSIWYG (What You See Is What You Get) text editor, involves configuring the editor to allow emoji insertion or integrating an emoji plugin. Here's a general guideline on how you might achieve this:

1. Emoji Plugin Installation: CKEditor offers various plugins that can be integrated to add emoji support. One such plugin is the "Emoji" plugin. If this plugin is not included by default, you might need to download it and add it to your CKEditor installation.

2. Plugin Integration: To integrate the emoji plugin into CKEditor, follow these steps:

   • Download the emoji plugin from the CKEditor plugins repository.

   • Copy the plugin's files to the appropriate directory within your CKEditor installation.

   • Update the CKEditor configuration to include the emoji plugin. You'll typically do this by modifying the config.js file or the configuration initialization code. Add a reference to the emoji plugin in the extraPlugins setting. For example:

     javascript

2. • CKEDITOR.replace('editor', { extraPlugins: 'emoji' });

3. Using Emojis: Once the emoji plugin is integrated, you should see an emoji toolbar or button in the CKEditor interface. Clicking on it will open a menu with available emojis. You can select an emoji to insert it into the editor.

Please note that the specific steps might vary based on the version of CKEditor you are using and the emoji plugin you are integrating. Always refer to the official documentation and resources for your CKEditor version for accurate instructions.

Keep in mind that CKEditor and its plugins evolve, and there might be new methods or plugins available for adding emojis. If you're looking for a more user-friendly and modern solution, you might consider exploring more recent text editors that come with built-in emoji support.

There might have been developments or changes since then.

Comments

Thank you very much for this guide, it helped me a lot :-)

---

This was obviously written by AI… but I guess if it helped then fine.

---

Yeah, I've seen the same case in another answer a couple days ago.

Answer 2

I Found another simple method that also helped me.

To add new smileys to the editor, search the ckeditor directory for "angel_smile".
(as it is one of the default images)

 "\ckeditor\ckeditor.js"

Add the new descriptions and image names to these lists, and then copy the smiley images to the location below 

"\ckeditor\plugins\smiley\images\" (.jpg and .png file for each image)