현재 개발 프로젝트에는 풍부한 텍스트 상자가 포함됩니다. 많은 풍부한 텍스트 편집자에 대해 알게 된 후 마침내 Du Niang의 ueditor를 사용하기로 결정했습니다. 이유 : 강력한 기능이 있으며 Java 백엔드에 적용되는 사진 및 비디오 업로드가 제공됩니다.
프로젝트 갤러리
더 이상 고민하지 않고 프로젝트의 주소는 다음과 같습니다. http://ueditor.baidu.com/website/
Jianshu가 다른 사이트의 외부 링크를 지원하지 않는 것은 유감입니다.
통합 프로세스
백엔드 변환
이 프로젝트는 SpringBoot 프레임 워크를 사용하기 때문에 Java 백엔드에 대한 UEDITOR의 지원은 JSP 파일 만 제공하는 것입니다. 따라서 파일을 스프링 부츠 용 통합 컨트롤러로 처리하고 수정해야합니다.
@controller @transactional @requestmapping ( "/static/common/ueditor/jsp") public class jspcontroller {@requestmapping ( "/controller") @responsebody public void getConfiginfo (httpservletRequest request, httpservletResponse 응답) {response.setcontentType ( "Application/JSON"); String rootpath = request.getSession (). getServletContext () .getRealPath ( "/"); try {string exec = new ActionEnter (request, rootpath) .exec (); printwriter writer = response.getwriter (); Writer.write (exec); Writer.flush (); Writer.close (); } catch (ioException | JSONEXCEPTion e) {e.printstacktrace (); }}위에서 언급했듯이 프로젝트는/static/common/ueditor/jsp/컨트롤러에서 업로드 요청을 지원합니다.
프론트 엔드 요청
프론트 엔드에 Ueditor 지원을 추가하십시오. 즉, 전체 UEDIOOTR 패키지를 프로젝트로 가져 와서 컨트롤이 사용되는 JS를 가져 오십시오.
프로젝트 소개시, 해당 코드 구조는 다음과 같습니다.
페이지 소개, 해당 코드는 다음과 같이 소개됩니다.
<script type = "text/javaScript"charset = "utf-8"th : src = "@{/static/common/ueditor/ueditor.config.js}"> </script> <script type = "text/javaScript"charset = "utf-8" Th : src = "@{/static/common/ueditor/ueditor.all.js}"> </script> Ueditor 편집자를 인스턴스화하십시오. 아래는 참조 용 초기화 매개 변수입니다.
// Instantiation 편집기 var ue = ue.getEditor ( ''+id, {툴바 : [ 'fontfamily', // font 'font'fontsize', // font size'undo ', // undo', // redo '|', 'extent', // eTient'ForeColor ', // font color'Bold'Backcolor' // bold'underline ', // unline'Strikethrough', // strikethrough '|', 'justifyLeft', // list-align'Justifyright ', // right-align'Justifycenter', // center-align '|', inke ', // hyperlink'unlink', // unouglint ', // single upload', // single upload ', // // music ', // music //'insertvideo ', // video', // 형식 'formatmatch', // format brush 'source', // source code]], enableAutoSave : false, autoHeightEnabled : true, autofloatenabled : true, initialframewidth : width, initialframeHeight : true // scrameHeignabled : // scrambar});이 시점에서 우리 페이지를 방문 할 때 풍부한 텍스트 상자가 표시됩니다.
그러나 백그라운드 구성 파일에 오류가 있고 업로드 함수를 구현할 수 없다는 메시지가 표시됩니다.
업로드 기능을 구현하십시오
config.js 파일과 해당 글로벌 요청 경로를 수정하십시오. 이 요청은 config.json에 해당하는 구성 데이터를 얻는 것입니다. 컨트롤러에서 구성 정보를 직접 반환하거나 컨트롤러에서 JSON 파일을 읽을 수 있습니다. ueditor와 함께 제공되는 메소드를 사용하여 구성 파일을 읽는 메소드를 사용하고 있습니다. 이 기사는 처음에 시행되었습니다. 다음은 수정 해야하는 요청입니다.
위 구성을 완료 한 후에는 Ueditor 페이지를 다시로드하면 이미지의 업로드 버튼을 완료 할 수 있습니다.
참고 : 디버깅 모드를 시작하면 JSON 문자열을로드 할 때 중단 점을 추가하고 테스트하십시오. 시간 초과 오류가 발생합니다. 구성 필드는 당분간 구성 파일에서 찾을 수 없었습니다. 모두 여기에 주목해야합니다. 모든 구성이 문제가되지 않지만 백그라운드 구성 오류가 여전히 반환 된 경우 모든 중단 점을 취소하고 시도 할 수 있습니다.
참고 : 업로드는 업로드 구성 요소를 추가해야합니다.
<pectionency> <groupId> Commons-FileUpload </groupid> <artifactid> Commons-FileUpload </artifactid> <버전> 1.3 </version> </fectionency>
서블릿을 사용하여 업로드를 구현하십시오
/** * Servlet을 사용하여 Ueditor * * @author Onywang * @Create 2018-02-05 2:40 **/ @webservlet (name = "ueditorservlet", urlpatterns = "/common/ueditor/ueditor") 공개 class ueditorcontroldervlet extenst httpservlet {@overrr proted void dopost (httpservletrequest request, httpservletresponse response) servletexception, ioexception {request.setcharacterencoding ( "utf-8"); response.setheader ( "Content-Type", "Text/Html"); printwriter out = response.getwriter (); ServletContext Application = this.getServletContext (); 문자열 rootpath = application.getRealPath ( "/"); 문자열 action = request.getParameter ( "action"); 문자열 result = new ActionEnter (request, rootpath+"web-inf/class") .exec (); if (action! = null && (action.equals ( "listfile") || action.equals ( "listImage")))) {rootpath = rootpath.replace ( "//", "/"); 결과 = result.replaceall (rootpath, "/"); } out.write (결과); } @override protected void doget (httpservletrequest req, httpservletresponse resp) servletexception, ioexception {dopost (req, resp); } 서블릿 방법을 사용하고 새 주석이 달린 서블릿을 만듭니다.
@servletcomponentscan 주석을 기본 메소드에 추가해야합니다.
ueditor의 기본 액세스 경로를 수정하십시오.
참고 : SpringBoot에서 모든 리소스 파일은 클래스에 배치됩니다. 모두 경로를 처리 할 때주의하십시오. Web-INF/클래스에 경로를 추가하십시오
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.