Вставить изображение в редактор Primefaces

Question

Я использую JSF2.2, Tomcat 8 и MySQL DB для создания простой CMS. На моих обратных страницах я использую Primefaces p:editor для создания/редактирования содержимого моей страницы. Я хотел бы вставить изображение где-нибудь в текст. Было бы здорово, если бы я мог загрузить изображение и вставить его в текущую позицию курсора. В идеале изображение должно быть сохранено как blob, но если его проще реализовать, он может быть сохранен как локальный файл.
Я вижу, что p:editor уже имеет возможность вставить URL-адрес изображения, в результате чего в тексте будет указан тег <img>. Но мне действительно хотелось бы загрузить изображение с моего локального диска. До сих пор я не мог Google ничего полезного.

Answer 1

это, как я сделал это:

.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 в моем езервное Bean в uploadListener после загрузки файла:

String value = FacesContext.getCurrentInstance() 
       .getExternalContext().getRequestParameterMap().get("editor_input"); 
setText(value + "<img src=\"/uploads/" + result.getName()+"\" />"); 
RequestContext.getCurrentInstance().update("editor_input"); 

где "editor_input" referes к поле фактической формы, предоставленное редактору (PF добавляет значение__имя к идентификатору вашего редактора) Обратите внимание, как я обновляю editor_input, а не фактический editor. Только проблема заключается в том, что изображение добавляется в конец текста. вы должны переместить его вручную в редакторе

Answer 2

Вы можете использовать строку, чтобы получить значение редактора (или textEditor), а затем использовать регулярное выражение для поиска всех элементов img.

Это мой код.

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); 
} 

ImageFileType - это ваш тип файла, а imageData - это данные файла. Вы можете использовать его для других целей.