툴바 버튼을 사용자 정의하여 simditor를 더욱 풍부하게 만들고 사진 업로드 기능을 실현할 수 있습니다.
편집기 초기화
<script type="text/javascript"> $(function(){ toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent' ]; var editor = new Simditor( { textarea : $('#editor'), placeholder : '这里输入内容...', toolbar : toolbar, //工具栏 defaultImage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片 upload : { url : 'ImgUpload.action', //文件上传的接口地址 params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交 fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名 connectionCount: 3, leaveConfirm: '正在上传文件' } }); }) </script>
업로드 기본값을 false로, true 또는 키-값으로 설정 pair 사진을 올릴 수 있고, 인터페이스가 나가고, 백그라운드 코딩을 해야 합니다(이 경우 Struts2)
구현하기 전에 simditor.js를 수정해야 합니다. 기능을 사용하여 "로컬 이미지"를 사용할 수 있습니다. 크롬을 사용하여 요소를 검사하고 이름 속성이 없는지 확인합니다.
simditor.js를 열고
return을 찾습니다. $input = $('').appendTo($uploadItem); 행에서
은 accept= "image/*"로 검색할 수 있습니다. 다음과 같이 name="fileData"
를 빠르게 찾아 입력에 추가합니다.
return _this.input = $('<input name="fileData" type="file" title="' + Simditor._t('uploadImage') + '" accept="image/*">').appendTo($uploadBtn);
또한 계속 검색 accept="image/*" 아래에 또 다른 것이 있습니다. name="fileData"
ImgUploadAction
public class ImgUploadAction extends ActionSupport { private static final long serialVersionUID = 1L; private String err = ""; private String msg; //返回信息 private File fileData; //上传文件 private String fileDataFileName; //文件名 public String imgUpload() { //获取response、request对象 ActionContext ac = ActionContext.getContext(); HttpServletResponse response = (HttpServletResponse) ac.get(ServletActionContext.HTTP_RESPONSE); HttpServletRequest request = (HttpServletRequest) ac.get(ServletActionContext.HTTP_REQUEST); response.setContentType("text/html;charset=gbk"); PrintWriter out = null; try { out = response.getWriter(); } catch (IOException e1) { e1.printStackTrace(); } String saveRealFilePath = ServletActionContext.getServletContext().getRealPath("/upload"); File fileDir = new File(saveRealFilePath); if (!fileDir.exists()) { //如果不存在 则创建 fileDir.mkdirs(); } File savefile; savefile = new File(saveRealFilePath + "/" + fileDataFileName); try { FileUtils.copyFile(fileData, savefile); } catch (IOException e) { err = "错误"+e.getMessage(); e.printStackTrace(); } String file_Name = request.getContextPath() + "/upload/" + fileDataFileName; msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + file_Name + "\"}"; out.print(msg); //返回msg信息 return null; } public String getErr() { return err; } public void setErr(String err) { this.err = err; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public File getFileData() { return fileData; } public void setFileData(File fileData) { this.fileData = fileData; } public String getFileDataFileName() { return fileDataFileName; } public void setFileDataFileName(String fileDataFileName) { this.fileDataFileName = fileDataFileName; } }
을 추가하세요. 관련 기사: