SpringBoot에서 UEditor를 사용하는 방법에 대한 자세한 자습서(파일 업로드 문제용)

서문
UEditor는 Baidu에서 출시한 오픈 소스 서식 있는 텍스트 편집기로 매우 강력합니다. 이전에 SSM 프레임워크를 사용할 때 한번 사용했는데 문제가 없었습니다 지금은 스프링부트로 전환했습니다 업로드 기능을 사용할 때 문제가 발생했습니다(어떤 구성 항목이 잘못되었는지, 업로드 기능을 사용할 수 없는지) 다양한 정보를 찾아 입력했습니다. 테스트 후 여기에 참조용 솔루션이 있습니다.

다운로드

주소: https://ueditor.baidu.com/website/download.html

다운로드가 완료되면 압축을 풀고 utf8-jsp 폴더를 가져와서 ueditor로 이름을 바꾼 다음 springboot 프로젝트에 복사합니다
(제 정적 리소스는 리소스 아래에 빌드된 정적 폴더에 구성)

그런 다음 ueditor 폴더 아래의 jsp 폴더 및 ueditor.config.js 파일에 초점을 맞춥니다(나중에 사용됨).

lib: uediotr이 의존하는 jar 패키지
config.json: 업로드 기능의 기본 구성 항목
ueditor.config.js: 전체 구성 항목

사용

프로젝트에 필요한 종속 항목을 추가합니다.

		<dependency>
         	<groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20160810</version>
        </dependency>
        <dependency>
            <groupId>com.baidu.ueditor</groupId>
            <artifactId>ueditor</artifactId >
            <version>1.1.2</version>
            <scope>system</scope>
            <systemPath>${basedir}/src/main/resources/lib/ueditor-1.1.2.jar</systemPath >
        </dependency>

ueditor-1.1.2.jar 참고로 리소스 아래에 lib 폴더를 생성한 후 ueditor에서 lib 아래에 ueditor의 jar 패키지를 복사해 넣었습니다
(하지만 나중에 이 의존성을 제거하고 정상적으로 사용이 가능함을 확인했습니다. 따라서 이 jar 패키지를 가져올 수 없습니다.)

페이지의 견적 ueditor(내 것이 thymeleaf임):

<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.min.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>

<script id="editor" type="text/plain" name="content" style="width:95%;height:450px;"></script>

마지막으로 편집기 인스턴스화

<script>
//实例化编辑器
var ue = UE.getEditor('editor', {
    });
</script>

이때 브라우저를 열어 다음과 같이 페이지에 접근할 수 있습니다

. " 나타날거야.

문제의 근원

ueditor.config.js를 열고 코드 줄을 찾습니다.

즉, 요청이 오면 controller.jsp로 이동하지만 springboot는 기본적으로 jsp를 지원하지 않지만 이 jsp는 config.json을 가리키고 config.json을 엽니다. , 첫 번째는 이미지 업로드 관련 구성입니다.

따라서 springboot는 controller.jsp에 액세스할 수 없고 config.json에서 관련 구성을 읽을 수 없으므로 오류를 보고합니다.

해결책

아이디어: springboot는 jsp를 통해 config.json에 액세스할 수 없으므로 jsp를 사용하는 대신 config.json에서 직접 구성을 가져오도록 합니다.

1. 새 컨트롤러 인터페이스를 생성합니다. 내용은 다음과 같습니다.

    /**
     * 上传配置：即不走config.json，模拟config.json里的内容，解决后端配置项不正确，无法上传的问题
     * @return
     */
    @RequestMapping("/ueditor/config")
    @ResponseBody
    public String uploadConfig() {
        String s = "{\n" +
                "            \"imageActionName\": \"uploadimage\",\n" +
                "                \"imageFieldName\": \"upfile\", \n" +
                "                \"imageMaxSize\": 2048000, \n" +
                "                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
                "                \"imageCompressEnable\": true, \n" +
                "                \"imageCompressBorder\": 1600, \n" +
                "                \"imageInsertAlign\": \"none\", \n" +
                "                \"imageUrlPrefix\": \"\",\n" +
                "                \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
        return s;
    }

2. ueditor.config.js의 serverUrl을 위에서 정의한 url로 수정(배포 시 절대 경로로 변경)

3. 백엔드에서 파일 업로드 인터페이스 정의(ueditor와 함께 제공되는 업로드를 사용하는 것은 비현실적이므로 주의하십시오. 반환 형식 매개 변수로)

4. 프런트 엔드 정의는 사용자 지정 업로드를 지원합니다(배포 시 절대 경로로 변경됨).

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
       if (action == 'uploadimage'){
            return '/demand/upload'; /* 你自己的图片上传action */
        }else{
            return this._bkGetActionUrl.call(this, action);
        }
};

이때 다시 페이지를 방문하여 업로드할 사진을 클릭하면 오류가 없을 것입니다. (배경은 String을 사용하여 콘텐츠를 받고, 사진의 URL은 저장됩니다.) 5. 사용자 정의 도구 모음 ueditor는 필요한 도구 모음을 사용자 정의할 수 있습니다


.
, 기본값은 모두 표시하는 것이지만 실제로는 필요에 따라 사용자 정의 할 수 있습니다. 여기에 동영상을 업로드하는 등의 기능이 없으므로 제거 할 수 있습니다.
공식 문서 : http://fex.baidu.com/ueditor/#start-toolbar
제가 심사한 내용입니다 :

지금까지 ueditor를 이용하여 springboot가 완성되었으며, 필요하신 분들은 참고하시면 좋을 것 같습니다. 도움이 되십시오.