Tagging users from within summernote

If anyone is looking for how to do this I have it working. Add the following code to your page in script tags…

                function tb_hints(){
                dmx.global.set('editorConfig', {
                    height: 100,
                    theme:"lite",
                    placeholder: "Enter Description Here...",
                    hint: {
                        mentions: dmx.parse('sc_tripbits.data.titles'),
                        match: /\B@(\w*)$/,
                        search: function (keyword, callback) {
                            callback($.grep(this.mentions, function (item) {
                                return item.title.indexOf(keyword) == 0;
                            }));
                        },
                        template: function (item) {
                            return item.title;
                        },
                        content: function (item) {
                                return $('<a href="' + item.link + '">' + item.title + '</a>')[0];
                        }
                    }
                });
            }  

The server connect returns a json array with title and link fields. I use the title field to populate the @mentions and when one is selected it inserts the link. You’ll want to replace the sc_tripbits.data.titles with your own server connect and change the ‘title’ and ‘link’ fields as appropriate. You can, of course, use whatever fields from your database you want.

Then add dmx-bind:config=“editorConfig” to your summernote textarea and finally
run the function in the static onsuccess of your server connect, or in a flow with Run Javascript.

Voila!

7 Likes