@codejq Welcome to collabora online forum
To insert an image using the Action_InsertGraphic or Action_Paste in Collabora Online, follow these steps:
-
Ensure Host is Allowed: Verify that your server IP or hostname is allowed in your
coolwsd.xml
configuration file.<lok_allow desc="Allowed hosts as an external data source inside edited files. All allowed post_allow.host and storage.wopi entries are also considered to be allowed as a data source. Used for example in: PostMessage Action_InsertGraphics, =WEBSERVICE() function, external reference in the cell."> <host desc="Your Server">your.server.ip.or.hostname</host> </lok_allow>
- someone uses server with domain: test.com which leads to 1.2.3.4 IPv4
- if the URL contain domain, we need to enable domain in lok_allow( text.com)
- if the URL contains ip we need to enable ip (1.2.3.4)
- we do not do DNS resolve of the domain, so if we will enable ip, but use domain in the url - it will not work
- Also lok_allow takes regex, so it is possible to write scheme of the domain/ip
-
Use PostMessage API: Use the PostMessage API to send a message to insert the graphic. Here’s an example of how to insert an image using the Action_InsertGraphic.
document.getElementById('insertImageButton').addEventListener('click', function() { if (isFrameReady && isHostReadySent) { const iframe = document.getElementById('office').contentWindow; const imageUrl = 'http://your.server.ip.or.hostname/path/to/your/image.png'; // Update with your image URL const message = { MessageId: 'Action_InsertGraphic', SendTime: Date.now(), Values: { filename: 'image.png', url: imageUrl } }; console.log("Sending InsertGraphic message:", message); iframe.postMessage(JSON.stringify(message), '*'); // Ensure this matches the PostMessageOrigin } else { console.log('Frame is not ready yet or Host_PostmessageReady not sent.'); } });
-
Enable CORS (Cross-Origin Resource Sharing): Ensure that the server hosting the image allows cross-origin requests if your image is hosted on a different domain.
-
Debugging Tips: If it still doesn’t work, check the following:
- Verify the image URL is correct and accessible.
- Check browser console logs for any errors or warnings.
By following these steps, you should be able to insert images using the Action_InsertGraphic message in Collabora Online.
I found this discussion in which a user tries to insert graphics using Postmessage API from NC, it might be helpful for you.
Let us know if any further assistance.
Thanks,
Darshan