TinyMCE中如何实现图片上传的功能？

2009-05-11 09:45:08 2.4k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Vue用axios实现TinyMCE的图片上传功能 Vue用axios插件实现TinyMCE的图片上传功能最近工作用到富文本编辑器，通过各种对比选择了TinyMCE编辑器。在配置方面参考了这篇文章vue项目移植tinymce踩坑，对原文作者表示感谢。同时，因为项目中使用axios插件进行请求，为了统一格式，使用axios重新实现了TinyMCE自带的上传功能。具体方式如下：再次强调，如果不会再Vue中引入TinyMCE可以参... 阅读详情

急~ 如何在TinyMCE中实现图片上传的功能？应用于java的有没有啊？谢谢

...全文

【tinymce-vue】tinymce-vue自定义图片上传插件，且在插件中调用vue组件最近工作项目需要基于tinymce-vue进行插件开发，需要自己写一个插入图片/视频/链接的插件，虽然说tinymce自带就有这些插件，但是这些插件的UI界面长得不是很美观，所以大佬说要自定义tinymce的这些插件。现在就基于tinymce-vue自定义图片上传的插件，来记录一下吧。先讲一个这个关于图片上传的需求：在点击菜单栏的插入图片，要弹出一个我们自定义的vue组件点击图片上传后要将... 阅读详情

orical1234

Java EE 67,535 成员 225,843 内容

+ 关注 + 加入社区

切换为时间正序

orical1234 2009-05-11

打赏
举报

谢谢~但是公司里不让用struts。只能用spring，请问还有其他办法吗？

凌霞君 2009-05-11

打赏
举报

为tinyMCE增加图片上传功能
本实现采用Struts实现图片的上传。步骤如下：
1．编写文件上传类。代码清单如下：
FileUploadAction.java代码清单如下：

package com.family.fileupload.web.action; import java.util.Calendar; import java.util.Date; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; import org.apache.struts.actions.DispatchAction; import com.family.fileupload.web.form.FileUploadForm; import com.family.fileupload.web.utils.FileUpload; public class FileUploadAction extends DispatchAction { public ActionForward uploadImage(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { FileUploadForm uploadForm = (FileUploadForm) form; FileUpload fu = new FileUpload(uploadForm.getFile()); String realPath = this.getRealPath("/pictures"); String fileName = this.getFileKeyRule() + "." + fu.getExtendName().toLowerCase(); String filePath = realPath + "/" + fileName; fu.saveToFile(filePath); request.setAttribute("fileUrl", this.getRootUrl(request) + "/pictures/" + fileName); return mapping.findForward("image.success"); } private String getRootUrl(HttpServletRequest request) { StringBuffer buf = request.getRequestURL(); int length = request.getRequestURI().length(); buf.delete(buf.length() - length, buf.length()); return buf.toString(); } private String getRealPath(String floder) { return this.getServlet().getServletConfig().getServletContext().getRealPath(floder); } private String getFileKeyRule() { Calendar cal = Calendar.getInstance(); cal.setTime(new Date()); int iYear = cal.get(Calendar.YEAR); int iMonth = cal.get(Calendar.MONDAY) + 1; int iDay = cal.get(Calendar.DAY_OF_MONTH); int iHour = cal.get(Calendar.HOUR_OF_DAY); int iMinute = cal.get(Calendar.MINUTE); int iSecond = cal.get(Calendar.SECOND); StringBuffer strKey = new StringBuffer(15); strKey.append(iYear); if (iMonth < 10) { strKey.insert(4, '0'); strKey.insert(5, iMonth); } else { strKey.insert(4, iMonth); } if (iDay < 10) { strKey.insert(6, '0'); strKey.insert(7, iDay); } else { strKey.insert(6, iDay); } if (iHour < 10) { strKey.insert(8, '0'); strKey.insert(9, iHour); } else { strKey.insert(8, iHour); } if (iMinute < 10) { strKey.insert(10, '0'); strKey.insert(11, iMinute); } else { strKey.insert(10, iMinute); } if (iSecond < 10) { strKey.insert(12, '0'); strKey.insert(13, iSecond); } else { strKey.insert(12, iSecond); } return strKey.toString(); } }

FileUploadForm.java代码清单如下：

package com.family.fileupload.web.form; import org.apache.struts.action.ActionForm; import org.apache.struts.upload.FormFile; public class FileUploadForm extends ActionForm { private static final long serialVersionUID = 1L; private FormFile file = null; public FormFile getFile() { return file; } public void setFile(FormFile file) { this.file = file; } }

FileUpload.java代码清单如下：

package com.family.fileupload.web.utils; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import org.apache.struts.upload.FormFile; public class FileUpload { private FormFile file; private int fileSize; private String fileName; private String extendName; private String contentType; public FileUpload (FormFile file) { this.file = file; fileName = this.file.getFileName(); fileSize = this.file.getFileSize(); contentType = this.file.getContentType(); int position = this.file.getFileName().indexOf("."); extendName = this.file.getFileName().substring(position + 1, this.file.getFileName().length()); } public void saveToFile(String fileName) { try { InputStream is = this.file.getInputStream(); int bytesRead = 0; byte[] buffer = new byte[8912]; OutputStream os = new FileOutputStream(fileName); while ((bytesRead = is.read(buffer, 0, 8912)) != -1) { os.write(buffer, 0, bytesRead); } is.close(); os.close(); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } public String getContentType() { return contentType; } public String getExtendName() { return extendName; } public FormFile getFile() { return file; } public String getFileName() { return fileName; } public int getFileSize() { return fileSize; }}

2．将以上文件编译后打包成 upload.jar，并发布到Liferay应用的包路径下（{$LIFERAY_HOME}/webapps/ROOT/WEB-INF/lib）；

3．编写upload.jsp并复制到liferay应用的的{$LIFERAY_HOME}/webapps/ROOT\html\js\editor\ tinymce\ plugins\advimage\目录下；

Upload.jsp的代码清单如下：

<form action="/c/portal/fileUpload?method=uploadImage" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit"> </form>

4．编写imagePath.jsp并复制到\webapps\ROOT\html下；
代码清单如下：

<script> function insertImage() { var imageUrl = '<%=(String) request.getAttribute("fileUrl")%>'; if (imageUrl != '') { opener.document.all("src").value = imageUrl; window.close(); } } </script>

5．在tinymce.jsp中增加如下代码

*/ function fileBrowserCallBack(field_name, url, type, win) { //打开文件上传窗口 win.open("upload.jsp"); }

6．在liferay的配置文件struts-config.xml或struts-config-ext.xml文件中增加如下配置：
增加formbean配置：

<form-beans> ...... <form-bean name="fileUploadForm" type="com.family.fileupload.web.form.FileUploadForm" /> </form-beans>

增加action配置：

<action-mappings> …… <action name="fileUploadForm" path="/portal/fileUpload" scope="request" type="com.family.fileupload.web.action.FileUploadAction" parameter="method"> <forward name="file.success" path="/filePath.jsp"/> <forward name="image.success" path="/imagePath.jsp"/> </action> </action-mappings>
http://blog.csdn.net/sumongh_pan/archive/2007/04/11/1560603.aspx

TinyMCE中如何实现图片上传的功能？

相关推荐