将图像插入Primefaces编辑器 [英] Insert image into Primefaces editor

问题描述

我正在使用JSF2.2，Tomcat 8和MySQL DB来创建一个简单的CMS。在我的后页中，我使用Primefaces p：editor 来创建/编辑我的页面内容。我想在文本中的某处插入图像。如果我可以上传图像并将其插入当前光标位置，那将是很棒的。理想情况下，图像应保存为blob，但如果它更容易实现，则可以将其存储为本地文件。

我可以看到 p：editor 已经有一个选项可以插入图片的网址，从而在文本中生成< img> 标记。但我真的很想从本地驱动器上传图像。到目前为止，我还没有任何有用的东西。

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.

推荐答案

这就是我的做法：

.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中的一个：

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

其中editor_input引用为编辑器提交的实际表单字段（PF将the_input添加到id你的编辑）
注意我如何更新 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

这篇关于将图像插入Primefaces编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！