User Mention in CK Editor

Hello @mflorea ,

I need to know, whether it is possible to mention the user’s name in content.

While googling I have found this link,

Can you please let me know, whether it can be integrated with XWiki CK Editor.

1 Like

You can integrate external CKEditor plugins using http://extensions.xwiki.org/xwiki/bin/view/Extension/CKEditor+Integration#HUseadditionalCKEditorplugins but before you do this you need to think about how it will be saved as wiki syntax, because whatever you do in CKEditor is saved as wiki syntax in XWiki. So your first question should be instead: “how can I mention the user’s name in wiki syntax?”. XWiki syntax version 2.1 (latest) doesn’t support this out of the box and currently the only way to extend the syntax is through rendering macros. So you need to create a rendering macro that would be used like this (just an example):

{{mention user="mflorea" /}}

It doesn’t look sexy but it’s the easiest solution. If you do this then you will be able to insert a mention with the macro button from the CKEditor tool bar, or use a dedicated tool bar button http://extensions.xwiki.org/xwiki/bin/view/Extension/CKEditor+Integration#HPutDedicatedInsertMacroButtonsontheToolBar .

Hope this helps,
Marius

I’ve been thinking that this would bee a cool bit of functionality to have too. @prase09, if you manage to get something working it would be nice to see how you did it.

Thanks,
Ben

I have planned to create an renderiing macro for user mention. It would be great if anyone provide me with ideas/samples of accessing the XWiki User list.

@tmortagne i hope you could help me on this?

@mflorea

I was started to work on this, but i found that few cases that does not satisfies it. As you mention in this example,

If suppose we have more than 2 users named

mflorea maurius
mflorea dumitru

In both case we have one common name, in this case user need to provide exact name else whether we have any option of autocomple like below,

Pretty much :confused::confused::confused:

In my example:

{{mention user=“mflorea” /}}

mflorea is the user alias, which is unique, not the user name. The user alias is what you use to log in XWiki. Don’t forget that my example is wiki syntax. You would have to decide how this macro is rendered in view mode (e.g. display the user full name).

@mflorea

Yes you are right, user alias is unique, if i have user alias as

mflorea.maurius
mflorea.dumitru

While typing mflorea i should show some suggestions in autocomplete textbox. Is that possible(Autocomplete textbox) in rendering macro?

The rendering macros are usually responsible only for generating the output you see in view mode. In some cases they also generate a placeholder for edit mode, but just that. So basically you could view a rendering macro as a function that get as input the macro parameters and its raw content and produce the output visible in view mode. Most of the macros are doing just that. So they are not responsible for editing themselves or inserting themselves in the page. That is a feature of the editor used to edit the page content (or the content where you want to call the macro).

So a feature that suggests users when you type @ (as we have in this forum) needs to be implemented in the editor. Either the Wiki editor or the WYSIWYG editor (CKEditor). The editor would then insert the mention macro after you select the user.

@mflorea

Is this possible to be integrated with XWiki CK Editor. I have seen some demo regarding this, conveys it supports WYSIWYG like CK Editor using iframe.

Do you have any idea?

@prase09, @mflorea , just an idea, but how about having this functionality in page comments too?

Yes, it should be possible. You would need to write a CKEditor plugin that integrates that library and which injects the mention macro after the user selects the user.

@mflorea

I tried to add this code in the Javascript Extension, where i get this below error,

I used the call those libraries in the xwiki:dom:loaded event. Also am getting the same error.

Sample:

document.observe("xwiki:dom:loaded", function(){
// dependency libraries
});

var at_config = {
	at: "@",
	data: ["prasanth", "kumar" ],
	tpl: "<li data-value='@${name}'>${name}</li>"
}

require(['deferred!ckeditor'], function(ckeditorPromise) {
    ckeditorPromise.done(function(ckeditor) {
        CKEDITOR.plugins.add('xyz', {

            // The plugin initialization logic goes inside this method.
            init: function(editor) {
                function load_atwho(editor, at_config) {
                    // WYSIWYG mode when switching from source mode
                    if (editor.mode != 'source') {

                        editor.document.getBody().$.contentEditable = true;
                        $(editor.document.getBody().$)
                            .atwho('setIframe', editor.window.getFrame().$)
                            .atwho(at_config);
                    }
                    // Source mode when switching from WYSIWYG
                    else {
                        $(editor.container.$).find(".cke_source").atwho(at_config);
                    }
                }

                editor.on('instanceReady', function(event) {
                    var editor = event.editor;
                    // Switching from and to source mode
                    editor.on('mode', function(e) {
                        load_atwho(this, at_config);
                    });
                    // First load
                    load_atwho(editor, at_config);
                });

            }
        });
    });
})

Am not sure of how to integrate in javascript extension code.

At.js depends on jQuery and you’re mixing jQuery with Prototype.js. The $ sign in the following line of your code points to Prototype.js while it should point to jQuery

$(...).atwho(...)

You need to add jQuery to your list of require dependencies:

require(['jquery', 'deferred!ckeditor'], function($, ckeditorPromise) {

@mflorea

Thanks, also i need to refer two libraries for this At.js to work.
Can you please suggest how it can be done?

After modifying like your suggestions

am getting console error like this,

@mflorea

Fixed the above issues, and i have integrated with the CK editor.

Please address this issue, XWiki User Class Object in Javascript Extension

That’s nice! What does this translate to in wiki syntax and what does it do? You have implemented some document listener to perform some action upon doc save?

EDIT: Just read the thread and saw the {{mention}} macro. What does it do?

@vmassol

Yes , it translate to wiki syntax.

Cool! Would be nice to have this as an extension :stuck_out_tongue:

@mflorea

Definitely, am currently working on mapping xwiki users into it. Once it complete, ill update it as snippet :slight_smile:

Not sure of extension :stuck_out_tongue: