Insert image into Primefaces editor

问题

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.

回答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

回答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.

来源：https://stackoverflow.com/questions/29241869/insert-image-into-primefaces-editor

标签

image

primefaces

upload

editor