Insert image into Primefaces editor - image

Question

I'm using JSF2.2, Tomcat 8 and MySQL DB to create a simple CMS. In my back pages I use Primefaces p:editor to create/edit my page content. I would like to insert an image somewhere into the text. It would be great if I could upload the image and insert it at the current cursor position. Ideally, the image should be saved as a blob, but if it's easier for the implementation it could instead be stored as a local file.
I can see that p:editor already has an option to insert a URL of an image, resulting in the <img> tag in the text. But I would really like the possibility to upload an image from my local drive. I haven't been able to Google anything useful so far.

Answer 1

this is how i did it:
.xhtml:
<p:editor id="editor"
widgetVar="editWidget"
value="#AnnouncementBean.text}" />
<p:fileUpload id="upload"
fileUploadListener="#{AnnouncementBean.uploadListener}"
label="Insert image"
mode="advanced"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
update="editor, growl">
</p:fileUpload>
An in my Backing Bean in the uploadListener after file upload:
String value = FacesContext.getCurrentInstance()
.getExternalContext().getRequestParameterMap().get("editor_input");
setText(value + "<img src=\"/uploads/" + result.getName()+"\" />");
RequestContext.getCurrentInstance().update("editor_input");
where "editor_input" referes to the actual form field submitted for the editor (PF adds the_input to the id of your editor)
Notice how I update the editor_input not the actual editor. Only problem now is that the image is appended to the end of the text. sou you must move it manually within the editor

Answer 2

You can use a string to receive the editor (or textEditor) value, then use regex to find all img elements.
This is my code.
String regex="<img src="data:image/(gif|jpe?g|png);base64,([^"]*")[^<>]*>";
Matcher m = Pattern.compile(regex).matcher(your_textEditor_value);
while(m.find()){
String imageFileType=m.group(1);
String imageDataString=m.group(2);
byte[] imageData=Base64.decodeBase64(imageDataString);
}
The imageFileType is your file type, and imageData is data of the file. You can use it to do other thing.