TinyMCE 6 Mention Plugin - Provision to change "@" symbol to "#" symbol

Question

I am doing a POC on TinyMCE Mention Plugin by using 14days free trial version of TinyMCE 6. As per the Mention Plugin documentation, "The mentions plugin will present a list of users when a user types the "@" symbol followed by the beginnings of a username after it." I want to know if there is any provision to configure the "@" symbol. I want to achieve the same Mention plugin functionality with the "#" symbol. Does TinyMCE Mention Plugin provide any such option to use '#' symbol instead of '@'.

TinyMCE 6 Mention Plugin link - https://www.tiny.cloud/docs/tinymce/6/mentions/

I am trying to implement TinyMCE Mention Plugin functionality with "#" symbol

RobinJoe · Accepted Answer · 2023-05-12T09:22:43.557

The mentions plugin is designed to use the "@" symbol, and does not come with the option to change the trigger character. For the POC there is a provision to configure the '#' symbol and create something that does function similarly to mentions. It can be done using the addAutocompleter API and creating a custom autocompleter, which is explained in the docs: https://www.tiny.cloud/docs/tinymce/6/autocompleter/#how-to-create-custom-autocompleters

Here's a demo that shows mentions and autocompleter side by side so you can evaluate the differences between the two.

The mentions plugin does make the process of setting up tagging easier overall. Mentions and autocompleter are designed for two different cases, which you can see in the example and the documentation.

https://fiddle.tiny.cloud/G3iaab

        const usersVer1 = [
            { text: 'John Doe', value: 'John Doe'},
            { text: 'Jane Doe', value: 'Jane Doe'},
        ];

        tinymce.init({
            selector: 'textarea',
            plugins: 'mentions autolink code table lists link paste textcolor colorpicker wordcount autocompleter',
            toolbar: 'bold italic underline | alignleft aligncenter alignright alignjustify | code',
            mentions_menu_complete: true,
            mentions_fetch: function (query, success) {
              var usersVer2 = [
                { id: '1', name: 'John Doe', username: 'johndoe' },
                { id: '2', name: 'Jane Doe', username: 'janedoe' }
              ];
              success(usersVer2);
            },
            mentions_select: function (mention) {
              return '<a href="/usersVer2/' + mention.username + '">' + mention.name + '</a>';
            },

            setup: (editor) => {
                const onAction = (autocompleteApi, rng, value) => {
                  editor.selection.setRng(rng);
                  editor.insertContent(value);
                  autocompleteApi.hide();
                };

                const getMatchedChars = (pattern) => {
                  return usersVer1.filter((char) => char.text.indexOf(pattern) !== -1);
                };

                editor.ui.registry.addAutocompleter('Mentions-trigger', {
                 trigger: '#',
                 minChars: 0,
                 columns: 1,
                 onAction: onAction,
                  fetch: (pattern) => {
                    return new Promise((resolve) => {
                      const results = getMatchedChars(pattern).map((char) => ({
                        type: 'autocompleteitem',
                        value: char.value,
                        text: char.text,
                        icon: char.value
                    }));
                resolve(results);
            });
          }
      });
     }

TinyMCE 6 Mention Plugin - Provision to change "@" symbol to "#" symbol

1 Answers1