Change default behavior for copy/pasting images?

Help / Discuss
1

Hello dear XWiki-community,

in my wiki I want to insert big pictures, which should be displayed small, but shown in full size when clicked on them. There are macros (lightbox, for example) which achieve exactly that.
Is there a way to modify the default editor behavior on copy/pasting of images? (so that the pasted image is not put between [[image: and ]], but between the macro tags)

BR
dahin

2

Hi, not possible easily ATM but there are plans to achieve this in some not-too-distant future, see Improvements for images in XWiki

3

What would be the hard way of achieving it? :slight_smile:

4
  • Option 1: You add a JSX (javascript) that reduces images and displays them full screen when clicked
  • Option 2: You replace the Insert Image Dialog plugin of CKEditor with your own version that outputs the image using the syntax you wish.
5

Where would I find the code of the Plugin for option 2? (so I can adjust it)

6

OK, I have not found anything helpful yet.
What I have thought about now is to implement a job (using the scheduler) which replaces all the default image tags with lightroom macro ones.
Does anyone know a proper tutorial for writing such jobs (iterating through articles and replacing source text)?

7

Hi. That would be a really bad solution with lots of limitations :slight_smile:

If you don’t want option 1 (which is the simplest by far IMO) then you could implement an XWiki Event Listener that listens to DocumentModifiedEvent (and DocumentCreatedEvent). There are some tutorials on xwiki.org about that.

8

Please elaborate on option 1 - I have no idea where to start. The last time I did something with JavaScript was 10 years ago.

9

See https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/Tutorials/SkinExtensionsTutorial/ for the JSX in XWiki. As for the javascript to write you’ll have to figure it out yourself since the code doesn’t exist yet. Or wait for xwiki devs to implement it, or sponsor the feature :wink: (or write the Event Listener). But it’s really not hard, I’m sure you could even find existing JS libraries that would do it for you.

10

Mhm, I will report back if I achieve anything and share my solution with the community.