I am trying to work around the limitation of the rich text editor to include images (inline, not through url). To do so, I would like to replace certain keywords in the rich text field with the actual images which was uploaded separately.
Example:
This is some text with rich text formatting
[IMAGE]
Continue text
At the location where it says [IMAGE], I would like to replace the content with an pointing to the actual image file and thus showing the image. Note: this is not to be done during editing, only when showing the rich text content.
The thing that I am not able to work round is to get the proper url from the image that was uploaded before. I am using the default FileDescriptor for uploading the images.
Clarification:
Where it states: “At the location where it says [IMAGE],…”, it should read like this:
At the location where it says [IMAGE], I would like to replace the content with an img tag:
<img src="link tio image within the application"/>
where the src attribute is pointing to the actual image file and thus showing the image. Note: this is not to be done during editing, only when showing the rich text content.
Well, after a lot of trial and error I actually got this to work using the code shown below. This might help others as well so I am providing the solution here.
// Replace tags with attached images
String richContent = object.getRichContent();
Set<Image> imageFiles = page.getImages();
for (Image i : imageFiles) {
byte[] bytes = null;
String imgTag = i.getImageTag();
FileDescriptor imageFile = i.getImageFile();
// Get image as bytes
if (imageFile != null) {
try {
bytes = fileStorageService.loadFile(imageFile);
} catch (FileStorageException e) {
showNotification("Unable to load image file", NotificationType.HUMANIZED);
}
}
if (bytes != null) {
// Get Base64 encoded image string
byte[] encodedBytes = Base64.encodeBase64(bytes);
String imgHtmlTag = "<img alt='" + imageFile.getName() + "' src='data:image/"+ imageFile.getExtension() + ";base64," + new String(encodedBytes);
imgHtmlTag = imgHtmlTag + "' style='max-width: 100%;'/>";
// Replace tag in content with imageTag
richContent = richContent.replaceAll("\\[" + imgTag + "\\]",imgHtmlTag);
} else {
showNotification("Empty file?", NotificationType.HUMANIZED);
}
}
// Set richContent in label control
richContentLabel.setValue(richContent);
I am using an Image object that extends the normal FileDescriptor to add a Tag field that is used to identify the location in the rich text.
Within the page I am using a HTML enabled Label component to display the text including images.
Having a rich text editor that would include the images within the content value would be best, also in usability terms but this turns out to be a very acceptable workaround.