Problem with selfmade macro: CKEditor adds handle.png after it

Help / Discuss
, ,
1

Hello, friends! I asking for advice and help from the community.

I have developed a photo gallery macro using Cursor AI code editor. Yes, I know there is a Gallery Macro, but it does not output beautiful previews on the page and it needs to be customized.

Based on my requirements, Cursor Ai created a macro that automatically displays a set of thumbnails for uploaded images on a wiki page. It can be used to display attachments from the current page, other page, or from the entire wiki. The choice is available in the gallery menu. All thumbnails have the same proportions and simple animation, which allows them to look good on the page.

In the gallery menu, you can set the size and number of thumbnails, the size of the viewing window (lightbox), and sorting.

2025-09-16_13-55-01
2025-09-16_13-55-011549Ă—916 148 KB

Click on a thumbnail opens the lightbox window. In the lightbox window, you can download the original image or get a link to it.

The macro works great, but there is one bug that Cursor AI can’t fix.

In WYSIWYG page editing mode, when we insert a macro, CKEditor adds a line with an icon (handle.png) after the macro.

In source mode it looks like this: after the macro code:

{{photogallery/}}

the following block of code is automatically added:

(% style="background:url(~"http://localhost:8080/xwiki/webjars/wiki%3Axwiki/xwiki-platform-ckeditor-webjar/17.4.4/plugins/widget/images/handle.png~") rgba(220, 220, 220, 0.5); left:0px; top:-15px" %)[[image:data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==||height="15" role="presentation" title="Click and drag to move" width="15"]]

And with each subsequent saving of the page, a new icon is added and, accordingly, a new block of code in the markup.

This error only appears if we save the page in CKEditor. If we save in Wiki Editor, the macro remains clean, nothing is added.

Please tell me what could be the problem and how to get rid of this behavior of CKEditor?

I would be very grateful for your help!

The macro itself is a page with velocity code and uploaded .JS and .CSS files.

XWiki version - 17.4.4

I can export the macro page to XAR and post it here for analysis if that helps.

2

That’s the drag handle for the macro. CKEditor allows you to move macros around with drag & drop.

You need to check if the HTML output of your macro is valid. One way to do this (provided the macro outputs the same thing in view and edit mode) is to take the source HTML of the web page from view mode and validate the HTML using some online tool. CKEditor expects valid HTML. Invalid HTML is known to create issue.

Then, since your macro is using JavaScript, you need to make sure that JavaScript code affects only the HTML (DOM) within the macro wrapper (I assume your macro produces some “root” HTML element that includes everything your macro outputs). Changes outside the macro output are not saved, at best, or create issues, at worse. Look for JavaScript exceptions in the browser’s developer tools console.

Another possible issue is that the output HTML of your macro or your JavaScript code is conflicting with the code that handles macros in CKEditor / XWiki (e.g. using the same CSS class names).

That can help. I can try to reproduce the problem if you give me the XAR.

Thanks,
Marius

1 Like
3

Hi, Marius! Thank you so much for your offer of help!

I checked the web page console in the browser in edit mode. And there are CKEditor errors. I’ve attached the log file here:

localhost-1758194621457.log (13.8 KB)

I also posted an XAR file with the macro, here is the link: https://drive.google.com/file/d/1OFZpBD23IOJ7jspB1-MLhg16IibrtYFf/view?usp=sharing

I’d be very grateful for your help!

4

Hi,

This PrivateBin works for me. The problem was with the way the CSS and JavaScript was loaded. I moved the JS and CSS from attachments to xobjects on the page which is cleaner to load (and modify if needed).

Enjoy,
Marius

1 Like
5

Marius, thank you so much for your help! :heart: Yes, the macro now works without errors, as intended. A thousand thanks! I can share this macro with the community if anyone is interested.

1 Like
6

Glad you got it working.

Would be nice! Either as an extension on extensions.xwiki.org or as a snippet on snippets.xwiki.org

Thx