Question

我正在使用JSF2.2，Tomcat 8和MySQL DB来创建一个简单的CMS。在我的后页中，我使用Primefaces p:editor来创建/编辑我的页面内容。我想在文本中的某处插入图像。如果我可以上传图像并将其插入当前光标位置，那将是很棒的。理想情况下，图像应保存为blob，但如果它更容易实现，则可以将其存储为本地文件。
我可以看到p:editor已经有一个选项可以插入图片的网址，从而在文本中生成<img>标记。但我真的很想从本地驱动器上传图像。到目前为止，我还没有任何有用的东西。

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>

文件上传后在uploadListener中的我的Backing Bean中：

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

其中＆＃34; editor_input＆＃34;引用为编辑器提交的实际表单字段（PF将the_input添加到编辑器的id）请注意我如何更新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是文件的数据。你可以用它做其他事情。

将图像插入Primefaces编辑器

2 个答案: