springboot 백엔드에 서식 있는 텍스트 콘텐츠를 저장하는 방법은 무엇입니까?

기본 지식

springboot: 백엔드 신속한 애플리케이션 개발 프레임워크.

tinymce: 간단한 리치 텍스트 편집기.

base64: Base64는 인터넷에서 8비트 바이트 코드를 전송하는 가장 일반적인 인코딩 방법 중 하나입니다. Base64는 인쇄 가능한 64개의 문자를 기반으로 이진 데이터를 표현하는 방법입니다. 인코딩 규칙: 3바이트를 4바이트로 변환하고 76자마다 줄바꿈 문자를 추가해야 합니다. 그림의 경우 base64 인코딩은 그림 데이터를 문자열로 인코딩하고 이미지 주소 대신 이 문자열을 사용할 수 있습니다.

기본 아이디어

tinymce 리치 텍스트 편집기의 콘텐츠(html 형식)를 가져와 axios를 통해 백엔드로 보냅니다. 백엔드는 콘텐츠를 받아 데이터베이스에 직접 저장합니다.

단계

1. 프런트엔드에서tinymce 리치 텍스트 편집기를 구성합니다

내가 구성한 리치 텍스트 편집기의 효과는 다음과 같습니다.

2. 리치 텍스트 편집기의 내용을 가져와서 보냅니다. to the backend

여기서는 이미지를 전송하는 방법에 문제가 있습니다. 여기서는 base64 형식으로 이미지를 직접 가져와서 직접 업로드하는 비교적 간단한 방법입니다.

html 내용은 다음과 같습니다.

base64 형식 인코딩으로 인해 이미지의 내용이 매우 긴 것을 볼 수 있습니다. 그러나 장점은 프런트 엔드에서 리치 텍스트 콘텐츠를 요청할 때, 기사에 이미지가 많은 경우 탐색 서버는 이미지 요청을 여러 번 시작할 필요가 없지만 이미지와 텍스트가 함께 프런트 엔드로 전송됩니다.

프런트 엔드는 axios를 통해 백엔드 코드에 서식 있는 텍스트를 보냅니다.

axios({ method: 'post', url: 'http://localhost:8081/users/news', data: { "categoryId": 1, "userId": 1, "title": "震惊！！60岁老头竟然。。。。", "context": tinymce.activeEditor.getContent() } }).then((res)=>{ console.log(res.data) })

또 다른 방법은 이미지 콘텐츠와 텍스트 콘텐츠를 별도로 업로드하는 것입니다. 콘텐츠는 여전히 html 형식이지만 "" , 여기의 이미지 경로는 이미지가 업로드된 후 서버에 저장된 경로로 다시 작성되어야 합니다.

3. 백엔드는 데이터베이스에 테이블을 생성합니다

참고: 서식 있는 텍스트 콘텐츠를 저장하기 위한 데이터 유형은 긴 텍스트이므로 콘텐츠가 너무 길어서 저장할 수 없습니다

저장 결과는 다음과 같습니다.

4. 리치 텍스트 콘텐츠 수신을 위한 백엔드 작성 인터페이스

@ApiOperation("发表新闻") @PostMapping("/news") public Result updateNews(@RequestParam Long userId,@RequestParam Integer categoryId,@RequestParam String title,@RequestParam String context){ System.out.println("发表新闻"+context); Result result = new Result(); News news = new News(categoryId,userId,title,context); boolean flag = newsService.save(news); if (!flag){ result.setFlag(false); return result; } result.setFlag(true); return result; }

위 내용은 springboot 백엔드에 서식 있는 텍스트 콘텐츠를 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!