mervick/emojionearea

textcomplete js doesn’t work with emojiarea

Opened this issue · 0 comments

hello @mervick, thanks for your plugin it’s really great. I have to add references to it and in my research I found that it did not work with tribute and atwho. I saw that you suggested jquery.textcomplete the mentions. But when I use your code underneath, we put an error:

Uncaught TypeError: this.editor.textcomplete is not a function

Please help me. thanks.

You can use bundled textcomplete plugin,
add script below in the your header,

<script src="https://cdn.rawgit.com/yuku-t/jquery-textcomplete/v1.3.4/dist/jquery.textcomplete.js"></script>

and after that

$(document).ready(function() {
    $("#emojionearea1").emojioneArea({
        pickerPosition: "right",
        tonesStyle: "bullet",
        autocomplete: true,
        events: {
            ready: function() {
                this.editor.textcomplete([{
                    id: 'emojionearea',
                    match: /\B@([\-\d\w]*)$/,
                    search: function (term, callback) {
                        // this code must be replaced with your
                        // load mentions from ajax
                        var mentions = ['Peter', 'Tom', 'Anne'];
                        callback($.map(mentions, function (mention) {
                        return mention.indexOf(term) === 0 ? mention : null;
                    }));
                    },
                    template: function (value) {
                        return '<b>' + value + '</b>&nbsp;';
                    },
                    replace: function (value) {
                        return '<b>@' + value + '</b>&nbsp;';
                    },
                    cache: true,
                    index: 1
                }]);
            }
        }
    });
});

Example: https://jsfiddle.net/1v03Lqnu/898/
type : for autocomplete emotions
type @ for autocomplete mentions

Originally posted by @mervick in #233 (comment)