Ckeditor issue calling setData during onchange event

Question

I am trying to create a plugin that works similar to the tagging feature here on Stack Overflow. The plugin adds an onchange event to the editor and than checks the data to see if the user entered a tag and replaces any tags found with a div.

CKEDITOR.plugins.add('tagit', {
    icons: '',
    init: function (editor) {
        var tags = ['MyTag'],
            tokens = [];

        editor.on('change', function (event) {
            var tokenUpdated = false;
            tokens = tokenize(event.editor.getData());
            for (var tokenIndex = 0; tokenIndex < tokens.length; tokenIndex++) {
                var token = String(tokens[tokenIndex]);
                if (!token.match(/tagit/gmi) && tags.some(function (tag) { return token.indexOf(tag) >= 0; })) {
                    tokens[tokenIndex] = '<div class="tagit">' + tokens[tokenIndex] + '</div>';
                    tokenUpdated = true;
                }
            }
            if (tokenUpdated) {
                event.editor.setData(tokens.join(''));
            }
        });

        var tokenize = function (data) {
            var match = '(<div class="tagit">.*?<\/div>)';
            for (var i = 0; i < tags.length; i++) {
                match += '|(' + tags[i] + ')';
            }
            var re = new RegExp(match, "gmi");
            return data.split(re);
        }
    }
});

The problem is when I call setData the change event is fired again and event.editor.getData() returns the html before I called setData. Is the change event fired before the data has actually been set? There's an option internal that I tried setting to true but than the data doesn't appear to be updated.

Answer 1

You are changing editors content so it's natural that change event will be called with editor.setData function. TBO I think that your implementation has a much important problem than circular call - you are comparing HTML content by regex. It's bad practice and you will encounter more problems during this implementation.

This feature is not obvious and requires working with document selection, not simply querying its content (also for performance reasons).

But I have a good information. With CKEditor 4.10 we are shipping new plugins which can easily be used to create feature you are talking about - especially textmatch and textwatcher. Mentioned plugins will be shipped alongside with autocomplete and mentions plugins. You can read more about our progress on GH:

Mentions: https://github.com/ckeditor/ckeditor-dev/issues/1703

Autocomplete: https://github.com/ckeditor/ckeditor-dev/issues/1751

4.10 release is set on 26 June but it could change, check GH milestones for updates.

After release, I can provide some example implementation for your feature - but I'm sure that with new plugins it will be easy as pie.