Support Emoticons via WYSIWYG Editor #4434

New Issue

OVERLORD · 2026-02-05T08:52:54+03:00

OVERLORD commented

2026-02-05 08:52:54 +03:00

Originally created by @Roemer on GitHub (Jan 29, 2024).

Describe the feature you'd like

TinyMCE has a plugin that enables emoticons to be added via editor: https://www.tiny.cloud/docs/tinymce/6/emoticons/
Either add it by default or at least add the plugin so it can be activated via customization and the hooks.

Describe the benefits this would bring to existing BookStack users

This allows less experienced users to add emoticons via editor. These are not only smileys but more importantly also stuff like ticks, cross (✅❌) and other symbols that can be useful.

Can the goal of this request already be achieved via other means?

The emoticons can be looked up on any emoticon site and copy / pasted. This is cumbersome and not convenient, giving that this feature is possible with tinyMce by default.

Have you searched for an existing open/closed issue?

I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

Under 3 months

Additional context

The feature request was already open in 2021 (https://github.com/BookStackApp/BookStack/issues/3017) but was closed as back then, a move away from tinyMCE was the plan which was dropped in 2022 I suppose.

Originally created by @Roemer on GitHub (Jan 29, 2024). ### Describe the feature you'd like TinyMCE has a plugin that enables emoticons to be added via editor: https://www.tiny.cloud/docs/tinymce/6/emoticons/ Either add it by default or at least add the plugin so it can be activated via customization and the hooks. ### Describe the benefits this would bring to existing BookStack users This allows less experienced users to add emoticons via editor. These are not only smileys but more importantly also stuff like ticks, cross (✅❌) and other symbols that can be useful. ### Can the goal of this request already be achieved via other means? The emoticons can be looked up on any emoticon site and copy / pasted. This is cumbersome and not convenient, giving that this feature is possible with tinyMce by default. ### Have you searched for an existing open/closed issue? - [X] I have searched for existing issues and none cover my fundamental request ### How long have you been using BookStack? Under 3 months ### Additional context The feature request was already open in 2021 (https://github.com/BookStackApp/BookStack/issues/3017) but was closed as back then, a move away from tinyMCE was the plan which was dropped in 2022 I suppose.

OVERLORD added the 🔨 Feature Request label 2026-02-05 08:52:54 +03:00

OVERLORD commented

2026-02-05 08:52:57 +03:00

@ssddanbrown commented on GitHub (Jan 29, 2024):

Hi @Roemer,

The feature request was already open in 2021 (https://github.com/BookStackApp/BookStack/issues/3017) but was closed as back then, a move away from tinyMCE was the plan

The move away from TinyMCE was a side point, with my main reasons for closing that as:

I wouldn't look to integrate any custom emoticons in BookStack as I'd prefer to keep content related to widely-supported standards.

We can support standard emoji but there's no confirmed nice web standard for selection of such characters right now. That said, most operating systems have an emoji picker built in to them. I know Windows, Android, iOS and Mac all have such emoji picker support. Think it's becoming a supported feature in some linux systems now.

Personally I don't think a custom picker implementation, in addition to using up another editor toolbar space, would be worth it.

Again, I don't really think there's enough reason to implement and maintain a full emoji picker within the application since operating systems already fill this gap in a way that would handle various issues much better than we'd be able to handle (Internationalization, Unicode updates/changes etc...)

or at least add the plugin so it can be activated via customization and the hooks

I think I tend to remove that one specifically since it can be quite large. TBH If anything, I may look to go the direction of removing more of the plugins we don't actively use by default.
You could always host them in a custom location, then add them via the external_plugins TinyMCE option. Just a case of watching for version changes to keep aligned.

@ssddanbrown commented on GitHub (Jan 29, 2024): Hi @Roemer, > The feature request was already open in 2021 (https://github.com/BookStackApp/BookStack/issues/3017) but was closed as back then, a move away from tinyMCE was the plan The move away from TinyMCE was a side point, with my main reasons for closing that as: > I wouldn't look to integrate any custom emoticons in BookStack as I'd prefer to keep content related to widely-supported standards. > We can support standard emoji but there's no confirmed nice web standard for selection of such characters right now. That said, most operating systems have an emoji picker built in to them. I know Windows, Android, iOS and Mac all have such emoji picker support. Think it's becoming a supported feature in some linux systems now. > Personally I don't think a custom picker implementation, in addition to using up another editor toolbar space, would be worth it. > Again, I don't really think there's enough reason to implement and maintain a full emoji picker within the application since operating systems already fill this gap in a way that would handle various issues much better than we'd be able to handle (Internationalization, Unicode updates/changes etc...) --- > or at least add the plugin so it can be activated via customization and the hooks I think I tend to remove that one specifically since it can be quite large. TBH If anything, I may look to go the direction of removing more of the plugins we don't actively use by default. You could always host them in a custom location, then add them via the `external_plugins` TinyMCE option. Just a case of watching for version changes to keep aligned.

OVERLORD commented

2026-02-05 08:53:02 +03:00

@Roemer commented on GitHub (Jan 29, 2024):

Good hint with external_plugins, didn't know about that. This might be worth a hacking BockStack entry, especially if you would like to remove more plugins?
I was able to add it like this in editor-tinymce::pre-init:

    mceConfig.toolbar += ' emoticons';
    mceConfig.plugins.push('emoticons');
    mceConfig.external_plugins = {
      'emoticons': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.2/plugins/emoticons/plugin.min.js'
    };

@Roemer commented on GitHub (Jan 29, 2024): Good hint with `external_plugins`, didn't know about that. This might be worth a `hacking BockStack` entry, especially if you would like to remove more plugins? I was able to add it like this in `editor-tinymce::pre-init`: ``` mceConfig.toolbar += ' emoticons'; mceConfig.plugins.push('emoticons'); mceConfig.external_plugins = { 'emoticons': 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.2/plugins/emoticons/plugin.min.js' }; ```

OVERLORD commented

2026-02-05 08:53:04 +03:00

@vmario89 commented on GitHub (Oct 27, 2024):

you can do this in customization page - charmap and emoticons:

<!--TinyMCE: Charmap -->
<script type="text/javascript">
  window.addEventListener('editor-tinymce::pre-init', event => {
      const mceConfig = event.detail.config;
      mceConfig.toolbar += ' charmap';
      mceConfig.plugins.push('charmap');
  });
</script>

<!--TinyMCE: Emoji Picker (Emoticons) -->
<script type="text/javascript">
  window.addEventListener('editor-tinymce::pre-init', event => {
      const mceConfig = event.detail.config;
      mceConfig.toolbar += ' emoticons';
      mceConfig.plugins.push('emoticons');
      mceConfig.external_plugins = {
        'emoticons': 'https://docs.yoururl.org/libs/tinymce/plugins/emoticons/plugin.min.js'
      };
  });
</script>

mkdir -p /var/www/vhosts/docs.yoururl.org/public/libs/tinymce/plugins/emoticons/js/
cd mkdir -p /var/www/vhosts/docs.yoururl.org/public/libs/tinymce/plugins/emoticons

wget https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.2/plugins/emoticons/plugin.min.js

cd js/
wget https://petra.gov.my/assets/minible/libs/tinymce/plugins/emoticons/js/emojis.min.js

chown -R www-data:www-data cd mkdir -p /var/www/vhosts/docs.yoururl.org/public/libs/tinymce/plugins/

testet with v24.10 - works fine!

@vmario89 commented on GitHub (Oct 27, 2024): you can do this in customization page - charmap and emoticons: ```  <script type="text/javascript"> window.addEventListener('editor-tinymce::pre-init', event => { const mceConfig = event.detail.config; mceConfig.toolbar += ' charmap'; mceConfig.plugins.push('charmap'); }); </script>  <script type="text/javascript"> window.addEventListener('editor-tinymce::pre-init', event => { const mceConfig = event.detail.config; mceConfig.toolbar += ' emoticons'; mceConfig.plugins.push('emoticons'); mceConfig.external_plugins = { 'emoticons': 'https://docs.yoururl.org/libs/tinymce/plugins/emoticons/plugin.min.js' }; }); </script> ``` ``` mkdir -p /var/www/vhosts/docs.yoururl.org/public/libs/tinymce/plugins/emoticons/js/ cd mkdir -p /var/www/vhosts/docs.yoururl.org/public/libs/tinymce/plugins/emoticons wget https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.2/plugins/emoticons/plugin.min.js cd js/ wget https://petra.gov.my/assets/minible/libs/tinymce/plugins/emoticons/js/emojis.min.js chown -R www-data:www-data cd mkdir -p /var/www/vhosts/docs.yoururl.org/public/libs/tinymce/plugins/ ``` testet with v24.10 - works fine! ![grafik](https://github.com/user-attachments/assets/f49ace5c-270c-4228-88c3-acb531cbba2d)

OVERLORD commented

2026-02-05 08:53:06 +03:00

@Ainz commented on GitHub (Nov 21, 2024):

you can do this in customization page - charmap and emoticons:

testet with v24.10 - works fine!

So in what file exactly did you do the modification to activate that? What bookstack file ?

@Ainz commented on GitHub (Nov 21, 2024): > you can do this in customization page - charmap and emoticons: > > testet with v24.10 - works fine! So in what file exactly did you do the modification to activate that? What bookstack file ?

OVERLORD commented

2026-02-05 08:53:09 +03:00

@vmario89 commented on GitHub (Nov 21, 2024):

you need to put that https://your.bookstack.org/settings/customization customization field (for example). you can also put elsewhere, where it gets to load

@vmario89 commented on GitHub (Nov 21, 2024): you need to put that https://your.bookstack.org/settings/customization customization field (for example). you can also put elsewhere, where it gets to load

OVERLORD commented

2026-02-05 08:53:19 +03:00

@Ainz commented on GitHub (Nov 22, 2024):

you need to put that https://your.bookstack.org/settings/customization customization field (for example). you can also put elsewhere, where it gets to load

Ah in there: settings > custom html... gotcha. Thanks.

Already have tons of css in that place. I thought I had to create a file and call it via a custom blade using the theme system... I do really want to avoid editing core files.

@Ainz commented on GitHub (Nov 22, 2024): > you need to put that https://your.bookstack.org/settings/customization customization field (for example). you can also put elsewhere, where it gets to load Ah in there: settings > custom html... gotcha. Thanks. Already have tons of css in that place. I thought I had to create a file and call it via a custom blade using the theme system... I do really want to avoid editing core files.

OVERLORD commented

2026-02-05 08:53:21 +03:00

@Ainz commented on GitHub (Nov 22, 2024):

I noticed you can actually select your Tiny version to get the emoticon js file via https://cdnjs.com/libraries/tinymce (look for "emoticons") and that our version is 6.8.4 according to the tinymce.min.js file in the bookstack installation...

It is also kinda easy to miss that you have to edit the sites path in the last lines of the emoticons script.

In any case I am not getting the emoticons section to work

Maybe due to javascript limitation in .env ?
Ref: https://www.bookstackapp.com/docs/admin/security/#javascript-in-page-content

No that was not it.

AH! I have my site defined without "www" in .env, and when using the path in the script I wrote it with "www"... when making sure both were the same it works, no need to add javascript tag to .env

@Ainz commented on GitHub (Nov 22, 2024): I noticed you can actually select your Tiny version to get the emoticon js file via https://cdnjs.com/libraries/tinymce (look for "emoticons") and that our version is 6.8.4 according to the tinymce.min.js file in the bookstack installation... It is also kinda easy to miss that you have to edit the sites path in the last lines of the emoticons script. In any case I am not getting the emoticons section to work Maybe due to javascript limitation in .env ? Ref: https://www.bookstackapp.com/docs/admin/security/#javascript-in-page-content No that was not it. **AH!** I have my site defined without "www" in .env, and when using the path in the script I wrote it with "www"... when making sure both were the same it works, no need to add javascript tag to .env

OVERLORD commented

2026-02-05 08:53:23 +03:00

@vmario89 commented on GitHub (Nov 25, 2024):

you can also have a check in your browser console about that. it will always tell you a bit more about possible js loading issues like blocked stuff by CORS, wrong URLs, typos, ...

@vmario89 commented on GitHub (Nov 25, 2024): you can also have a check in your browser console about that. it will always tell you a bit more about possible js loading issues like blocked stuff by CORS, wrong URLs, typos, ...

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4434